11:56 AM
Putu Meiyanto
Yes, the first article Ditahun 2011, I will teach you how to create a complete navigation with drop down menus with pure CSS. Loh not already been? Yes and it was in 2008! stale and old-fashioned (not so old-really old anyway), and many also ask about the menu because of difficulty using image sprites. And because it's the year 2011, then I will teach it again without using any images at all.
Well before the information, I assume you already know HTML and CSS, and of course have understood link between the HTML file with CSS, if not I suggest learning CSS I see articles from old-fashioned era.
Caution:
Before you continue reading this article, I suggest you understand the basics of HTML and CSS basics first.
Create HTML code
Okay we start with its HTML code, oh yes now that its time HTML5 HTML5 then I started to wear, just calm my still-mixed mixed with XHTML, HTML5 later on I will discuss their own next time. Okay for the structure is still the same and we use the tag <ul> <li>.
Program code :
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Drop Down Menu</title>
<head>
<body>
<div id="place-nav">
<ul id="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Social</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google</a>
<ul>
<li><a href="#">Google Wave</a></li>
<li><a href="#">Google Buzz</a></li>
<li><a href="#">Google Plus</a></li>
</ul>
</li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
</ul>
</div>
</body>
</html>
Ok, if you notice there is a menu within the Social <li> again and again precisely therein <li> in Google there is a menu again. This we will later make a drop down menu with 2 levels of depth. Okay if you check the results while like this.
Well now his magic, we used to change the list that it becomes an interesting menu with CSS. Its CSS code like this, I immediately write all my new future terangin:
Program code :
#place-nav {
width:960px;
height:35px;
margin:63px 0 0 0;
}
#nav {
height:35px;
}
#nav li {
height:35px;
float:left;
display:inline;
margin:0 5px;
position:relative;
font-family: Arial, verdana, serif;
z-index:1000;
}
#nav li a {
float:left;
display:inline;
height:25px;
padding:10px 8px 0 8px;
font-size:12px;
color:#9e9e9e;
font-weight:bold;
text-transform:uppercase;
text-shadow:0 0 3px #c7c7c7;
}
#nav li:hover a {
text-decoration:none;
color:#505050;
}
#place-nav ul ul {
position:absolute;
z-index:1200;
display:none;
width:186px;
margin: 0;
top: 35px;
left:0;
background:#1d87ca;
padding:0 0 2px 0;
}
#place-nav ul li ul li {
display: inline;
float: left;
width:186px;
height:auto;
border-bottom:1px solid #085d93;
float: left;
padding: 0;
position:relative;
margin:0;
}
#place-nav ul ul ul {
position:absolute;
z-index:1300;
display:none;
width:186px;
margin: 0;
top: 0;
left:183px;
background:#1c83ce;
border-left:1px solid #1479c3;
padding:0;
}
#place-nav ul li ul li ul li {
display: inline;
float: left;
padding: 0;
}
#place-nav #nav li:hover ul li a, #place-nav #nav li:hover ul li a:link, #place-nav #nav li:hover ul li a:visited {
color:#fff;
font-size:12px;
width:170px;
height:auto;
text-transform:none;
border:none;
background: none;
padding:9px 8px;
text-shadow:none;
margin:0;
font-weight:lighter;
}
#place-nav #nav li:hover ul li a:hover, #place-nav #nav li ul li a:hover {
text-decoration:none;
color:#fff;
background:#0f74bd;
}
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;}
div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
Then, drop downnya results can be seen first. Well I will explain the most important parts, first is the # nav li here we love position: relative;, why? because of the drop-down our # nav ul ul place have the position: absolute;. So we have to declare a container that fits under each menu position <li>. If we do not give position: relative; then the browser will assume it is a container so that the drop downnya <body> will appear top left corner of the browser.
Next is the # nav li: hover a loh kok instead of # nav a: hover li <li> why his dihover? Yep, because we are in the drop down menu and not in <a> <li> then if we want to remain in his footsteps so we hover at its <li>. I add the z-index: 1000 just in case because usually it's usually found under the menu javascript slideshow and most cases especially IE7 dropdown position below the slideshow, because I love the z-index is rather high position let me on it.
Caution:
And because the familiar IE6 hover just to tag <a> then if you still love and still want to support IE6 mending to sea aja csshover.htc Peter Nederlof then use to can walk in IE6 /
Okay place next # nav ul ul-nah this is a drop downnya, therefore we give the position: absolute; to appear just below each # nav a: hover li. Do not forget to get rid of our first, due to drop downnya emerged when we used to hover so initially hidden with display: none;. We set the position to just below the menu with a top: 35px; and left: 0;. Be sure to distance above it there is no empty space 1 pixel too because if there when we mouse over the empty space we have outside of the mouse <li> so dropdown will disappear. So make sure the top is less than or equal to the height <li> thereon.
# Place the next-nav ul ul ul is a drop down to level 2 so yes just like before, but because Dorp down the second-level position to right rather than drop down a level 1, then we enlarge the left but do not have any distance of 1 pixel.
Now the last and most important are:
Program code :
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;}
div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
This is the css code to create drop down and eliminate them. As you can see place-nav div # li: hover ul, div # nav li-place li: hover ul This means that if we menghover <li> it will appear next <ul> display: block and <ul> it (the level to 2) does not appear display: none;, just when we hover <li> level to level two then drop down into the two will appear
Ok, easy right? dizzy? 've tried aja ya, enjoy......!!!
Good luck .......
Well before the information, I assume you already know HTML and CSS, and of course have understood link between the HTML file with CSS, if not I suggest learning CSS I see articles from old-fashioned era.
Caution:
Before you continue reading this article, I suggest you understand the basics of HTML and CSS basics first.
Create HTML code
Okay we start with its HTML code, oh yes now that its time HTML5 HTML5 then I started to wear, just calm my still-mixed mixed with XHTML, HTML5 later on I will discuss their own next time. Okay for the structure is still the same and we use the tag <ul> <li>.
Program code :
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Drop Down Menu</title>
<head>
<body>
<div id="place-nav">
<ul id="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Social</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google</a>
<ul>
<li><a href="#">Google Wave</a></li>
<li><a href="#">Google Buzz</a></li>
<li><a href="#">Google Plus</a></li>
</ul>
</li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
</ul>
</div>
</body>
</html>
Ok, if you notice there is a menu within the Social <li> again and again precisely therein <li> in Google there is a menu again. This we will later make a drop down menu with 2 levels of depth. Okay if you check the results while like this.
Well now his magic, we used to change the list that it becomes an interesting menu with CSS. Its CSS code like this, I immediately write all my new future terangin:
Program code :
#place-nav {
width:960px;
height:35px;
margin:63px 0 0 0;
}
#nav {
height:35px;
}
#nav li {
height:35px;
float:left;
display:inline;
margin:0 5px;
position:relative;
font-family: Arial, verdana, serif;
z-index:1000;
}
#nav li a {
float:left;
display:inline;
height:25px;
padding:10px 8px 0 8px;
font-size:12px;
color:#9e9e9e;
font-weight:bold;
text-transform:uppercase;
text-shadow:0 0 3px #c7c7c7;
}
#nav li:hover a {
text-decoration:none;
color:#505050;
}
#place-nav ul ul {
position:absolute;
z-index:1200;
display:none;
width:186px;
margin: 0;
top: 35px;
left:0;
background:#1d87ca;
padding:0 0 2px 0;
}
#place-nav ul li ul li {
display: inline;
float: left;
width:186px;
height:auto;
border-bottom:1px solid #085d93;
float: left;
padding: 0;
position:relative;
margin:0;
}
#place-nav ul ul ul {
position:absolute;
z-index:1300;
display:none;
width:186px;
margin: 0;
top: 0;
left:183px;
background:#1c83ce;
border-left:1px solid #1479c3;
padding:0;
}
#place-nav ul li ul li ul li {
display: inline;
float: left;
padding: 0;
}
#place-nav #nav li:hover ul li a, #place-nav #nav li:hover ul li a:link, #place-nav #nav li:hover ul li a:visited {
color:#fff;
font-size:12px;
width:170px;
height:auto;
text-transform:none;
border:none;
background: none;
padding:9px 8px;
text-shadow:none;
margin:0;
font-weight:lighter;
}
#place-nav #nav li:hover ul li a:hover, #place-nav #nav li ul li a:hover {
text-decoration:none;
color:#fff;
background:#0f74bd;
}
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;}
div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
Then, drop downnya results can be seen first. Well I will explain the most important parts, first is the # nav li here we love position: relative;, why? because of the drop-down our # nav ul ul place have the position: absolute;. So we have to declare a container that fits under each menu position <li>. If we do not give position: relative; then the browser will assume it is a container so that the drop downnya <body> will appear top left corner of the browser.
Next is the # nav li: hover a loh kok instead of # nav a: hover li <li> why his dihover? Yep, because we are in the drop down menu and not in <a> <li> then if we want to remain in his footsteps so we hover at its <li>. I add the z-index: 1000 just in case because usually it's usually found under the menu javascript slideshow and most cases especially IE7 dropdown position below the slideshow, because I love the z-index is rather high position let me on it.
Caution:
And because the familiar IE6 hover just to tag <a> then if you still love and still want to support IE6 mending to sea aja csshover.htc Peter Nederlof then use to can walk in IE6 /
Okay place next # nav ul ul-nah this is a drop downnya, therefore we give the position: absolute; to appear just below each # nav a: hover li. Do not forget to get rid of our first, due to drop downnya emerged when we used to hover so initially hidden with display: none;. We set the position to just below the menu with a top: 35px; and left: 0;. Be sure to distance above it there is no empty space 1 pixel too because if there when we mouse over the empty space we have outside of the mouse <li> so dropdown will disappear. So make sure the top is less than or equal to the height <li> thereon.
# Place the next-nav ul ul ul is a drop down to level 2 so yes just like before, but because Dorp down the second-level position to right rather than drop down a level 1, then we enlarge the left but do not have any distance of 1 pixel.
Now the last and most important are:
Program code :
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;}
div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
This is the css code to create drop down and eliminate them. As you can see place-nav div # li: hover ul, div # nav li-place li: hover ul This means that if we menghover <li> it will appear next <ul> display: block and <ul> it (the level to 2) does not appear display: none;, just when we hover <li> level to level two then drop down into the two will appear
Ok, easy right? dizzy? 've tried aja ya, enjoy......!!!
Good luck .......
