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



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

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

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

<li><a href='http://foulscode.blogspot.gr/' title='Fouls Code'>Blogger Tricks</a></li>
<li><a href='http://loneeagle110.blogspot.com/' title='Στάλες στο γαλάζιο'>Στάλες στο γαλάζιο</a>
</li>
<li><a href='http://foulscode.blogspot.gr/' 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://foulscode.blogspot.gr/' title='fouls code'>Tips</a>
<!-- Εδώ αρχίζει το SubMenu -->
<ul>
<li><a href='http://foulscode.blogspot.gr/' 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://foulscode.blogspot.gr/' 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  του μενού .

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

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

 ΠΗΓΗ
Κατηγορίες:
Σχόλια