SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Navbar CSS Help please

    I'm trying to create a Navbar that looks something like this:

    - Main navbar (horizontal)
    - Subnav (horizontal)

    You rollover one of the items on the main navbar, and instead of a dropdown menu, you see the dropdown items displayed horizontally on a Subnav bar. I don't care if it has tabs or no tabs, just need this functionality.

    Does anyone know where I can find the CSS/HTML code for this type of navbar? My main concern is that the CSS is solid - needs to work on IE7, IE6 and Firefox. Thanks so much for your help.
    Attached Images Attached Images

  2. #2
    SitePoint Member houstonmarketing's Avatar
    Join Date
    Mar 2009
    Location
    Houston, TX
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you hard-coding the html and css, or are you using any editing programs?
    Searching for marketing answers?
    Nate Stockard (Twitter) offers free marketing tips,
    marketing tools, marketing strategies,
    and more at The Market Seedling.

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi garrinh, welcome to SitePoint!

    Quote Originally Posted by garrinh
    I'm trying to create a Navbar that looks something like this:

    - Main navbar (horizontal)
    - Subnav (horizontal)
    ...
    Have not seen your attached image yet.

    Here is a crossbrowser working demo you can try out for a start:
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Horizontal Dropdown</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    #horizontalmenu,
    #horizontalmenu ul{
    	position: relative; /* set mainlist as a reference for the sublist *//* the sublist gets AP below */
    	width: 600px;
    	margin: 0;
    	padding: 0;
    	background: #fff; /* IE needs bg-color to hover the sublist gap */
    }
    #horizontalmenu li{
    	float: left; /* line up the items within the list width */
    	background: #efe;
    	list-style-type: none;
    }
    #horizontalmenu a{
    	float: left;
    	position: relative; /* make IE6 show the negative margin edges */
    	margin: 0 -1px -1px 0;
    	border: 1px solid #666;
    	padding-top: 4px; /* vertical center the text */
    	width: 119px;
    	height: 20px; /* give space for larger user font-size */
    	background: #efe;
    	color: #666;
    	line-height: 1; /* for lesser move when user font changes, (default is ~ 1.2 times the font-size) */
    	text-align: center;
    	text-decoration: none;
    }
    #horizontalmenu a:hover{
    	background: #cdc;
    	color: #333;
    }
    #horizontalmenu ul{
    	position: absolute; /* position the submenu according to ancestor's position (here the main ul) */
    	top: 26px; /* the referenced main ul height */
    	left: 0;
    	margin-left: -9999px; /* hide the submenu */
    	padding-top: 10px; /* optional gap */
    }
    #horizontalmenu li:hover ul,
    #horizontalmenu li.sfhover ul{ /* IE6 fake hover */
    	margin-left: 0; /* show the submenu */
    }
    </style>
    <!--[if lte IE 6]>
    <script type="text/javascript">
    sfHover = function() {
    	var sfEls = document.getElementById("horizontalmenu").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <![endif]-->
    </head><body>
     
    <ul id="horizontalmenu">
    	<li><a href="#">Link 1</a></li>
    	<li><a href="#">Link 2</a>
    		<ul>
    			<li><a href="#">Link 3</a></li>
    			<li><a href="#">Link 4</a></li>
    			<li><a href="#">Link 5</a></li>
    			<li><a href="#">Link 6</a></li>
    			<li><a href="#">Link 7</a></li>
    			<li><a href="#">Link 8</a></li>
    			<li><a href="#">Link 9</a></li>
    		</ul>
    	</li>
    	<li><a href="#">Link 10</a></li>
    	<li><a href="#">Link 11</a></li>
    	<li><a href="#">Link 12</a></li>
    </ul>
     
    </body></html>
    Happy ADD/ADHD with Asperger's

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centered Inline Horizontal Dropdown

    Quote Originally Posted by garrinh
    ...
    Does anyone know where I can find the CSS/HTML code for this type of navbar?
    ...
    Right here on SitePoint ofcourse.

    I had an unexpected short break so I coded an inline navbar with an inline horizontal dropdown, all centered. Explained in the comments for you to tweak:
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Centered Inline Horizontal Dropdown</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    #nav{
    	position: relative; /* sets the mainlist as a reference for the sublist */
    	margin: 0; /* reset the default left margin in IE */
    	padding: 0; /* reset the default left padding in good browsers */
    	width: 100%;
    	height: 2.4em;
    	font: 900 68%/2.4 verdana; /* line-height same as the ul height to center the text, (default is ~ 1.2 times the font-size) */
    	text-align: center; /* center all inlines */
    	background: #010066;
    }
    #nav ul{
    	position: absolute; /* position the subnav according to nearest positioned ancestor (here the main ul) */
    	top: 1.7em; /* IE to not drop hover, ul starts close below the text */
    	left: 0;
    	margin-left: -9999px; /* hide the subnav */
    	border-top: .7em solid #010066; /* IE to not drop hover, the intended gap between text and sublist is covered with a border */
    	padding: 0; /* reset the default left padding in good browsers */
    	width: 100%;
    	height: 2.4em;
    	background: #91ad47;
    }
    #nav li:hover ul,
    #nav li.sfhover ul{ /* IE6 hover faked by the class sfhover */
    	margin: 0; /* show the subnav */
    }
    #nav li{
    	display: inline; /* line up the items within the list width  */
    	padding: 0 2em; /* only side padding/margin applies on inlines */
    }
    #nav a{
    	color: #9bcdff;
    	text-decoration: none;
    	text-transform: uppercase;
    }
    #nav li:hover a, /* all links on hover */
    #nav li.sfhover a{ /* IE6 fake hover */
    	color: #0133ff;
    }
    #nav ul a:hover{ /* sublist links on hover, same specificity overrides the before rule */
    	color: #04016a;
    }
    </style>
    <!--[if lte IE 6]>
    <script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <![endif]-->
    </head><body>
     
    <ul id="nav">
    	<li><a href="#">panels &amp; parties</a></li>
    	<li><a href="#">venues</a>
    		<ul>
    			<li><a href="#">closing night</a></li>
    			<li><a href="#">tickets</a></li>
    			<li><a href="#">passes</a></li>
    		</ul>
    	</li>
    	<li><a href="#">media</a></li>
    	<li><a href="#">faq</a></li>
    	<li><a href="#">sponsors</a></li>
    </ul>
     
    </body></html>
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much guys. I'm using Dreamweaver CS3 for editing -- I do know about their Spry feature, but would rather hard code the CSS than use that, which I've found cumbersome in the past.

  6. #6
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Erik - you rock! I'm going to try what you suggested when I get into work this morning. Thanks so much.


Bookmarks

Posting Permissions

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