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

Τρίτη, Ιουνίου 15

2

100% CSS οριζόντιο Drop Down Menu



Στην προηγούμενη ανάρτηση είχαμε δει πως δημιουργούμε  ένα όμορφο CSS Image rollover menu .
 Σήμερα , θα δούμε άλλη μια παραλλαγή του  rollover menu .Θα προσθέσουμε σε αυτό το  μενού , Drop Down στοιχεία υπομενού  .

Χρησιμοποιώντας Pure Drop Down Menu CSS, μπορείτε να προσθέσετε όσα πολυεπίπεδα στοιχεία υπομενού θέλετε  .

Εμείς  θα χρησιμοποιήσουμε  μερικά UL  για να δημιουργήσουμε  το μενού μας, δεδομένου ότι δεν είναι μόνο η καταλληλότερη μέθοδος, αλλά είναι επίσης συμβάλλει και στην βελτιστοποίηση του για τις μηχανές αναζήτησης .

Πρώτα ας δούμε το  HTML.

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

<!-- Αρχίζει το Menu -->
<ul id='topnav'>
<li class='current_page_item'><a href='/'>Home</a></li>

<li><a href='http://bloggertrics.blogspot.com/' title='Blogger Tricks'>Blogger Tricks</a></li>
<li><a href='http://loneeagle110.blogspot.com/' title='Στάλες στο γαλάζιο'>Στάλες στο γαλάζιο</a>
</li>
<li><a href='http://bloggertrics.blogspot.com/search/label/My%20blogger%20templates' title='Blogger Templates'>Templates</a>
<!-- Εδώ αρχίζει το SubMenu -->
<ul>
<li><a href='#' title='Τιτλος 1'>Τιτλος 1</a></li>
<li><a href='#' title='Τιτλος 2'>Τιτλος 2</a></li>

<li><a href='#' title='Τιτλος 3'>Τιτλος 3</a></li>
<li><a href='#' title='Τιτλος 4'>Τιτλος 4</a></li>
<li><a href='#' title='Τιτλος 5'>Τιτλος 5</a></li>
<li><a href='#' title='Τιτλος 6'>Τιτλος 6</a></li>
<li><a href='#' title='Τιτλος 7'>Τιτλος 7</a></li>

<li><a href='#' title='Τιτλος 8'>Τιτλος 8</a></li>
</ul>
<!-- Εδώ τελειώνει το SubMenu -->
</li>
<li><a href='http://bloggertrics.blogspot.com/search/label/blogger%20tips' title='Blogger Tips'>Tips</a>
<!-- Εδώ αρχίζει το SubMenu -->
<ul>
<li><a href='http://bloggertrics.blogspot.com/search/label/Image%20Effects' title='Image Effects'>Image Effects</a></li>

<li><a href='#' title='Τιτλος 2'>Τιτλος 2</a></li>
<li><a href='#' title='Τιτλος 3'>Τιτλος 3</a></li>
<li><a href='#' title='Τιτλος 4'>Τιτλος 4</a></li>
<li><a href='#' title='Τιτλος 5'>Τιτλος 5</a></li>
<li><a href='#' title='Τιτλος 6'>Τιτλος 6</a></li>
<li><a href='#' title='Τιτλος 7'>Τιτλος 7</a></li>
<li><a href='#' title='Τιτλος 8'>Τιτλος 8</a></li>
</ul>
<!-- Εδώ τελειώνει το SubMenu -->
</li>
   <li><a href='http://bloggertrics.blogspot.com/search/label/Blogger%20Widgets' title='Widgets'>Widgets</a>

<li><a href='#' title='Τιτλος 1'>Τιτλος 1</a></li>
<li><a href='#' title='Τιτλος 2'>Τιτλος 2</a></li>
<li><a href='#' title='Τιτλος 3'>Τιτλος 3</a></li>
<li><a href='#' title='Τιτλος 4'>Τιτλος 4</a></li>
<li><a href='#' title='Τιτλος 5'>Τιτλος 5</a></li>
<li><a href='#' title='Τιτλος 6'>Τιτλος 6</a></li>
<li><a href='#' title='Τιτλος 7'>Τιτλος 7</a></li>
</ul>
<!-- Εδώ τελειώνει το SubMenu --></li>
</ul>
<!-- Τελειώνει το Menu -->


Μπορείτε να προσθέσετε όσες ετικέτες  και οσα  Drop Down στοιχεία υπομενού εσείς θέλετε  .


Το επόμενο βήμα είναι να γράψουμε  το CSS , για να πάρει σχήμα το μενού μας .

Ο βασικός μας CSS κώδικας :

#topnav {
margin: 0px;
padding: 5px 5px 5px 5px;
float: left;
z-index:8;
background-color:#000;
}

#topnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#topnav li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;

}

#topnav li a, #topnav li a:link {
color: #FFFFFF;
display: block;
font-family: Arial, Tahoma, Verdana;
font-size: 12px;
font-weight: bold;
margin: 0px 5px 0px 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
text-transform: uppercase;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-radius: 5px;
}

#topnav li a:hover {
background-color: #F76C10;
color: #FFFFFF;
margin: 0px 5px 0px 0px;
padding: 8px 15px 8px 15px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-radius: 5px;
}

#topnav li li a, #topnav li li a:link, #topnav li li a:visited {
background-color:#000;
width: 150px;
color: #FFFFFF;
float: none;
margin: 0px 0px 0px -1px;
padding: 7px 10px 7px 10px;
border-bottom: 1px dashed #222;
border-left: 1px dashed #222;
border-right: 1px dashed #222;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}

#topnav li li a:hover {
background:#f08c34;
color: #FFFFFF;
margin: 0px 0px 0px -1px;
padding: 7px 10px 7px 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-khtml-border-radius: 0px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}

#topnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 180px;
margin: 0px;
padding: 0px;
}

#topnav li li {
}

#topnav li ul a {
width: 150px;
}

#topnav li ul a:hover, #topnav li ul a:active {

}

#topnav li ul ul {
margin: -30px 0 0 171px;
}

#topnav li:hover ul ul, #topnav li:hover ul ul ul{
left: -999em;
}

#topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul{
left: auto;
}

#topnav li:hover {
position: static;
}

#topnav .current_page_item a {
background-color: #F76C10;
color: #FFFFFF;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-khtml-border-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
}

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

Δείτε το μενού σε λειτουργία

 Κατανόηση του κώδικα που μπορείτε να επεξεργαστείτε :  

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

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

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

background:#f08c34;  -> Το hover χρώμα κάθε στοιχείου li  από το SubMenu  του μενού .

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

Καλή επιτυχία σε όλους  : ) 

2:

post2.soo είπε...

Σοφάκι μου σε ευχαριστώ πάρα πολύ που μπήκες στον κόπο να το φτιάξεις!
Ελπίζω να μην σε ταλαιπώρησα πολύ!
Θα προσπαθήσω να το βάλω αύριο γιατί τέτοια ώρα σίγουρα θα κάνω μαμακία χιχι.
1000 ευχαριστώ!
Τέλος με τις γλύκες :-P
Μουρλή ε μουρλή :-[ =-O >:o :* O:-)

bloggertrics είπε...

Δεν ήταν κόπος κοριτσάκι μου και ουτε με ταλαιπώρησες .
Αν χρειαστείς κάτι ξέρεις τι να κάνεις ε ?

 Φιλιά πολλά :* :-P

 

© 2010 Bloggertrics

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

ΑΡΧΙΚΗ| Sitemap| Posts RSS