Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 9 hours ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 4 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Simple CSS Navigation

AshleyAshley

Navigation is a key feature on any site and for a front end web designer or developer there’s nothing more important than creating the perfect navigation menu. Today I’m going to run through how to create a pure CSS navigation strip using basic HTML and CSS. This will give you a basic understanding of how to put together a CSS menu that works efficiently. This tutorial is aimed at beginners who are learning CSS.

The HTML

The HTML used to generate our menu are simple list items. within a div container.


<div id="cont">

<ul id="nav">
	<li class="firstitem"><a href="#">Home</a></li>
	<li><a href="http://papermashup.com/category/php/">PHP Tutorials</a></li>
	<li><a href="http://papermashup.com/category/tutorials/">Tutorials</a></li>
	<li><a href="http://papermashup.com/category/design/">Design</a></li>
	<li><a href="http://papermashup.com/category/jquery/">jQuery</a></li>
	<li><a href="http://papermashup.com/category/api/">APIs</a></li>
	<li><a href="http://papermashup.com/category/mobile/">Mobile</a></li>
	<li><a href="http://papermashup.com/category/facebook/">Facebook</a></li>
    <li><a href="http://papermashup.com/category/analytics/">Analytics</a></li>
    <li><a href="http://papermashup.com/category/web-tools/">Web Tools</a></li>
    <li><a href="http://papermashup.com/category/frameworks/">Frameworks</a></li>
</ul>

</div>

The CSS

Each list item element is floated left in order to get the menu to display horizontally.


#cont {
	border-bottom: solid 1px #994400;
	background: #ff7200;
	margin: 0 auto 0 auto;
}

#nav {
	list-style: none;
	background: #ff7200;
	height: 37px;
	width: 800px;
	margin:0 auto;
	padding:0px;
	border-left: solid 1px #ff9141;
}

#nav li {
	float: left;
	border-right: solid 1px #ca5600;
	height: 37px;
}

	#nav li.firstitem {
		border-left: solid 1px #ca5600;
	}

#nav li a, #nav li a:link, #nav li a:visited {
	text-decoration: none;
	display: block;
	float: left;
	height: 37px;
	color: #fff;
	line-height: 37px;
	padding: 0 10px 0 10px;
	border-right: solid 1px #ff9141;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	outline: none;
}

#nav li a:hover, #nav li a:focus, #nav li a:active {
	background-color: #c95500;
	color: #fff;
}

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 2
  • lavren
    Posted on

    lavren lavren

    Reply Author

    Hey, thank you so much. this tutorial is very nice. And your top menu bottom is very attractive too ;)…thank you for your site :)


  • Gabriel
    Posted on

    Gabriel Gabriel

    Reply Author

    You can use too,

    #nav li.firstitem:first-child { border-left: solid 1px #ca5600;}

    for a more clean markup

    nice thankyou