List & CSS Based Dropdown Menu [Archive]

thedaveyb

March 11th, 2008, 06:51 AM

Hi People..

I am well aware of the suckerfish dropdowns for creating CSS and List based dropdown menus - problem is i need one activated by on-click - anyone know of anything like that?.

Have looked at some ajax alternatives but their all js heavy with the links embedded in the JS and i need the links to be a list based menu.

Ta muchly *scratches head* :sc:

simplistik

March 11th, 2008, 08:55 AM

done very easily w/ jquery whipped this up in about 5 - 6 minutes before I headed out the door to work, cause that just how easy jquery makes it :D

mootools is a good lightweight solution too, but i prefer jquery

<!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" />
<meta http-equiv="Content-language" content="en-US" />
<title>Page Title</title>
<style type="text/css" media="screen">
ul, li { list-style: none; margin: 0; padding: 0; }
ul li { margin: 0 0 0 20px; float: left; }
ul li li { margin: 0; float: none; }
ul ul { display: none; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(".drop").toggle(
function () {
$(this).siblings("ul").slideDown('fast');
},
function () {
$(this).siblings("ul").slideUp('fast');
}
);
});
</script>

</head>
<body>
<ul>
<li><a href="#" class="drop">Menu</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#" class="drop">Menu 2</a>
<ul>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</li>
</ul>

</body>
</html>

fasterthanlight™

March 11th, 2008, 10:11 AM

Nice one simp, I'll probably steal this.

*edit: Errr.. there's some serious tricky business going on with this thing in IE, hopefully thats because theres only the basic amount of CSS

simplistik

March 11th, 2008, 10:19 AM

*edit: Errr.. there's some serious tricky business going on with this thing in IE, hopefully thats because theres only the basic amount of CSS
Yea that looks like a IE width problem, try adding a width to ul li {}, it will probably fix that.

ul li { width: 30px; margin: 0 0 0 20px; float: left; }

thedaveyb

March 12th, 2008, 08:09 AM

thanks for the speedy response guys, time ran away with me a little yesterday so hadnt had time to try it.

Will be doing so shortly so will let you know how i get on - looks straightforward enough tho :fab:

thedaveyb

March 13th, 2008, 10:35 AM

well it all works well enough guys - just a couple of minor issues which have tried to fix and have really struggled..

http://www.thedaveyb.co.uk/dev/

http://www.thedaveyb.co.uk/dev/global/global.css

Its the personal circumstance menu where i have tried to implement this - just underneath there is 2 columns, both floated left - the menu dissapears under theses and no amount of z-index fiddling seems to cure it - same in firefox but thats always been the case

have attempted to wrap a div round the menu called #stack and then position this higher than the columns below it but still no joy it -

btw am testing this in ie7 and ff so far..

any help really appreciated...:upset:

fasterthanlight™

March 13th, 2008, 10:47 AM

You've got more problems then just that....

the styling is completely borked in both Firefox and IE on mac and windows (for me anyways)

thedaveyb

March 13th, 2008, 10:56 AM

gee' thanks for that :goatee: - i havent actually styled it yet due to the fact i havent got it working correctly yet ....

fasterthanlight™

March 13th, 2008, 11:20 AM

anything you try and fix now may be negated when you fully style the menu...
better to get it looking properly, and work on making it function properly after that.

thedaveyb

March 13th, 2008, 11:31 AM

no probs :kommie:, i tend to do mechanics first make it pretty later although understand where your coming from, shall crack on for a little while then have a crack at styling it shortly and see what gives..

*trondles off armed with wireless mouse & keyboard combination and a strong coffee*

thedaveyb

March 14th, 2008, 06:00 AM

hi guys, back again - progress to an extent, the menu is now styled up and fingers crossed looks ok... still having the issue of it dissapearing behind my content.... fairly puzzling.

I have tried z-index combinations to an extent - pulling one forward and pushing the other back at the same time but with no joy...:jail:

any ideas?

http://www.thedaveyb.co.uk/dev/ (http://www.thedaveyb.co.uk/dev/)

EDIT* In Ie7 it does just seem to be the div underneath which holds the text and is floated left if you removee the float it all worsk but in FF its everything that its going behind.

do floated objects assume there own stack order as such?

sammix

March 14th, 2008, 07:16 AM

I didn't go through all your code but here's a wild guess - Try clearing the floats with something like this:

<div style="clear: both; width: 100%; height: 100; overflow: hidden; font-size: 0;"></div>

thedaveyb

March 14th, 2008, 07:20 AM

when you say clearing the floats - where abts am i aiming for....

theres pretty much a header (containting the menu) first floated left then 2 columns undernearth both floated left...

simplistik

March 14th, 2008, 08:32 AM

nah this is an easy fix as well... in this piece of code:

<ul style="margin: 5px 0 0 0; z-index: 100;">

slap a
position: relative; in there

<ul style="margin: 5px 0 0 0; z-index: 100; position: relative;">

should do the trick... IDK

thedaveyb

March 14th, 2008, 08:39 AM

certainly did.. :blush:

thanking you muchly :D - have a cookie...

*passes cookie*

sammix

March 14th, 2008, 10:02 AM

It's still not working in FF though. It appears behind the heading
A Fast House Sale Welcome you!
"The UK's Premier Homebuyers"

thedaveyb

March 14th, 2008, 10:06 AM

it does dont worry, havent uploaded the amended as working on locally..

dont panic simp' i aint taking back your cookie :look: hehe

simplistik

March 14th, 2008, 11:40 AM

dood, as soon as you gave me that cookie i shoved it down my gullet, so good luck getting it back :)

fasterthanlight™

March 14th, 2008, 11:42 AM

if anything he'll just have to wait a couple hours for you to squeeze it out in log form :O

Nav2k4

June 10th, 2008, 07:01 AM

is there a way to make the menu hide on mouse out?

simplistik

June 12th, 2008, 09:14 AM

$(".drop").bind
(
"mouseleave",
function() { $(this).siblings("ul").slideUp('fast'); }
);

w1sh

June 12th, 2008, 09:32 AM

You're really really good at what you do simp.

C'mon newbs, let's bow.

simplistik

June 12th, 2008, 09:56 AM

Thanks, I'm only ok at it though, but I had amazing "teachers"

voetsjoeba (http://www.kirupa.com/forum/member.php?u=4337) & icio (http://www.kirupa.com/forum/member.php?u=11757)

they're the only reason i know what i know, respeck

w1sh

June 12th, 2008, 09:58 AM

I just like the fact that someone poses a question and you are like, "Oh, yeah here, I scripted that complex crap in about 5 mins while being attacked by dogs".

Now answer my quick questions. :P

Off topic: Is there some secret behind your site? I tried looking at the source and all, but nothing... Curiouser and curiouser.

simplistik

June 12th, 2008, 10:05 AM

I just like the fact that someone poses a question and you are like, "Oh, yeah here, I scripted that complex crap in about 5 mins while being attacked by dogs".

Now answer my quick questions. :P

Off topic: Is there some secret behind your site? I tried looking at the source and all, but nothing... Curiouser and curiouser.
:lol: well I had that code cause I created a variation of it on a site we launched a little bit ago :) :thumb:

as for my site, there's no secret it's just blank atm. i didn't have content up there so i just took down the splash too :lol:

w1sh

June 12th, 2008, 10:11 AM

Thanks, I'm only ok at it though, but I had amazing "teachers"

voetsjoeba (http://www.kirupa.com/forum/member.php?u=4337) & icio (http://www.kirupa.com/forum/member.php?u=11757)

they're the only reason i know what i know, respeck
Voetsjoeba's site is pretty cool. The man appreciates his Flash. Lacking in the tuts. :(

w1sh

June 12th, 2008, 10:14 AM

as for my site, there's no secret it's just blank atm. i didn't have content up there so i just took down the splash too :lol:
You should really use that domain and make a  with macros for pictures and urls for links.
The l33t would appreciate it. :sc:

simplistik

June 12th, 2008, 10:22 AM

Voetsjoeba's site is pretty cool. The man appreciates his Flash. Lacking in the tuts. :(

If he put tutorials on his site people would ask to many questions and he can't be bothered w/ all that :lol: he's a busy man helping me when i need it lol

Nav2k4

June 13th, 2008, 05:12 AM

simplistik thanx for your response, that solution does work the only problem is that the drop down menu goes back up when the mouse leaves the top level link. So the menu is not really accessible. Here (http://nav.servehttp.com/menu.htm)is an example of what i mean..

This is how i set out your solution:

$(document).ready(function(){
$(".drop").toggle(
function () {
$(this).siblings("ul").slideDown('fast');
},
function () {
$(this).siblings("ul").slideUp('10000');
}
);
$(".drop").bind
(
"mouseleave",
function() { $(this).siblings("ul").slideUp('fast'); }
);
});

simplistik

June 13th, 2008, 08:35 AM

hmm yea, here i changed the js and the markup

<!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" />
<meta http-equiv="Content-language" content="en-US" />
<title>Page Title</title>
<style type="text/css" media="screen">
ul, li { list-style: none; margin: 0; padding: 0; }
ul li { margin: 0 0 0 20px; float: left; }
ul li li { margin: 0; float: none; }
ul ul { display: none; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

$(document).ready(function(){
$(".drop").toggle(
function () {
$("ul", this).slideDown('fast');
},
function () {
$("ul", this).slideUp('10000');
}
);
$(".drop").bind
(
"mouseleave",
function() { $("ul", this).slideUp('fast'); }
);
});

</script>

</head>
<body>
<ul>

<li class="drop"><a href="#">Menu</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>

<li class="drop"><a href="#">Menu 2</a>
<ul>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</li>

</ul>

</body>
</html>

Nav2k4

June 13th, 2008, 08:31 PM

Yep that fixed the issue, but the problem is now the links on the menu dont work using that mark up

Here (http://nav.servehttp.com/menu.htm)is an example

<!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" />
<meta http-equiv="Content-language" content="en-US" />
<title>Page Title</title>
<style type="text/css" media="screen">
ul, li { list-style: none; margin: 0; padding: 0; }
ul li { margin: 0 0 0 20px; float: left; }
ul li li { margin: 0; float: none; }
ul ul { display: none; }
</style>
<script src="jquery-latest.js"></script>
<script>

$(document).ready(function(){
$(".drop").toggle(
function () {
$("ul", this).slideDown('fast');
},
function () {
$("ul", this).slideUp('10000');
}
);
$(".drop").bind
(
"mouseleave",
function() { $("ul", this).slideUp('fast'); }
);
});

</script>

</head>
<body>
<ul>

<li class="drop"><a href="#">Menu</a>
<ul>
<li><a href="http://google.com">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>

<li class="drop"><a href="#">Menu 2</a>
<ul>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</li>

</ul>

</body>
</html>
The link is active but when clicked nothing happens.. interesting if you right click and open in new tab it works fine so im not sure whats going on with that

nqlong

June 13th, 2008, 11:36 PM

Great menu !

done very easily w/ jquery whipped this up in about 5 - 6 minutes before I headed out the door to work, cause that just how easy jquery makes it :D

mootools is a good lightweight solution too, but i prefer jquery

<!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" />
<meta http-equiv="Content-language" content="en-US" />
<title>Page Title</title>
<style type="text/css" media="screen">
ul, li { list-style: none; margin: 0; padding: 0; }
ul li { margin: 0 0 0 20px; float: left; }
ul li li { margin: 0; float: none; }
ul ul { display: none; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(".drop").toggle(
function () {
$(this).siblings("ul").slideDown('fast');
},
function () {
$(this).siblings("ul").slideUp('fast');
}
);
});
</script>

</head>
<body>
<ul>
<li><a href="#" class="drop">Menu</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li><a href="#" class="drop">Menu 2</a>
<ul>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</li>
</ul>

</body>
</html>

simplistik

June 18th, 2008, 09:30 AM

change it to:

$(document).ready(function(){
$(".drop").click(
function () {
$(this).children("ul").slideDown('fast');
},
function () {
$(this).children("ul").slideUp('10000');
}
);
$(".drop").bind
(
"mouseleave",
function() { $("ul", this).slideUp('fast'); }
);
});

Nav2k4

June 18th, 2008, 08:36 PM

yep that worked thank you

Nav2k4

June 24th, 2008, 12:21 AM

hmm there seems to be an issue with ie7, the menu doesnt auto resize if one of the menu items disappears. On the other browsers it seems to work fine.

Here is what happens in IE7
http://naveedious.googlepages.com/ie7.jpg

And here is the Firefox example
http://naveedious.googlepages.com/ffx.jpg

In firefox it resizes the menu if one of the options disappears, any ideas on how to fix this for IE7?

This is the css im using for IE7

ul, li { list-style: none; margin: 0; padding: 0; }
ul li { margin: 0 0 0 20px; float: left; }
ul li li { margin: 0; float: none; }
ul ul { display: none; border: 1px solid #369; padding: 4px 6px; margin: 15px 0 0 -35px; z-index: 1; position:absolute; }

fasterthanlight™

June 24th, 2008, 09:23 AM

Got a link?