Share:
Twitter
Facebook
Delicious

GANDR Web Design

- How we made our navigation bar

Below is one example of how you can take advantage of advanced CSS3 techniques to make a beautiful horizontal navigation bar.

Download full html/css code in a zip file →

Step 2: Add in the basics.

The Code:

nav ul {
	list-style: none;
	width: 100%;
}

nav ul, nav li { float: left; }

nav li { display: inline; }

nav li a { display: inline-block; }

The Result:

Step 3: Style the UL and the LI.

The Code:

nav ul {
	background: #EAECED;
	padding: 5px 0;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

nav li {
	font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 1em;
}

nav li:first-child { margin-left:40px; }

nav li a { color: #565656; }

The Result:

Step 4: Give the anchors some hover & a little room to breath.

The Code:

nav li a {
	color: #565656;
	padding: 9px 5px;
	text-decoration: none;
}
nav a:hover, nav a.here {
	background-color: #1EB4DA;
	color: #EAECED;
}

The Result:

Step 5: Add in the icons.

The Code:

nav li a {
	background-image: url("http://gandrweb.com/images/interface/icons/nav.png");
	background-repeat: no-repeat;
	padding-left: 40px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

nav li:first-child a { background-position: 0 1px; }

nav li:nth-of-type(2) a { background-position: 0 -61px; }

nav li:nth-of-type(3) a { background-position: 0 -120px; }

nav li:nth-of-type(4) a { background-position: 0 -180px; }

nav li:last-child a { background-position: 0 -240px; }

nav li:first-child a:hover,
nav li:first-child a.here { background-position: 0 -29px; }

nav li:nth-of-type(2) a:hover,
nav li:nth-of-type(2) a.here { background-position: 0 -91px; }

nav li:nth-of-type(3) a:hover,
nav li:nth-of-type(3) a.here { background-position: 0 -150px; }

nav li:nth-of-type(4) a:hover,
nav li:nth-of-type(4) a.here { background-position: 0 -210px; }

nav li:last-child a:hover,
nav li:last-child a.here { background-position: 0 -270px; }

The Result:

Download full html/css code in a zip file →

All of the above.

nav ul,
nav li a {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

nav ul {
	background: #EAECED;
	list-style: none;
	padding: 5px 0;
}

nav li {
	font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 1em;
	margin-left: 35px;
	display: inline-block;
}

nav li:first-child { margin-left:40px; }

nav a {
	background-image: url("http://gandrweb.com/images/interface/icons/nav.png");
	background-repeat: no-repeat;
	color: #565656;
	display: block;
	padding: 9px 5px 9px 40px;
	text-decoration: none;
}

nav a:hover, nav a.here {
	background-color: #1EB4DA;
	color: #EAECED;
	text-decoration: none;
}

nav li:first-child a { background-position: 0 1px; }

nav li:nth-of-type(2) a { background-position: 0 -61px; }

nav li:nth-of-type(3) a { background-position: 0 -120px; }

nav li:nth-of-type(4) a { background-position: 0 -180px; }

nav li:last-child a { background-position: 0 -240px; }

nav li:first-child a:hover,
nav li:first-child a.here { background-position: 0 -29px; }

nav li:nth-of-type(2) a:hover,
nav li:nth-of-type(2) a.here { background-position: 0 -91px; }

nav li:nth-of-type(3) a:hover,
nav li:nth-of-type(3) a.here { background-position: 0 -150px; }

nav li:nth-of-type(4) a:hover,
nav li:nth-of-type(4) a.here { background-position: 0 -210px; }

nav li:last-child a:hover,
nav li:last-child a.here { background-position: 0 -270px; }

Download full html/css code in a zip file →