[solved] Wayfinder dropdown-menu [IE7 BUG!]

My site: http://www.norlins.dk/uchihaproject/index.php?id=6

So far i have used this tutorial: http://www.muddydogpaws.com/development/wayfinder/examples/example-2.html
Edited the css to fit my purpose.

But i want to make the sub menu items fade like its done with this menu: http://users.tpg.com.au/j_birch/plugins/superfish/#examples

I don’t know where to start, if someone could pinpoint me in the right direction it would make me very glad!

EDIT: In the superfish quick step guide i only understand step 2 hehe...


Thanks =)

hmm im not sure what wrong perhaps someone could help me by logging in:

http://www.norlins.dk/uchihaproject/manager/
login: user
pass: helpme

i have uploaded: superfish.js and hoverIntent.js and linked to them.
i have made the superfish call in head: $(’.menu’).superfish({    .menu comming from my css file assets/templates/wayfinder/basic_dd.css

Hi!

check out dev_cw’s configs -> http://modxcms.com/forums/index.php/topic,31376.msg190237.html#msg190237

i think "wayfinder.jdropdown.zip" is the menu you are looking for

j

Quote from: sharkbait at Mar 03, 2009, 02:20 PM

Hi!

check out dev_cw’s configs -> http://modxcms.com/forums/index.php/topic,31376.msg190237.html#msg190237

i think "wayfinder.jdropdown.zip" is the menu you are looking for

j

You are awesome.

glad i could help,

i don’t know if this config is up-to-date, but playing around with it a while ago i found out in IE6 from the second dropdown-menuitem on, not the whole button is clickable. you can fix this by adding "position:relative;" -> .nav a {display:block;position:relative;}

there was something else i can’t remember, but maybe you can ask dev_cw what it was

jan

so i have a problem after all.

I want my first level to have an transparent background, and the second level (submenu) to have an background-color.

Hmmmm

I can’t just target one of them since both first level and sub level are both <li> and <ul>

hi,

you can target both of them separately. the submenu is a nested <ul>

the first level ul#nav li {...}, and to target the second ul#nav li ul li {...}

jan

Quote from: sharkbait at Mar 03, 2009, 11:59 PM

hi,

you can target both of them separately. the submenu is a nested <ul>

the first level ul#nav li {...}, and to target the second ul#nav li ul li {...}

jan

Ahhh sweet. I actually stumbled on a solution too after a few hours of mass googling hehe.. i added &levelClass=`level` to my wayfinder call and targeted the level with .level1 in css. Of course your solution with pure css is probably better..

There are a few things i would like to modify


* When you hover over level 1 menu items and continues down the submenu, i want the top level to stay "hover"
  example: http://www.cssplay.co.uk/menus/final_drop.html

*Align text in the submenu to the left

*Make the submenu fade straight down instead of from corner to corner

*When hovering in the menu an alt="..." appears with the items title, i want to disable this on the menu.

hi!

...you should delete following part from your template: "// initialise Superfish " or put it within the <script></script> part

*for the text in the submenu, something like this:
ul#nav li ul li {text-align:left;}

*for the slide-down, try to replace
with


this part from Stu Nichols css should probably be adapted to your css (the top-level hover):


hope i could help, jan

Jan your the man! I really appreciate the help!

One thing i’m not getting though, still trying to figure it out...

My quest to obtain the "drop-straight-downwards-while-fading-menu" continues :

I’m not really using this code:

$(document).ready(function() {
$(’ul.sf-menu’).superfish();
});

It was some leftover from before i got hang of it (template is cleaned up now)... i found the code im using in an extern document:
/uchihaproject/assets/snippets/wayfinder/configs/jdropdown/menu.js

Looks like this:

jQuery.noConflict();
jQuery(document).ready(function($){

$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li ").hover(function(){
$(this).find(’ul:first’).css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find(’ul:first’).css({visibility: "hidden"});
});
});

so i need to work your code into the above:

$(document).ready(function(){
$("ul.sf-menu").superfish({
animation: {height:’show’}, // slide-down effect without fade-in
delay: 1200 // 1.2 second delay on mouseout
});
});