...

View Full Version : Help adding submenu to pure css navigation



mindyf
02-16-2009, 07:40 PM
I am hoping someone can help me edit my css and html to add another submenu to two drop down menus -- solutions and plans. I want the same styling as I already have for the drop down menus for the added drop down menus.

My CSS and HTML is as follows:

#navigation{
width:auto;
text-align: center;
height:25px;
padding: 15px;
background-image: url(../images/navbg.jpg);
border-top-width: thin;
border-bottom-width: thin;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #dddddd;
border-bottom-color: #999999;
}

#navigation ul
{margin:0px; padding:0px;}


#navigation ul li
{display:inline; height:30px; float:left; list-style:none; margin-right:5px; margin-left:10px;}

#navigation li a
{
color:#76b0c6;
font-weight: bold;
font-family: "Bradley Hand ITC", Scriptina, sans-serif;
text-decoration:none;
font-size: medium;
}

#navigation li a:hover
{
color:#006699;
text-decoration:none;
}

#navigation li a:visited
{
color:#4a3931;
text-decoration:none;
}
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
background-image: url(../images/ddbg.jpg);
}

#navigation li:hover ul
{
display:block;
width:160px;
}

#navigation li li
{
list-style:none;
display:list-item;
}
navigation ul li
{
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:5px;

position:relative;
}

#navigation li ul
{
margin:0px;
padding:0px;
display:none;
}

#navigation li:hover ul
{
display:block;
width:160px;
}

#navigation li li
{
list-style:none;
display:list-item;
}
#navigation ul li
{
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;

position:relative;
}
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:30px;
background-image: url(../images/ddbg.jpg);
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-bottom-color: #CCCCCC;
border-left-color: #CCCCCC;
border-top-style: dashed;
}
#navigation li li a
{color:#76b0c6; text-decoration:none;}

#navigation li li a:hover
{color:#006699; text-decoration:none;}
#header {
background-image: url(../images/headerbg.jpg);
padding-top: 0;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;}


<div id="navigation">
<ul>
<li>
<a href="../index.htm">Home</a>

</li>


<li>
<a href="../coaching.htm">item</a>
<ul>
<li><a href="#">sub menu item 1</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 3</a></li>
<li><a href="#">sub menu item 4</a></li>
</ul>

<li>
<a href="../solutions.htm">Solutions</a>
<ul>
<li><a href="../solutions.htm?tab=0#TabbedPanels1?">Planning</a></li>
<li><a href="../solutions.htm?tab=1#TabbedPanels1?"> Development</a></li>
<li><a href="../solutions.htm?tab=2#TabbedPanels1">Design</a></li>
<li><a href="../solutions.htm?tab=3#TabbedPanels1">Marketing</a></li>
<li><a href="..solutions.htm?tab=4#TabbedPanels1">Analysis</a></li>
</ul>
</li>

<li>
<a href="../strategic_plans.htm"> Plans</a>
<ul>
<li><a href="../strategic_plans.htm?tab=1#TabbedPanels2?">Plans</a></li>
<li><a href="../strategic_plans.htm?tab=2#TabbedPanels2?">Plans</a></li>
<li><a href="../strategic_plans.htm?tab=3#TabbedPanels2?">Plans</a></li>

</ul>
</li>

<li>
<a href="../customer_service.htm">Customer Service</a>
<ul>
<li><a href="../customer_service.htm?tab=0#TabbedPanels1?">Business Hours</a></li>
<li><a href="../customer_service.htm?tab=1#TabbedPanels1?">Business Address</a></li>
<li><a href="../customer_service.htm?tab=2#TabbedPanels1?">Business Phone</a></li>
<li><a href="../customer_service.htm?tab=3#TabbedPanels1?">Email</a></li>
</ul>
<li>
<a href="../community.htm">Community</a>
<ul>
<li><a href="../community.htm?tab=0#TabbedPanels1?">item</a></li>
<li><a href="../community.htm?tab=1#TabbedPanels1?">item</a></li>
<li><a href="../community.htm?tab=2#TabbedPanels1?">item</a></li>
<li><a href="../community.htm?tab=3#TabbedPanels1?">item</a></li>

</ul>
</li>


</ul>
</li>


</li>


</ul>
</div>
</div>

<div align="center">
<!-- end #header -->
</div>
</div>


Thanks in advance!

PitbullMean
02-16-2009, 10:35 PM
I'm not sure on what u mean cause I checked ur nav it looks the same to, what exactly are you after?

mindyf
02-16-2009, 10:58 PM
What i am wanting to do is add another sub category drop down level to what I already have.

For example:
I already have plans and solutions so I want to add another level to
plans> business plans> small business plan home business plan etc

solutions>marketing> direct marketing

So when the visitor moves their mouse over plans and it drops down to business plans I want another category to come out on the side and drop down with another list with small business plan, home business plan etc.

Majoracle
02-16-2009, 11:00 PM
If this what you're after?

http://majoracle.webs.com/dropdownmenu/dropdown-multi-level.htm

mindyf
02-16-2009, 11:06 PM
Yes this is similar to what I am after BUT this one using javascript and i want pure css. Like this menu I do want to add the 3rd level sub categories.

Majoracle
02-16-2009, 11:09 PM
This is one I made. You can actually get rid of the JavaScript if you please, and it'll work everywhere except Internet Explorer 6 and under. It's necessary, even on yours, because IE6 and under have no support for :hover on li (or any tag except hyperlinks). Just get rid of:


<script type="text/javascript">
<!--//--><![CDATA[//><!--

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>


and the CSS bits that are used for it (parts in red):


/* Increase "#nav li:hover ul ul ul+" and "#nav li.sfhover ul ul ul+" for each additional level */
#nav li:hover ul ul,
#nav li.sfhover ul ul {
left: -999em;
}
/* Increase "#nav li li+ li:hover ul" and "#nav li li+ li.sfhover ul" for each additional level */
#nav li:hover ul,
#nav li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul {
left: 0;
z-index: 100; /* Important: ensures drop down menus appear over other content on the Z-axis */
background-color: #FFF; /* Important: background (color at least) required here for IE7 bug */
border: solid 1px #CCC;
}


And you can add as many levels as you want with this.

PitbullMean
02-16-2009, 11:12 PM
Nice, But I dont know why you are so CSS bound cause using Javascript you would be compatible with browsers across the board.

Majoracle
02-16-2009, 11:24 PM
Here's a 3-level one with no JavaScript: http://majoracle.webs.com/dropdownmenu/dropdown-multi-level-nojs.htm

It'll work in all browsers except IE6 and under. I do still recommend the JavaScript though, because it's only applied in IE, and for quite a few IE users, a necessity.

PitbullMean
02-16-2009, 11:26 PM
I convinced Mindy to use Javascript Im going to be helping her with this. That way she has a cross the board compatibility.

snowieken
02-16-2009, 11:29 PM
Nice, But I dont know why you are so CSS bound cause using Javascript you would be compatible with browsers across the board.If the CSS is done right, there are not many cross-browser compatibility problems which are impossible to solve. Granted, it requires some tweaking every now and then, but for some of us that is the fun part! :p

Some users might have Javascript disabled, and in general, they are also a bigger strain on CPU than CSS is. On top of that, pure CSS layout is considered an art. :p

PitbullMean
02-16-2009, 11:31 PM
Rarely do you see people have Javascript disabled. cause Alot of sites use it, from Youtube, to Hotmail.

mindyf
02-16-2009, 11:43 PM
Thanks for all of your responses. Pure css sounds to be too difficult for me. So, I am game for the javascript nav menu to save myself some headaches. I look forward to the help.

snowieken
02-16-2009, 11:48 PM
I guess I am one of those old-fashioned developers who still believe Javascript could definately be used to enhance browsing experience, but it should never be a necessity in order to browse a website.

Yes, Hotmail and Youtube use it. I am inclined to say "So what?". I turned JS off in my browser and did some testing. Hotmail gives a message that Javascript needs to be turned on, which is not a perfect solution but at least they are giving a message. Youtube says absolutely nothing, the login button just doesn't do anything when JS is turned off. For such a succesful website, that is at least disappointing.

But hey, as I said, guess I'm just old-fashioned. :)

PitbullMean
02-16-2009, 11:52 PM
Mindy I pmed you my MSN ID, If you need the help Ill gladly give it to you and also give u step by step instructions.

Majoracle
02-17-2009, 12:04 AM
Alright, if you're gonna help her off this forum, you understand everything in mine, right? It's not typical Sons of Suckerfish. I fixed a lot of bugs in it.

PitbullMean
02-17-2009, 12:07 AM
I'm sure she understands the material, just needs a helping hand to take it all in. and I'm willing to help her on this.

mindyf
02-17-2009, 02:17 AM
Thank you very much PitBullmean. You spent a tremendous amount of time helping me with the navigation menu. It looks absolutely awesome-- your awesome! I can't wait to finish the site now. :thumbsup:

PitbullMean
02-17-2009, 02:19 AM
Glad to help.

jerry62704
02-17-2009, 07:06 PM
Nice, But I dont know why you are so CSS bound cause using Javascript you would be compatible with browsers across the board.

Javascript isn't compatible with any browser on the web if javascript is turned off by the user.

PitbullMean
02-17-2009, 11:05 PM
Yes I know seeing as u are just reiterating someone elses opinion, and like i said before its RARE that people have javascript disabled cause alot and i mean alot of sites use it.

Majoracle
02-18-2009, 12:24 AM
I think that's why I like Suckerfish so much. It's about as close to a functional, STABLE, CSS based drop down menu with the absolute minimal JavaScript as you're going to find. That's why I spent a great deal of time debugging it. PitbullMean is basically right, the leading websites almost ALL rely heavily on JavaScript, this includes: YouTube, Facebook, Myspace, Photobucket, Last.fm, Wordpress, G-Mail, the list goes on. The tiny amount of IE exclusive JavaScript here is entirely acceptable. However, putting up a Site Map is always a good idea, especially if your site has a lot to navigate.

tagnu
02-18-2009, 07:34 AM
.. the leading websites almost ALL rely heavily on JavaScript, this includes: YouTube, Facebook, Myspace, Photobucket, Last.fm, Wordpress, G-Mail, the list goes on.

Gmail has a pure HTML version too :) WITHOUT javascript support.

snowieken
02-18-2009, 10:25 AM
I understand that basically no one turns off Javascript anymore these days, but that doesn't mean it isn't good practice to provide a non-Javascript browsing option as well. As I said before, I couldn't care less which leading website relies on Javascript for their browsing; if they don't provide a non-Javascript option, that is just bad and unprofessional in my opinion.

I have nothing against Javascript based menus at all, if there is a non-Javascript version available as well. A site map, for instance, is a good example of that.

jerry62704
02-18-2009, 05:18 PM
Javascript is disabled in about 5% of the browsers. Not a high percentage, but when you take 5% of the entire Earth, it is significant.

tagnu
02-19-2009, 06:58 AM
As I said before, I couldn't care less which leading website relies on Javascript for their browsing; if they don't provide a non-Javascript option, that is just bad and unprofessional in my opinion.

I agree with snowieken, that's same with a website which relies completely on Flash, without giving any alternatives. Have you checked any of the leading movie production houses with Flash disabled?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum