CSS navigation bar

**r3h0ld3r** · 08-07-2009, 12:39 PM

I'm working on a new project in which I want to make a navigation bar with CSS. So far it's going very well and I'd say I'm ok with CSS but getting a lot better. I'm able to understand how to manipulate the menu items for the most part, but I'm struggling with making it the correct size as a whole. I'd like it to be 815 px across the web page but right now it's a bit longer than that.

Here's my CSS:

Code:

#container
{
	height: 100%;
	width: 815px;
	position: relative;
	text-align: left;
	margin-top: -7px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

#header
{
	border: 0px;
	height: 135px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

#navbar
{
	background-color: #66B3FF;
}

#nav
{
	width: 815px;
	border: 0px;
	margin-bottom: -1px;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	
}

#nav a /*LINKS IN ALL MENUES*/
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #000000;
	font-size: 1em;
	font-weight: bold;
}

#nav li
{
	background-color: #66B3FF;
}

#nav li li a /*SUBMENU BOXES*/
{
	background-color: #66B3FF;
	display: block;
	font-weight: normal;
	font-size: .9em;
	color: #000000;
	padding: 0.2em 10px;
}

#nav li li a:hover /*SUBMENU BOX ITEMS*/
{
	background-color: #ffffff;
	padding: .2em 5px;
	border: 5px solid #cc66cc;
	border-width: 0 5px;
	color: #99cc33;
}

ul /*SUBMENU*/
{
	padding: 0;
	margin: 0;
	list-style: none;
}

li /*MENU*/
{
	float: left;
	position: relative;
	width: 135.4px;
	text-align: center;
}

li ul /*SUBMENUS*/
{
	border-left: solid 1px;
	border-right: solid 1px;
	border-bottom: solid 1px;
	display: none;
	position: absolute; 
	top: 1em;
	left: 0;
	text-align: center;
}

li > ul /*SUBMENUS*/
{
	top: auto;
	left: auto;
}

li:hover ul, li.over ul /*HOVER OVER MENU*/
{
	display: block;
}

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

#photos
{
	height: 550px;
	width: 815px;
	padding-bottom: 0px;
	padding-top: 0px;
	margin-top: 20px;
}
#footer
{
	background-color: #ffffff;
	margin: 0px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}


#footer p 
{
	margin: 0;
	padding: 2px 0;
	font-size:0.7em;
	font-weight:bold;
	color:#000000;
}

#footer a
{
	text-decoration:none;
	color:#000000;
}

.h1
{
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
	
}

a
{
	text-decoration:none
}

body {
	background-image: url(images/background_image_2.png);
	background-repeat: repeat-y;
	background-position: center;

}

.clearfloat
{
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

my html:

Code:

<body>
	<div id="container">
    	<div id="header">
        	<a href=http://www.blahblahblah.com><img src="images/new_header.png" border="0" /></a>
        </div><!--HEADER-->
        <div id="navbar">
            <ul id="nav">
                <li>
                    <div><a href="">Home</a></div>
                </li>
                <li>
                    <div><a href="">Products</a></div>
                    <ul>
                        <li><a href="">Consumer</a></li>
                        <li><a href="">Professional</a></li>
                    </ul>
                </li>
                <li>
                    <div><a href="">Services</a></div>
                        <ul>
                            <li><a href="">Private Labeling</a></li>
                            <li><a href="">Custom Packaging</a></li>
                        </ul>
                </li>
                <li>
                    <div><a href="">Environment</a></div>
                </li>
                <li>
                    <div><a href="">MSDS</a></div>
                </li>
                <li>
                    <div><a href="">About Us</a></div>
                        <ul>
                            <li><a href="">History</a></li>
                            <li><a href="">Location</a></li>
                            <li><a href="">FAQ</a></li>
                            <li><a href="">News</a></li>
                            <li><a href="">Quality</a></li>
                        </ul>
                </li>
            </ul>
        </div>
        <div id="photos">FLASH</div><!--PHOTOS-->
	<div id="footer">        </div><!--FOOTER-->
	</div><!--CONTAINER-->
</body>
</html>

Thanks!

**r3h0ld3r** · 08-10-2009, 08:18 AM

I'm still looking for a solution on this. I've gotten the bar approximately the right size...still have to play around with it a bit, but I'm still trying to figure out how to do the border on the submenus.

**Beakers** · 08-12-2009, 05:39 AM

Why not just create a new class?

<div><a href="">About Us</a></div>
<ul>
<li><a href="" class="submenu">History</a></li>
<li><a href="" class="submenu">Location</a></li>
<li><a href="" class="submenu">FAQ</a></li>
<li><a href="" class="submenu">News</a></li>
<li><a href="" class="submenu">Quality</a></li>
</ul>

.submenu{
border stuffs here;
}

**Beakers** · 08-12-2009, 05:40 AM

Infact, can you link to the page so I can just grab the full source and tinker?

**r3h0ld3r** · 08-12-2009, 07:37 AM

I would very much like to but the only server I have access to on the network is local. I'm going to bring the files home and upload it on an online server later today.

Thanks for the help. I'll keep you posted.

**r3h0ld3r** · 08-12-2009, 11:18 PM

Ok I got it online...

here's a link to the page I'm working on:

http://www.chrismccalldesign.com/mock_up_index.html

Let me know what you think could solve this please!

**rokdave** · 08-17-2009, 02:50 AM

well try to use css now..

_________________
Indianapolis seo

**sticks464** · 08-24-2009, 02:19 AM

Try this for the menu. The javascript is for ie6 only

Code:

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--[if lt IE 7]>
<script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" over";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" over\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->

<style type="text/css">
#menu {
    width:815px;
    background:#66B3FF;
}

ul#nav, ul#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

ul#nav  li {
	position: relative;
	float: left;
	width:135px;
}
	
#nav li ul {
	position: absolute;
	margin-left: -999em; /* hide menu from view */
	top: auto;
	left:0;
}

/* Styles for Menu Items */
ul#nav  li a {
	display: block;
	text-decoration: none;
	color: #000;
	background: #66B3FF; /* IE6 Bug */
	padding: 5px;
	min-height:0;
    text-align:center;
	}
/* commented backslash mac hiding hack \*/ 
* html ul#nav  li a {height:1%;	position:relative;}
/* end hack */ 

#nav li:hover a,#nav  li.over a,
#nav li:hover li a:hover,#nav li.over li a:hover {
   color: #fff;}

/* set dropdown to default */
#nav li:hover li a,#nav li.over li a {
   color: #000;
   background-color: #66B3FF;
}

/* Sub Menu Styles */
#nav li ul li a {
	padding: 3px 5px;
    text-align:left;
    border-top: 1px solid #ccc;
}
#nav li:hover ul,#nav li.over ul {margin-left:0;} /* show menu*/

</style>
</head>
<body>
<div id="menu">
<ul id="nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Products</a> 
        <ul>
            <li><a href="#">Consumer</a></li>
            <li><a href="#">Professional</a></li>
        </ul>
    </li>
    <li><a href="">Services</a>
        <ul>
            <li><a href="">Private Labeling</a></li>
            <li><a href="">Custom Packaging</a></li>
        </ul>
    </li>
    <li><a href="#">Environment</a></li> 
    <li><a href="#">MSDS</a></li> 
    <li><a href="#">About Us</a> 
        <ul>
            <li><a href="">History</a></li>
            <li><a href="">Location</a></li>
            <li><a href="">FAQ</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Quality</a></li>
        </ul>
    </li> 
</ul> 
</div>
</body>
</html>

Thread: CSS navigation bar

Thread Tools

Display

CSS navigation bar

Posting Permissions