Hi! Welcome...

Premium Blogger Template
FREE Premium Blogger Templates
Μοναδικά Free Blogger πρότυπα για το blog σας
Slimbox 2.02 με jquery-1.3.2 στο Bloggspot .
Πώς να εγκαταστήσετε SlimBox σε Blogger
ΙmgBox
Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
31 καλυτέρα Blogger Widgets και addon
Κατάλογος συνδέσμων όπου μπορείτε να ανακαλύψετε περισσότερα widgets για το blog σας.
1 2 3 4 5

Σάββατο, Ιουνίου 5

8

Όμορφο Image rollover menu Updated!

Καλησπέρα σε όλους και καλό καλοκαιράκι  :) !

Σήμερα είπα να δούμε ένα όμορφο CSS Image rollover menu .

Πολλοί χρησιμοποιούν  επεξεργαστές εικόνας όπως Paint Shop Pro..  η παρόμοια προγράμματα για να δημιουργήσουν JavaScript image rollovers , όμως είναι πολύ πιο εύκολο να κάνετε  μια
rollover εικόνα  χωρίς JS, Χρησιμοποιώντας μόνο CSS.

Οι σύνδεσμοι πρέπει να είναι τοποθετημένοι σε ένα κατάλογο με την ανάλογη εντολή .

Σημείωση : Τοποθετήστε αυτό το div μέσα στο </body> ετικέτα της ιστοσελίδας σας, όπου θέλετε να εμφανιστεί το μενού η πηγαίνετε Προσθήκη gadget >> HTML/JavaScript  και εισάγετε τον κώδικα εκεί  : 

<div id='navbar'>  
        <ul>
            <li><a class='home' href='#'>home</a></li>
            <li><a href='#'>About </a></li>
            <li><a href='#'>Widgets</a></li>
            <li><a href='#'>Freebies</a></li>
            <li><a href='#'>Forum</a></li>
            <li><a href='#'>Resources</a></li>
            <li><a href='#'>Contact</a></li>
            <li><a href='#'>Αρχεία</a></li>
        </ul><br class='spacer'/>
    </div>


Όπως βλέπετε παρακάτω , ακόμη το μενού μας δεν είναι και τίποτα το σπουδαίο .



Ο ακόλουθος CSS κώδικας όμως θα το μετατρέψει όμως σε ένα όμορφο image rollover μενού πλοήγησης και θα χρησιμοποιήσουμε μόνο 1 εικόνα .



#navbar ul{
    margin:0px;
    padding:0px;
   list-style:none;
   width:auto;  
    }
  
#navbar ul li{
    font:bold 13px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#FFF8F0;
    text-align:center;
    background-color:#000;
    width:71px;
    float:left;
    }  
#navbar ul li a{
    font:bold 13px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#FFF8F0;
    text-align:center;
    text-decoration:none;
    display:block;
    text-transform:uppercase;
    background-color:#000;  
    }  
#navbar ul li a.home{
    background:url(http://2.bp.blogspot.com/_Q6tRnBVZnko/S-QYge0-cII/AAAAAAAAAyA/xoUE7XxpmGA/s1600/header_nav_bg.gif) no-repeat 0 0 #34160C;
    font:bold 13px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#FFF8F0;
    text-align:center;
    text-decoration:none;
    display:block;
    text-transform:uppercase;  
    }
#navbar ul li a:hover{
    background:url(http://2.bp.blogspot.com/_Q6tRnBVZnko/S-QYge0-cII/AAAAAAAAAyA/xoUE7XxpmGA/s1600/header_nav_bg.gif) no-repeat 0 0 #34160C;
    color:#FFF8F0;
    }

Σημείωση : Εισάγετε  τον παραπάνω CSS κώδικα πριν την ετικέτα  ]]></b:skin>  στο πρότυπο σας .

Και το αποτέλεσμα είναι αυτό :




Όμορφο ,απλό και εύκολο και χωρίς να χρειάζεται JS .

Ίδιο μενού χωρίς εικόνα , μόνο με την χρήση CSS :
  
Όπως πολύ σωστά δέχτηκα παρατήρηση , η προηγούμενη εκδοχή αυτού του μενού δεν υποστήριζε μεγάλες λέξεις και αυτό γιατί η εικόνα που χρησιμοποιείται είναι συγκεκριμένων διαστάσεων 71px.
Έτσι παρακάτω θα δείτε άλλη μια έκδοση του συγκεκριμένου  menu που είναι ακριβώς ίδια , αλλά δεν χρησιμοποιείτε εικόνα , μόνο CSS  και υποστηρίζει μεγάλες λέξεις .

Εδώ είναι ο CSS κώδικας  που θα χρειαστείτε :
Σημείωση : Εισάγετε  τον παραπάνω CSS κώδικα πριν την ετικέτα  ]]></b:skin>  στο πρότυπο σας .

 #navbar ul{
margin:0px;
padding:0px; 
list-style:none;
width:auto;
}

#navbar ul li{
font:bold 13px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFF8F0;
text-align:center;
background-color:#000; 
width:100px;
float:left;
}
#navbar ul li a{
font:bold 13px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFF8F0;
text-align:center;
text-decoration:none;
display:block;
text-transform:uppercase;
background-color:#000; 
}
#navbar ul li a.home{
background-color: #F76C10;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font:bold 13px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFF8F0;
text-align:center;
text-decoration:none;
display:block;
text-transform:uppercase;
}
#navbar ul li a:hover{
 background-color: #F76C10;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
color:#FFF8F0;
}

  O κώδικας div μέσα στο </body> , για να ενεργοποιήσετε το μενού παραμένει ο ίδιος  . Θα το βρείτε στην αρχή αυτής της αναρτήσεις .

Και το αποτέλεσμα είναι αυτό :  



Ακριβώς το ίδιο αποτέλεσμα και μόνο με CSS  : )

Κατανόηση του κώδικα :   


margin:0px; -> Αν θέλετε να μετακινήσετε το μενού προς τα δεξιά αλλάξτε το 0px σε 50px η σε 80px μέχρι να βρείτε την θέση που θέλετε να εμφανίζετε 
 
padding:0px; -> Αν θέλετε να ανεβάσετε το μενού προς τα επάνω αλλάξτε το 0px σε 50px η σε άλλο μέχρι να βρείτε την θέση που θέλετε να εμφανίζετε 

color:#FFF8F0;  -> Το χρώμα της γραμματοσειράς

background-color:#000;  -> Το χρώμα υπόβαθρου από το μενού , το οποίο σε αυτή την περίπτωση είναι το μαύρο

 width:100px;   -> Το πλάτος από κάθε στοιχείο li

background-color: #F76C10;   -> Το hover χρώμα κάθε στοιχείου li , το οποίο είναι το πορτοκαλί . 

Μπορείτε να επεξεργαστείτε το κάθε στοιχείο μέχρι να  βρείτε αυτό που σας αρέσει . 

8:

mavros gatos είπε...

Σοφία, υπέροχο  και χρήσιμο.
Μόλις το έβαλα εδώ: http://visaltis.blogspot.com/
Έχω μία ερώτηση, πως κάνω να εμφανίζονται τα κουμπιά στη μέση και όχι αριστερά, να ξεκινάν από την μέση.
Και μια παρατήρηση, δεν χωράνε μεγάλες λέξεις, όπως για παράδειγμα την λέξη: ΑΡΧΑΙΟΛΟΓΙΑ, το τελευταίο Α δεν το εμφανίζει. =-O
Ευχαριστώ.

bloggertrics είπε...

Πολλές καλησπερες  ;) :-P  

Χαίρομαι πολύ που σου άρεσε !
Λοιπόν για να το πας λίγο πιο δεξιά το μενού απλά βρες αυτές τις γραμμές στην αρχή του CSS κώδικα :

#navbar ul{
margin:0px;
padding:0px;
list-style:none;
width:auto;
}

και άλλαξε το margin:0px; σε margin:50px; η ανέβασε το κι άλλο μέχρι να βρεις την θέση που θέλεις να εμφανιστεί το μενού .

Όσο για τις μεγάλες λέξεις που δεν χωράει , οκ .
Έκανα μερικές αλλαγές στον κώδικα και είναι οκ τώρα. ;)
Τον καινούργιο κώδικα θα τον βρεις στο κάτω μέρος της ανάρτησης .

mavros gatos είπε...

Τέλεια, θα το δοκιμάσω αμέσως και πάλι σε ευχαριστώ.
:)

post2.soo είπε...

Σοφάκι να σε ρωτήσω επειδή θέλω να αλλάξω το menu του blog.
Υπάρχει δυνατότητα στο συγκεκριμένο να βάλω submenu? Αναρωτιέμαι αν θέλει επιπλέον κώδικα ή απλά αυτό που κάνω μέχρι στιγμής προσθέτοντας μία παύλα 
:*

post2.soo είπε...

Σοφία δεν μου απάντησες, σε πλακώσω ε?!χιχι :-P

bloggertrics είπε...

Καλα ντε μην βαρας >:o >:o >:o >:o το ξεχασα  κοριτσακι χι χι

Λοιπον , γι το  submenu θελει να προαθεσω και αλλο κωδικα .
Θα το φτιαξω με το submenu και θα σου το στειλω ...
Το χρωμα ?? τι χρωμα το θες ???
Ασχετο .....Αυτο με την παυλα πως το κανεις ?

post2.soo είπε...

Λολ :-P
Εεε είδες το μενού που έχω πάνω στο blog ε? Πηγαίνεις εκεί που λεεί Page elements, πληκτρολογείς το link και από κάτω την ονομασία που θέλεις να δώσεις. Πριν την ονομασία πληκτρολογείς πχ.
-Μυστικά ομορφιάς και σου βγάζει το submenu. Η παύλα από μόνη της δημιουργεί submenu:p
Έγινα κατανοητή? Πολύ αμφιβάλλω :-P

Δεν με νοιάζουν τα χ΄ρωματα αυτά μπορώ να τα δουλέψω μοναχό μου χιχι
Ευχαριστώ, δεν βιάζομαι ε! Με την ησυχία σου μπουμπού >:o O:-) :*

bloggertrics είπε...

Aααααααααααα τώρα κατάλαβα τι εννοείς  :-D >:o  
Μόλις ήπια τον καφέ μου και βλέπεις ο εγκέφαλός μου αργεί να πάρει μπρος χωρίς καύσιμα χι χι =-X
Για να το κάνεις  αυτό όμως χρειάζεται να ορίσεις στο CSS το στυλ του submenu  , εγώ δεν το έχω κάνει .
Θα το κάνω και θα σου το στείλω.

Φιλιααααααα  :*  

 

© 2010 Bloggertrics

WordPress Theme by: WooThemes. | Converted into Blogger Templates by : Bloggertrics

ΑΡΧΙΚΗ| Sitemap| Posts RSS