Simple CSS Navigation Menu

  • follow us in feedly
Published May 30, 2013 by Brad Knutson
CSS Navigation Menu

Most websites that you come across today have some form of a navigation menu at the top of the page. Often times individual items in this menu may have sub menus. Lately I’ve been looking for innovative menu designs and began digging deeper into some navigation menus that other developers have come up with. I’m finding a pretty alarming trend.

Unfortunately, it seems as though a lot of theme developers are building navigation menus with javascript. jQuery or javascript is used to show and hide sub menus when you hover over a specific item. ESPN is a perfect example of this – if you hover over any of the navigation menu items to see more data for an individual sport, javascript is used to dynamically show and hide the sub menu.

I’m alarmed because I don’t understand why developers are not using CSS to accomplish this effect.

CSS Navigation Menu Example

View Demo

Showing and hiding a sub menu is actually accomplished very easily with CSS. You only need a few lines.

ul li ul {
    opacity: 0;
    /* OR */
    display: none;
}
ul li:hover ul {
    opacity: 1;
    /* OR */
    display: block;
}

That is really the bare bones that you need. Of course, more style will be needed to make the navigation menu look nice – but you get the point.

Here is the code I used to create the example linked above.

HTML


<div class="wrap">
<ul>
<li>Menu Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Menu Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Menu Item 3
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Menu Item 4
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Menu Item 5
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
</div>

CSS

ul {
	list-style: none;
}
.wrap > ul {
	position: relative;
}
.wrap > ul > li {
	border-left: 1px solid rgba(243,243,243,0.3);
	border-right: 1px solid rgba(0,0,0,0.3);
}
ul li {
	padding: 15px;
	background-color: rgb(60,60,65);
	color: rgb(255,255,255);
	float: left;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
ul li:hover {
	background-color: rgb(0,0,0);
}
ul li ul {
	position: absolute;
	top: 51px;
	background-color: rgb(60,63,65);
	opacity: 0;
	padding: 0px;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
ul li ul li {
	clear: both;
}
ul li:hover ul {
	display: block;
	opacity: 1;
}
The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

One thought on “Simple CSS Navigation Menu

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">