Create a speaking block navigation menu using pure css

Many people have been emailing me or asking me how I have created the Webdevtuts navigation menu. Well today I decided I was going to write a tutorial to show you guys how I manage to create a “speaking” block navigation menu using just css. A navigation menu’s like Webdevtuts are using done using css sprites but we’re going to accomplish this a new way today. Hopefully you can use this technique for your next project. enjoy

Before we begin this tutorial it would be best if you create a New folder and inside of the new folder create a index.html file and a style.css file.

The Markup Lanuage/HTML

Open up your text editor

Note:Before you write HTML it is always good to have the basic HTML tags already written. Place the basic HTML tags below into your index.html file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Webdevtuts(Speaking Navigation Menu)</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>

</body>

</html>

Now we’re going to start writing the markup for our navigation menu. Let’s create our nav menu outline. I’ll explain each div later in this tutorial when we start writing the css. Copy the code below into your index.html file inside of the body tags.

<div id="menu">
	<div id="menu-wrap">
		<ul id="navigation-main">
		</ul><!--end navigation-main-->
	</div><!--end menu-wrap-->
</div><!--end menu-->

Now were going to add our menu links. Ok you might get confuse with the markup below but do not worry I will explain it. Ok so we first had just our nav outline then we added are lists(li) which holds are navigation links. Inside of the list items are span tags which hold are so call tags for that specific link. For example Home is a list and inside of the home list we have the href tags which is use to link an item. Outside of the href tag are span tags with an assign class that we will later edit using css. Inside of the span tags are little description tags that I’ve added.
,

<div id="menu">
	<div id="menu-wrap">
		<ul id="navigation-main">
			<li><a href="">Home</a><span class="nav-sec">The Beginning</span></li>
			<li><a href="">Articles</a><span class="nav-sec">Tips, Tricks, Advice</span></li>
			<li><a href="">Tutorials</a><span class="nav-sec">Photoshop Techniques</span></li>
			<li><a href="">Resources</a><span class="nav-sec">Fonts, freebies, wallpapers</span></li>
			<li><a href="">Anything</a><span class="nav-sec">Description</span>
			<li><a href="">Anything</a><span class="nav-sec">Description</span>
		</ul><!--end navigation-menu-->
	</div><!--end menu-wrap-->
</div><!--end menu-->

The Css

Ok so now we’re going to style our navigation menu using css.

Note: Before css is inserted, insert Eric Meyers css reset. Work good with this nav tutorial.

#menu{
	background:#000;
	height:75px;
}

#menu-wrap {
	margin:0 auto;
	width:960px;
}

#navigation-main {
	padding:15px;
	color:#fff;
	font-size:24px;
	font-weight:bold;
	margin-bottom:10px;
	float:left;
}

#navigation-main li {
	float:left;
	margin-right:20px;
}

#navigation-main li a {
	display:block;
	color:#fff;
}

#navigation-main li ul  {
	display:none;
	z-index:80;
}

#top-nav-info {
	background:#dddddd;
	float:left;
	width:1000px;
}

#top-nav-sec li a {
	padding:15px;
	display:inline;
	height:42px;
	color:#a19f9f;
}

#top-nav-sec li a:hover {
	color:#1F1E1E;
}

.nav-sec {
	display:block;
	font-size:12px;
	font-family: lucida sans unicode;
	font-weight:normal;
	text-align:center;
}

You should now have a speaking block navigation menu using pure css. I did not explain it much because I know many people do not want to read a very long sentence and the best way to earn is to experiment with things. Mess around with the code and you will be fine.

Razvan Sava the author

Razvan is the founder of Webdevtuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts
  1. Aled says:

    Hi Marcell, your CSS contains the following two id selectors:

    #top-nav-info
    #top-nav-sec

    …But they are not present in the HTML. I don’t understand.

Leave a Reply