Vertical drop down menu

crmamx · March 8, 2011

I have a new site design with a left nav menu (menu.php)that works ok. But it is too long and I would like to reduce the number of entries and add drop down menus.

Separate from that, I have a drop down menu which consists of menu.html, style.css and csshover.htc. This is a stand alone and also works.

I would like to incorporate the drop down features of menu.html and it's 2 files into my menu.php. I have tried every way I can think of with no success.

How do I go about it? Or do I need to post some more info?

Thanks

cssfreakie · March 8, 2011

Hi crmamx,

The best menu system i know that exists is named suckerfish or son of suckerfish. It's pure css and a little javascript to mimic the hover effect. you can find it here: http://htmldog.com/articles/suckerfish/dropdowns/ I don't know yours since it uses a .htc file which i never use.

This is far from easy though, and it will take you a day to totally understand what happens and how to reproduce it out of your head. (Although not many people to do that, but that's okay since you can copy paste most of the code ::) )

Like many menu's, it uses an unordered list and in that list are nested lists, children (so pay attention to a <li> </li> that suddenly has an <ul> inside of it. That's nesting.

It's a bit inefficient to explain it all here, besides that they describe it pretty well.

Now how i would learn this: Just try to get this working stand alone. So don't pay attention to your site, first get this to work as described in the guide. ones you know how it works. I am pretty sure all you need to do is change the code that sits in menu.php with what you have now and adjust the links. and add the styling to your existing menu (saves an extra header request)

at the bottom of that page i linked are also links to examples.

crmamx · March 8, 2011

The best menu system i know that exists is named suckerfish or son of suckerfish. It's pure css and a little javascript to mimic the hover effect. you can find it here: http://htmldog.com/articles/suckerfish/dropdowns/ I don't know yours since it uses a .htc file which i never use.

I have tried that one and it is just too complicated for me. As stated, I have tried several others that include javascript (which I know nothing about) and couldn't get them to work. The one I have is pure css and works.

http://divitodesign.com/css/vertical-css-menu-with-a-behavior-file/

cssfreakie · March 8, 2011

Well if it just works, all you need to do is paste the html of that menu in the proper place in menu.php or where ever you want.

Show me the code you use for that menu (that standalone menu thing ) and of your menu.php

crmamx · March 8, 2011

Well if it just works, all you need to do is paste the html of that menu in the proper place in menu.php or where ever you want.

Show me the code you use for that menu (that standalone menu thing ) and of your menu.php

Therein lies the problem. Both of the css files use similar elements, so I am trying to modify the content.css file with the requirements of the dropdown file (style.css), whereas I would only have one css file (content.css). I just can't get the right combination without screwing up other stuff.

menu.html which I am trying to incorporate into menu.php

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Vertical CSS menu with a Behavior file.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<ul>

	<li><a href="#">Videos</a><!-- ====== Main item #1 ==== -->
<ul>
	<li><a href="#">Amazing 3D</a>
	</li>
	<li><a href="#">B36</a>
	</li>
	<li><a href="#">B52</a>
	</li>
        </ul>
	</li>
	<li><a href="#">Slideshows</a><!-- === Main item #2 ==== -->
<ul>
	<li><a href="#">Grading</a>
	</li>
	<li><a href="#">Fabric</a>
	</li>
</ul>
	</li>
	<li><a href="#">Product Reviews</a><!-- ==Main item #3 == -->
	</li>
</ul>
<ul>
	<li><a href="#">Miscellaneous</a> <!-- =========== Main item #4 ==== -->
	</li>
</ul>
</body>
</html>

style.css

body {
behavior: url(csshover.htc);
}

a {
color: #000;
text-decoration: none;
}

ul {
list-style: none;
margin: 0;
padding: 0;
width:200px;
}

ul li {
font: bold 11px/16px arial, helvetica, sans-serif;
height:100%;
background:#ff8b8e;
border-bottom:1px solid #fff;
position: relative;
float:left;
width:100%;
}

ul li ul li{
background:#ffcf8b;
}

ul li a{
display:block;
padding: 2px 3px;
}

ul li a:hover {
color: #a00;
background: #ffd3d4;
border-right:1px solid #fff;
border-left:1px solid #fff;
}

ul li ul li a:hover{
background: #ffedd3;
border-left:1px solid #fff;
}

ul ul {
position: absolute;
top: 0;
display:none;
}

ul li:hover ul{
display: block;
left:200px;
}

You already have a copy of menu.php and content.css.

Menu.html is not complete, but if I can get it incorporated I can finish it.

cssfreakie · March 8, 2011

this is a job for CSS selectorman

Your problem shows exactly why one would need to use either a class or an id. answer is to target it. And also illustrates why i said use a paragraph or span instead of text loose in a div in a question you asked before this thread!

Now before you screw up you whole style sheet. do the following.

Wrap this new menu in a div and give it an id (there is only one so an ID is perfect) that way we can target it and it's inner elements.

Also note that a decent editor would have given proper indentation. I fixed this for now.

<div id="supermenu">
<ul><!-- start ul 1 -->
    <li>
        <a href="#">Videos</a><!-- ====== Main item #1 ==== -->
        <ul>
            <li>
                <a href="#">Amazing 3D</a>
            </li>
            <li>
                <a href="#">B36</a>
            </li>
            <li>
                <a href="#">B52</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Slideshows</a><!-- === Main item #2 ==== -->
        <ul>
            <li>
                <a href="#">Grading</a>
            </li>
            <li>
                <a href="#">Fabric</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Product Reviews</a><!-- ==Main item #3 == -->
    </li>
</ul><!-- end ul 1 -->
<ul><!-- start ul 2 -->
    <li>
        <a href="#">Miscellaneous</a> <!-- =========== Main item #4 ==== -->
    </li>
</ul><!-- end ul 2 -->
</div>

Now i wrapped it in a div with the id of #supermenu

Now lets style it since now we can target it by using the #id of supermenu.

/*-----------start supermenu ----*/
body {
    behavior: url(csshover.htc);
}
div#supermenu a {
    color: #000;
    text-decoration: none;
}
div#supermenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width:200px;
}
div#supermenu ul li {
    font: bold 11px/16px arial, helvetica, sans-serif;
    height:100%;
    background:#ff8b8e;
    border-bottom:1px solid #fff;
    position: relative;
    float:left;
    width:100%;
}
div#supermenu ul li ul li{
    background:#ffcf8b;
}
div#supermenu ul li a{
    display:block;
    padding: 2px 3px;
}
div#supermenu ul li a:hover {
    color: #a00;
    background: #ffd3d4;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
}
div#supermenu ul li ul li a:hover{
    background: #ffedd3;
    border-left:1px solid #fff;
}
div#supermenu ul ul {
    position: absolute;
    top: 0;
    display:none;
}
div#supermenu ul li:hover ul{
    display: block;
    left:200px;
}
/*--- end supermenu  ----*/

And that's it, put that top code in menu.php

and add super menu styling to the stylesheet put the .htc in the right folder and you are ready to go.

This again shows why people should start at the beginning. ID and Classes..... css is worthless without them.

-edit: as far as stuff i should already have, anything i don't need i through away. besides that, this forum is to help more people than the person posting, so it's always nice to post the stuff so others can learn from it too.

crmamx · March 8, 2011

I don't understand. I already have this and it works. You recoded it and cleaned it up but it is the same thing I already have.

Maybe I wasn't clear.

Here is what I have:

===Main Program=== ===Vertical drop down menu programs===

index1.php - links to custom.css menu.html - links to style.css

menu.php - single level

home

club info

club members

videos <------------------------------------------ Videos

Amazing 3D

B36

B52

I want to replace the video menu in menu.html in menu php. In otherwords, I want a vertical drop down menu in menu.php.

cssfreakie · March 8, 2011

Look at the code i added a wrapper DIV to target it! which is of vital importance....

So i changed it instead of only using extra indentation.

Just delete the code in menu.php and add what i posted it should work and otherwise it wouldn't work either.

crmamx · March 8, 2011

menu.php

<div class="content">
<ul id="menu">
    <li><a href="index1.php?page=home"><span>Home</span></a></li>
    <li><a href="index1.php?page=president_desk"><span>President's Desk</span></a></li>
    <li><a href="index1.php?page=club_info"><span>Club Info</span></a></li>
    <li><a href="index1.php?page=club_members"><span>Club Members</span></a></li>
    <li><a href="index1.php?page=directions"><span>Directions to Field</span></a></li>
    <li><a href="index1.php?page=flight_log"><span>Flight Log</span></a></li>
    <li><a href="index1.php?page=weather"><span>Weather</span></a></li>
    <li><a href="index1.php?page=calendar"><span>Calendar of Events</span></a></li>
    <li><a href="index1.php?page=links"><span>Links</span></a></li>
    <li><a href="index1.php?page=how_to_articles"><span>How to Articles</span></a></li>
    <li><a href="index1.php?page=learn_to_fly"><span>Learn to Fly</span></a></li>
    <li><a href="index1.php?page=rookie_tips"><span>Rookie Tips</span></a></li>
    <li><a href="index1.php?page=nolf"><span>NOLFs</span></a></li>
    <li><a href="index1.php?page=member_area"><span>Members Area</span></a></li>
    <li><a href="index1.php?page=videos"><span>Videos</span></a></li>
    <li><a href="index1.php?page=slideshows"><span>Slideshows</span></a></li>
    <li><a href="index1.php?page=product_review"><span>Product Reviews</span></a></li>
    <li><a href="index1.php?page=miscellaneous"><span>Miscellaneous</span></a></li>
    <li><a href="index1.php?page=conversion_tables"><span>Conversion Tables</span></a></li>
    <li><a href="index1.php?page=trivia"><span>Trivia</span></a></li>
    <li><a href="index1.php?page=funny_stuff"><span>Funny Stuff</span></a></li>
    <li><a href="index1.php?page=parapro"><span>More funny stuff</span></a></li>
    <li><a href="index1.php?page=sailplanes"><span>Sailplanes</span></a></li>
</ul>
</div>

Delete the code in menu.php

Which to me means delete all the code.

and add what i posted it should work

<div id="supermenu">
<ul><!-- start ul 1 -->
    <li>
        <a href="#">Videos</a><!-- ====== Main item #1 ==== -->
        <ul>
            <li>
                <a href="#">Amazing 3D</a>
            </li>
            <li>
                <a href="#">B36</a>
            </li>
            <li>
                <a href="#">B52</a>
            </li>
        </ul>
    </li>

Which is what I did and it works. But I deleted all the rest of my menu. So I am back to where I started. Either one of them separately works.

We just don't seem to be on the same page.

Take this code:

<div class="content">
<ul id="menu">
    <li><a href="index1.php?page=home"><span>Home</span></a></li>
    <li><a href="index1.php?page=video"><span>Video</span></a></li>
</ul>
</div>

And add the drop down section to the Video menu item.

That is what I am trying to do but can't get it to work.

cssfreakie · March 8, 2011

Come on mate, if you can make a menu the way you wanted with this .htc system how hard can it be to do the same with your original menu?

It's also unordered list. let me look a sec :confused:

seriously you choose for a menu system, and all menu systems are pretty difficult, but since you got it working why are you not able to adapt that knowledge and apply it to the older stuff. In fact you now ask the person helping you to read in to this menu system... instead of the one he or she suggested to help with something you choose because you had it working.

Okay so how whould i do this.... hmm

What are the similarities:

both use ul's

what are the differences:

different class on wrapper

span's used in original menu.

Solution remove div ul and span from original menu and squese the li's in the new menu.

<div id="supermenu">
<ul><!-- start ul 1 -->
    <li><a href="index1.php?page=home">Home</a></li>
    <li><a href="index1.php?page=president_desk">President's Desk</a></li>
    <li><a href="index1.php?page=club_info">Club Info</a></li>
    <li><a href="index1.php?page=club_members">Club Members</a></li>
    <li><a href="index1.php?page=directions">Directions to Field</a></li>
    <li><a href="index1.php?page=flight_log">Flight Log</a></li>
    <li><a href="index1.php?page=weather">Weather</a></li>
    <li><a href="index1.php?page=calendar">Calendar of Events</a></li>
    <li><a href="index1.php?page=links">Links</a></li>
    <li><a href="index1.php?page=how_to_articles">How to Articles</a></li>
    <li><a href="index1.php?page=learn_to_fly">Learn to Fly</a></li>
    <li><a href="index1.php?page=rookie_tips">Rookie Tips</a></li>
    <li><a href="index1.php?page=nolf">NOLFs</a></li>
    <li><a href="index1.php?page=member_area">Members Area</a></li>
    <li>
        <a href="#">Videos</a><!-- ====== Main item #1 ==== -->
        <ul>
            <li>
                <a href="#">Amazing 3D</a>
            </li>
            <li>
                <a href="#">B36</a>
            </li>
            <li>
                <a href="#">B52</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Slideshows</a><!-- === Main item #2 ==== -->
        <ul>
            <li>
                <a href="#">Grading</a>
            </li>
            <li>
                <a href="#">Fabric</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Product Reviews</a><!-- ==Main item #3 == -->
    </li>
</ul><!-- end ul 1 -->
<ul><!-- start ul 2 -->
    <li>
        <a href="#">Miscellaneous</a> <!-- =========== Main item #4 ==== -->
    </li>
</ul><!-- end ul 2 -->
</div>

and yeah the styleing that was aplied to the orininal menu is lost now, but if you want 1 menu, you need to choose, and that's what we did.

Hope this helps.

I assume you understand that if you want items one level up place un ul around it. I never worked with this menu, but this should not be difficult

Well i just tested it on my system and the stuff below works as a charm: same code same idea. If you want to set something to a lower level try to nest it. (i described that above)<ul><li><ul><li></li></ul></li></ul>

<!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" xml:lang="en" lang="en" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title>menu</title>
<style type="text/css">
    /*-----------start supermenu ----*/
body {
    behavior: url(csshover.htc);
}
div#supermenu a {
    color: #000;
    text-decoration: none;
}
div#supermenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width:200px;
}
div#supermenu ul li {
    font: bold 11px/16px arial, helvetica, sans-serif;
    height:100%;
    background:#ff8b8e;
    border-bottom:1px solid #fff;
    position: relative;
    float:left;
    width:100%;
}
div#supermenu ul li ul li{
    background:#ffcf8b;
}
div#supermenu ul li a{
    display:block;
    padding: 2px 3px;
}
div#supermenu ul li a:hover {
    color: #a00;
    background: #ffd3d4;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
}
div#supermenu ul li ul li a:hover{
    background: #ffedd3;
    border-left:1px solid #fff;
}
div#supermenu ul ul {
    position: absolute;
    top: 0;
    display:none;
}
div#supermenu ul li:hover ul{
    display: block;
    left:200px;
}
/*--- end supermenu  ----*/
</style>
    </head>
    <body>
    <div class="content">


</div>
<div id="supermenu">
<ul><!-- start ul 1 -->
    <li><a href="index1.php?page=home">Home</a></li>
    <li><a href="index1.php?page=president_desk">President's Desk</a></li>
    <li><a href="index1.php?page=club_info">Club Info</a></li>
    <li><a href="index1.php?page=club_members">Club Members</a></li>
    <li><a href="index1.php?page=directions">Directions to Field</a></li>
    <li><a href="index1.php?page=flight_log">Flight Log</a></li>
    <li><a href="index1.php?page=weather">Weather</a></li>
    <li><a href="index1.php?page=calendar">Calendar of Events</a></li>
    <li><a href="index1.php?page=links">Links</a></li>
    <li><a href="index1.php?page=how_to_articles">How to Articles</a></li>
    <li><a href="index1.php?page=learn_to_fly">Learn to Fly</a></li>
    <li><a href="index1.php?page=rookie_tips">Rookie Tips</a></li>
    <li><a href="index1.php?page=nolf">NOLFs</a></li>
    <li><a href="index1.php?page=member_area">Members Area</a></li>
    <li>
        <a href="#">Videos</a><!-- ====== Main item #1 ==== -->
        <ul>
            <li>
                <a href="#">Amazing 3D</a>
            </li>
            <li>
                <a href="#">B36</a>
            </li>
            <li>
                <a href="#">B52</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Slideshows</a><!-- === Main item #2 ==== -->
        <ul>
            <li>
                <a href="#">Grading</a>
            </li>
            <li>
                <a href="#">Fabric</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Product Reviews</a><!-- ==Main item #3 == -->
    </li>
</ul><!-- end ul 1 -->
<ul><!-- start ul 2 -->
    <li>
        <a href="#">Miscellaneous</a> <!-- =========== Main item #4 ==== -->
    </li>
</ul><!-- end ul 2 -->
</div>

    </body>
</html>

crmamx · March 9, 2011

What do you think about this for consolidation?

<!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" xml:lang="en" lang="en" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <title>menu</title>
<style type="text/css">
    /*-----------start supermenu ----*/
body {
    behavior: url(csshover.htc);
}
div#supermenu a {
    color: #000;
    text-decoration: none;
}
div#supermenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width:200px;
}
div#supermenu ul li {
    font: bold 11px/16px arial, helvetica, sans-serif;
    height:100%;
    background:#ff8b8e;
    border-bottom:1px solid #fff;
    position: relative;
    float:left;
    width:100%;
}
div#supermenu ul li ul li{
    background:#ffcf8b;
}
div#supermenu ul li a{
    display:block;
    padding: 2px 3px;
}
div#supermenu ul li a:hover {
    color: #a00;
    background: #ffd3d4;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
}
div#supermenu ul li ul li a:hover{
    background: #ffedd3;
    border-left:1px solid #fff;
}
div#supermenu ul ul {
    position: absolute;
    top: 0;
    display:none;
}
div#supermenu ul li:hover ul{
    display: block;
    left:200px;
}
/*--- end supermenu  ----*/
</style>
    </head>
    <body>
    <div class="content">


</div>
<div id="supermenu">
<ul><!-- start ul 1 -->
    <li><a href="index1.php?page=home">Home</a></li>
    <li><a href="index1.php?page=weather">Weather</a></li>
    <li><a href="index1.php?page=links">Links</a></li>
    <!-- ===================== Dropdown item #1 =========================== -->
    <li>
        <a href="#">Videos</a>
        <ul>
            <li>
                <a href="#">Amazing 3D</a>
            </li>
            <li>
                <a href="#">Glenn's B36</a>
            </li>
            <li>
                <a href="#">B52</a>
            </li>
             <li>
                <a href="#">F 86</a>
            </li>
            <li>
                <a href="#">Don't miss this one</a>
            </li>
            <li>
                <a href="#">Another 3D</a>
            </li>
             <li>
                <a href="#">World's largest model</a>
            </li>
            <li>
                <a href="#">Shuttle accident</a>
            </li>
            <li>
                <a href="#">Turbine helicopter</a>
            </li>
        </ul>
    </li>
<!-- ===================== Dropdown item #2 =========================== -->
    <li>
        <a href="#">Slideshows</a>
        <ul>
            <li>
                <a href="#">Shed construction</a>
            </li>
            <li>
                <a href="#">Runway construction</a>
            </li>
            <li>
                <a href="#">Laying the fabric</a>
            </li>
            <li>
                <a href="#">Fun flyin #1</a>
            </li>
        </ul>
    </li>
<!-- ===================== Dropdown item #3 =========================== -->
    <li>
        <a href="#">About us</a>
        <ul>
            <li>
                <a href="#">Club info</a>
            </li>
            <li>
                <a href="#">Club members</a>
            </li>
            <li>
                <a href="#">Directions to field</a>
            </li>
            <li>
                <a href="#">Calendar of events</a>
            </li>
            <li>
                <a href="#">NOLF's</a>
            </li>
            <li>
                <a href="#">Member's area</a>
            </li>
        </ul>
    </li>
<!-- ===================== Dropdown item #4 =========================== -->
    <li>
        <a href="#">RC related</a>
        <ul>
            <li>
                <a href="#">How to articles</a>
            </li>
            <li>
                <a href="#">Learn to fly</a>
            </li>
            <li>
                <a href="#">Rookie tips</a>
            </li>
            <li>
                <a href="#">Sailplanes</a>
            </li>
            <li>
                <a href="#">Review nitro</a>
            </li>
            <li>
                <a href="#">Review electric</a>
            </li>
            <li>
                <a href="#">Review heli</a>
            </li>
        </ul>
    </li>
</ul><!-- end ul 1 -->
<!-- ===================== Dropdown item #5 =========================== -->
<ul><!-- start ul 2 -->
    <li>
        <a href="#">Miscellaneous</a>
        <ul>
            <li>
                <a href="#">Are you a modeler</a>
            </li>
            <li>
                <a href="#">Trivia</a>
            </li>
            <li>
                <a href="#">Funny stuff</a>
            </li>
            <li>
                <a href="#">Conversion tables</a>
            </li>
            <li>
                <a href="#">Paraprosdokian</a>
            </li>
        </ul>
</ul><!-- end ul 2 -->
</div>

    </body>
</html>

Of course it isn't finished yet because the lower levels are not linked to anything. Will start work on it tomorrow. Merging the two css files should be fun. :'(

Speak now or forever hold your peace.

p.s. Why do you end ul #! and start another one?

crmamx · March 9, 2011

Check out the site now. Got to hook up the sub links....tomorrow.

Don't like the colors either. The original ones were best. Some colors displace the sub menu far right...crazy.

Don't like the size boxes either. Still got plenty to work on.

Cheers.

crmamx · March 9, 2011

Ok, most links work, changed the menu box size and order of items.

Think I will leave menu box colors the way they are. Or go back to original colors? What do you think?

Finished with menu.

Final grade?

cssfreakie · March 9, 2011

hmm i give the menu as menu a 7 for the fact that it's working. although the look doesn't match the other colours of the website, same is for the new sample header images. But that's just my opinion

careful with your new site that you don't make it a Christmas tree just like the other one. Choose max 4 colors that live in harmony apart from black and white. In the other thread someone pointed a great tool for that.

crmamx · March 9, 2011

I agree. Gonna try and put them back like they were to start.

cssfreakie · March 9, 2011

hehe i just watch out of curiosity and i saw they were better scaled now, it's looking good. (think [url-http://cssfreakie.blogspot.com/2011/03/css-boxmodel-simple-explanation.html]boxmodel[/url] and it will be a piece of cake

Sign In

Vertical drop down menu

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information