Drop-down menu solution?

Sanehouse · #1 Apr 14th, 2008, 22:36

Hello. I'm trying to make a drop-down menu based on a hierarchical unordered list system.

This is the code I tried to modify (so that it would work with my code):

Code: Select all

#navigation ul {
    position: absolute;
    top: 101px;
}
#navigation {
    width: 100%;
    background: #eee;
    float: left;
}
#navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
}
#navigation a, #navigation h2 {
    font: bold 11px/16px arial, helvetica, sans-serif;
    display: block;
    margin: 0;
    padding: 2px 3px;
}
#navigation h2 {
    color: #fff;
    background: #000;
    text-transform: uppercase;
}
#navigation a {
    height: 25px;
    color: #000;
    background: #9F9F9F;
    text-decoration: none;
}
#navigation a:hover {
    color: #a00;
    background: #fff;
}
#navigation li {
    position: relative;
    margin: 0;
}
#navigation ul ul {
    position: absolute;
    z-index: 500;
    top: 23px;
    width: 200px;
}
#navigation ul ul li {
    width: 100%;
    border: 1px solid #000000;
    margin: 0;
    padding: 0;
}
#navigation ul ul ul {
    top: 0;
    left: 100%;
}
div#navigation ul ul, div#navigation ul li:hover ul ul, div#navigation ul ul li:hover ul ul {
    display: none;
}
div#navigation ul li:hover ul, div#navigation ul ul li:hover ul, div#navigation ul ul ul li:hover ul {
    display: block;
}
<!--[if IE]>
    <style type="text/css" media="screen">
    body {
        behavior: url(csshover.htc);
        font-size: 100%;
    }
    #navigation ul li {
        float: left;
        list-style: none;
    }
    #navigation ul li a {
        height: 1%;
    } 
    #navigation a, #navigation h2 {
        font: bold 0.7em/1.4em arial, helvetica, sans-serif;
    }
    </style>
<![endif]-->

This is all the CSS I have for #navigation:

Code: Select all

#navigation {
    height: 15px;
    background: url(images/nav.png) no-repeat;
}
#navigation ul li {
    float: left;
    list-style: none;
    margin-right: 3px;
}
#navigation ul li a {
    display: block;
    width: 100px;
    padding-top: 15px;
    overflow: hidden !important;
}
#navigation ul .navigation a {
    background: url(images/navigation.png) no-repeat;
}
#navigation ul .bof1 a {
    background: url(images/bof1.png) no-repeat;
}
#navigation ul .bof2 a {
    background: url(images/bof2.png) no-repeat;
}
#navigation ul .bof3 a {
    background: url(images/bof3.png) no-repeat;
}
#navigation ul .bof4 a {
    background: url(images/bof4.png) no-repeat;
}
#navigation ul .bof5 a {
    background: url(images/bof5.png) no-repeat;
}
#navigation ul li ul li {
    display: none;
    width: 200px;
    clear: both;
}
#navigation ul.bof1:hover ul .bof1menu {
    display: block;
    width: 200px;
}

This is my unordered list:

Code: Select all

                <ul>
                    <li class="navigation"><a href="#"></a></li>
                    <li class="bof1"><a href="#"></a></li>
                    <li class="bof2"><a href="#"></a></li>
                    <li class="bof3"><a href="#"></a></li>
                    <li class="bof4"><a href="#"></a></li>
                    <li class="bof5"><a href="#"></a></li>
                </ul>

Anyone know how I can get a drop-down menu to work?

spinal007 · #2 Apr 18th, 2008, 12:10

http://www.htmldog.com/articles/suckerfish/dropdowns/

moojoo · #3 Apr 18th, 2008, 16:54

Not sure suckerfish is the correct solution, as this can be done without the scripting with CSS and .htc file for IE.

Looking at your menu code you have no nested UL so the CSS you wrote can't target anything.

Code: Select all

<div id="nav">
<ul>
<li class="navigation"><a href=""></a>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li><a href="">Menu Item 2</a></li>
<li><a href="">Menu Item 3</a></li>
<li><a href="">Menu Item 4</a></li>
</ul>
</div>

Basic CSS:

Code: Select all

#nav ul li ul {
display:none;
}

#nav ul li:hover ul {
display:block;
width:200px;
position:absolute;
left:auto
}

Thats the basics. See if that helps set you on the right track. Also get Whatever:hover for to make it work in IE. the whatever hover htc is well documented and simple to implement.

spinal007 · #4 Apr 18th, 2008, 23:14

Good reply moojoo, but I can't see how your suggestion differs from suckerfish.

moojoo · #5 Apr 19th, 2008, 15:37

Suckerfish requires javascript which scrubs the source and uses js to manipulate elements. Also utilizing a conditional comment is a better solution than using js browser sniffing as well, which suckerfish also handles via js. At any rate the solution I provided is probably easier and more direct than suckerfish is as well. Not that suckerfish is not a good solution, just think in this case it may be over kill.

Aso · #6 Apr 19th, 2008, 15:39

.htc is still a scripting file, and will not take effect if the user has Javascript disabled.

spinal007 · #7 Apr 20th, 2008, 14:40

Popup menus cannot be achieved without any javascript because IE6 does not handle anything:hover. As aso186 said, if javascript is disabled, suckerfish or not, popup menus will not work in IE6. So why the js-phobia?

bonnit · #8 Apr 20th, 2008, 21:48

cant offer direct help but http://www.cssplay.co.uk have loads of this type of menu, might be worthwhile checking it out?

dancave · #9 Apr 22nd, 2008, 12:16

I'll vouch for CSS play's quaility. I've used there stuff a number of times.

All they request is a link back for personal sites or an email to request permission on larger sites.

http://www.cssplay.co.uk/menus/dd_valid.html

The above link is a Cross browser CSS only DD menu.

Hope this helps

moojoo · #10 Apr 23rd, 2008, 14:44

Quote:

Originally Posted by aso186

.htc is still a scripting file, and will not take effect if the user has Javascript disabled.

Aso yes, but the htc method is a tad less obtrusive than suckerfish imo. Either way the end result is the same I guess. The menu should function with or without either, and sub links available on sub pages in some form. Simple enough in some no script tags or conditional depending on what you are using.

bobby12 · #11 May 2nd, 2008, 11:02

Because the drop down menus are written Javascript the links created in the drop down menu are not relative and are therefore not updated when used on an actual page. This is important because the template is stored in a sub folder called template and not with the other HTML pages so the links are always wrong.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Drop-down Menu	kaz	JavaScript Forum	1	May 24th, 2007 10:32
I have a normal css menu, but want ot add drop down menu to it	multichild	Web Page Design	7	Jan 9th, 2007 16:07
Drop down menu ...	Drysdale	Web Page Design	3	Jul 21st, 2005 22:00
help with drop menu	makemesick	JavaScript Forum	8	Apr 25th, 2005 21:19
drop menu help	makemesick	JavaScript Forum	2	Apr 23rd, 2005 05:48

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Drop-down menu solution?