dcsimg
A Flash Developer Resource Site

Results 1 to 8 of 8

Thread: CSS navigation bar

  1. #1
    Member
    Join Date
    Jul 2009
    Posts
    72

    CSS navigation bar

    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!
    Last edited by r3h0ld3r; 08-10-2009 at 02:51 PM. Reason: updated css and posted html

  2. #2
    Member
    Join Date
    Jul 2009
    Posts
    72
    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.

  3. #3
    Senior Member
    Join Date
    Aug 2009
    Location
    Scotland & England
    Posts
    117
    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;
    }

  4. #4
    Senior Member
    Join Date
    Aug 2009
    Location
    Scotland & England
    Posts
    117
    Infact, can you link to the page so I can just grab the full source and tinker?

  5. #5
    Member
    Join Date
    Jul 2009
    Posts
    72
    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.

  6. #6
    Member
    Join Date
    Jul 2009
    Posts
    72
    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!

  7. #7
    Junior Member
    Join Date
    Aug 2009
    Posts
    1
    well try to use css now..


    _________________
    Indianapolis seo

  8. #8
    Senior Member
    Join Date
    May 2007
    Posts
    266
    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>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center