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:
is there a way to make the menu hide on mouse out?
$(".drop").bind
(
"mouseleave",
function() { $(this).siblings("ul").slideUp('fast'); }
);
You’re really really good at what you do simp.
C’mon newbs, let’s bow.
Thanks, I’m only ok at it though, but I had amazing “teachers”
voetsjoeba & [URL=“http://www.kirupa.com/forum/member.php?u=11757”]icio
they’re the only reason i know what i know, respeck
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. 
Off topic: Is there some secret behind your site? I tried looking at the source and all, but nothing… Curiouser and curiouser.
[QUOTE=w1sh;2341371]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. 
Off topic: Is there some secret behind your site? I tried looking at the source and all, but nothing… Curiouser and curiouser.[/QUOTE]
: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:
[quote=simplistik;2341366]Thanks, I’m only ok at it though, but I had amazing “teachers”
voetsjoeba & [URL=“http://www.kirupa.com/forum/member.php?u=11757”]icio
they’re the only reason i know what i know, respeck[/quote]
Voetsjoeba’s site is pretty cool. The man appreciates his Flash. Lacking in the tuts. 
[quote=simplistik;2341377]
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:[/quote]
You should really use that domain and make a <!-- Comment Site --> with macros for pictures and urls for links.
The l33t would appreciate it. :sc:
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 [whisper]helping me when i need it lol[/whisper]
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 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'); }
);
});
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>
Yep that fixed the issue, but the problem is now the links on the menu dont work using that mark up
Here 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
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'); }
);
});
yep that worked thank you
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
And here is the Firefox example
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; }
Got a link?
:: Copyright KIRUPA 2024 //--