...

View Full Version : Best method to create a text-based, horizontal nav bar using CSS?



duckinator
09-01-2010, 03:58 PM
I'm trying to create a text-based, horizontal navigation bar with horizontal
submenus and background images-based on a tutorial/stylesheet I found
online. I cut and pasted the code from this online tutorial:

http://veerle-v2.duoh.com/blog/comments/2_level_horizontal_navigation_in_css
_with_images/

Here's a link to the sample menu inthat tutorial:

http://www.duoh.com/csstutorials/2levelmenu/styles_navigation.css

Here's the link directly to the stylesheet from the tutorial:

http://www.duoh.com/csstutorials/2levelmenu/styles_navigation.css

--->Unfortunately, something is broken in my code. The top-level of the
menu shows up, but the first link (home) is cut in half and repeated with
alternating hover-images on half of the word of the first link. None of the
other links are hovering, nor are sub-menus showing up. BUMMER.

It supposed to look like this:
-->Top level AND sub-menus have same look/color-coding: red background;
hover has lime-green background
-->3 sub-menus should show up horizontally below the top level nav:
---->"christmas sweater FUN" submenu: is 800px wide (length of entire nav)
---->"shop" submenu is 293px wide. The right side of it should align with
the right side of the parent link "shop."
---->"about" submenu is 186px wide and should be flush with the right side
of the nav

I'm hoping there is a simple fix to this that is easy to see for someone
more experienced than me! This is my last major "technical hurdle" in my
site development---any help you could offer would be greatly appreciated!
Thanks so much in advance!

HERE IS THE HTML CODE ON MY PAGE:


<div id="navbar">
<ul id="navigation">

<li><a href="#">home</a></li>

<li><a href="#">sweater-izer APP</a></li>

<li><a href="#">christmas sweater FUN</a></li>

<li><a href="#">blog</a></li>

<li><a href="#">shop</a></li>

<li><a href="#">about</a></li>

</ul>
</div>

HERE IS MY ATTEMPT AT THE STYLESHEET:
Here is the code that I created based on the stylesheet in the example
above:

body {
background-color: #ffffff;
behavior:url("csshover.htc");
}

ul#navigation {
list-style-type: none;
padding: 0;
margin: 0;
border: 0;
top: 0px;
left: 0px;
width: 800px;
height: 43px;
background: #ffffff url(navigation_over.gif) no-repeat;
}

a, a:link, a:visited {
text-decoration: none;x
}

p, p a {
color: #000000;
font: 12px 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial,
sans-serif;
}

/*<group=level 1>*/

ul#navigation li {
padding: 0;
margin: 0;
display: block;
float: left;
text-indent: -9999px;
}

ul#navigation li a {
border: 0;
display: block;
height: 43px;
background: url(navigation.gif) no-repeat;
}

ul#navigation li a:hover {
border: 0;
display: block;
background-image: url(navigation_over.gif);
}

/*</group>*/

/*<group=level 1 ids>*/

li#home a {
width: 87px;
}

li#sweaterizerAPP a {
width: 194px;
}

li#sweaterizerAPP a:link,
li#sweaterizerAPP a:visited,
li#sweaterizerAPP a:hover {
background-position: -87px 0px;
}

li#christmassweaterfun a {
width: 260px;
}

li#christmassweaterfun a:link,
li#christmassweaterfun a:visited,
li#christmassweaterfun a:hover {
background-position: -281px 0px;
}


li#blog a {
width: 80px;
}

li#blog a:link,
li#blog a:visited,
li#blog a:hover {
background-position: -541px 0px;
}

li#shop a {
width: 79px;
}

li#shop a:link,
li#shop a:visited,
li#shop a:hover {
background-position: -621px 0px;
}

li#about a {
width: 100px;
}

li#about a:link,
li#about a:visited,
li#about a:hover {
background-position: -700px 0px;
}


/*</group>*/

/*<group=level 2>*/


#navigation li ul {
display: block;
visibility: hidden;
position: absolute;
left: 0px;
width: 800px;
margin: 0;
}

#navigation li:hover ul {
visibility: visible;
z-index: 100;
}

#navigation li#sub_fun ul {
background: none;
height: 43px;
margin-left: 0px;
}

#navigation li#sub_shop ul {
background: none;
height: 43px;
margin-left: 409px;
}

#navigation li#sub_about ul {
background: none;
height: 43px;
margin-left: 614px;
}


* html #navigation li#sub_fun ul {
margin-left: 0px;
}

* html #navigation li#sub_shop ul {
margin-left: 409px;
}


* html #navigation li#sub_about ul {
margin-left: 614px;
}




/*</group>*/

/*<group=level 2 ids>*/

ul#navigation li#fun ul li#generator a:link,
ul#navigation li#fun ul li#generator a:visited {
width: 115px;
height: 43px;
background: url(navigation_sub_fun.gif) no-repeat 0px 0px;
}

ul#navigation li#fun ul li#generator a:hover {
width: 115px;
height: 43px;
background: url(navigation_sub_fun.gif) no-repeat 0px -43px;
}

ul#navigation li#fun ul li#timeline a:link,
ul#navigation li#fun ul li#timeline a:visited {
width: 92px;
height: 43px;
background: url(navigation_sub_fun.gif) no-repeat -207px 0px;
}

ul#navigation li#fun ul li#timeline a:hover {
width: 92px;
height: 43px;
background: url(navigation_sub_fun.gif) no-repeat -207px -43px;
}

ul#navigation li#fun ul li#advent calendar a:link,
ul#navigation li#fun ul li#advent calendar a:visited {
width: 172px;
height: 43px;
background: url(navigation_sub_fun.gif) no-repeat -379px 0px;
}

ul#navigation li#fun ul li#advent calendar a:hover {
width: 172px;
height: 43px;
background: url(navigation_sub_fun.gif) no-repeat -379px -43px;
}

ul#navigation li#fun ul li#sweater dance a:link,
ul#navigation li#fun ul li#sweater dance a:visited {
width: 160px;
height: 43px;
background: url(navigation_sub_fun.gif) no-repeat -539px 0px;
}

ul#navigation li#fun ul li#sweater dance a:hover {
width: 160px;
height: 43px;
background: url(navigation_sub_fun.gif) no-repeat -539px -43px;
}

ul#navigation li#fun ul li#sweater-ometer a:link,
ul#navigation li#fun ul li#sweater-ometer a:visited {
width: 167px;
height: 43px;
background: url(navigation_sub_fun.gif) no-repeat -706px 0px;
}

ul#navigation li#fun ul li#sweater-ometer a:hover {
width: 167px;
height: 43px;
background: url(navigation_sub_fun.gif) no-repeat -706px -43px;
}

ul#navigation li#fun ul li#more... a:link,
ul#navigation li#fun ul li#more... a:visited {
width: 94px;
height: 43px;
background: url(navigation_sub_fun.gif) no-repeat -800px 0px;
}

ul#navigation li#fun ul li#more... a:hover {
width: 94px;
height: 43px;
background: url(navigation_sub_fun.gif) no-repeat -800px -43px;
}


ul#navigation li#shop ul li#sweaters a:link,
ul#navigation li#shop ul li#sweaters a:visited {
width: 106px;
height: 43px;
background: url(navigation_sub_shop.gif) no-repeat -506px 0px;
}

ul#navigation li#shop ul li#sweaters a:hover {
width: 106px;
height: 43px;
background: url(navigation_sub_shop.gif) no-repeat -506px -43px;
}

ul#navigation li#shop ul li#custom a:link,
ul#navigation li#shop ul li#custom a:visited {
width: 98px;
height: 43px;
background: url(navigation_sub_shop.gif) no-repeat -612px 0px;
}

ul#navigation li#shop ul li#custom a:hover {
width: 98px;
height: 43px;
background: url(navigation_sub_shop.gif) no-repeat -612px -43px;
}

ul#navigation li#shop ul li#more... a:link,
ul#navigation li#shop ul li#more... a:visited {
width: 89px;
height: 43px;
background: url(navigation_sub_shop.gif) no-repeat -710px 0px;
}

ul#navigation li#shop ul li#more... a:hover {
width: 89px;
height: 43px;
background: url(navigation_sub_shop.gif) no-repeat -710px -43px;
}


ul#navigation li#shop ul li#company a:link,
ul#navigation li#shop ul li#company a:visited {
width: 100px;
height: 43px;
background: url(navigation_sub_about) no-repeat -607px 0px;
}

ul#navigation li#shop ul li#company a:hover {
width: 100px;
height: 43px;
background: url(navigation_sub_about.gif) no-repeat -607px -43px;
}

ul#navigation li#shop ul li#Trisha a:link,
ul#navigation li#shop ul li#mTrisha a:visited {
width: 93px;
height: 43px;
background: url(navigation_sub_about.gif) no-repeat -700px 0px;
}

ul#navigation li#shop ul li#Trisha a:hover {
width: 93px;
height: 43px;
background: url(navigation_sub_about.gif) no-repeat -700px -43px;
}

/*</group>*/

Major Payne
09-02-2010, 07:41 AM
Might find a better one or the answer...

CSS Library Horizontal CSS Menus: http://www.dynamicdrive.com/style/csslibrary/category/C1/
http://www.dynamicdrive.com/dynamicindex1/
http://www.cssplay.co.uk/menus/
How to Style an Unordered List with CSS: http://www.webreference.com/programming/css_style2/index.html

How To:

http://www.w3.org/TR/WCAG10-HTML-TECHS/#links
http://www.creativepro.com/article/dreamweaver-how-create-you-are-here-navigation-links
http://efuse.com/Design/navigation.html
Simple JQuery Accordion menu: http://www.i-marco.nl/weblog/jquery-accordion-menu/

Drop-Down Menus, Horizontal Style: http://www.alistapart.com/articles/horizdropdowns/
The Right Way to Make a Dropdown Menu: http://www.sitepoint.com/blogs/2009/04/01/the-right-way-to-make-a-dropdown-menu/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum