This is probably something very simple but its driving me nuts so I'm hoping someone here can help me out... pretty please!! I've put together a mock page for my client and at the moment we're just playing about with the navigation. They've given me the style of nav they'd like which I've pretty much been able to replicate, bar one problem! The style they'd like is at the top of this page, but vertical rather than horizontal: http://www.iinet.net.au/index.html This is what I've come up with so far... the problem being that when you scroll the flyout menu, the main menu item no longer shows the background image... how oh how oh how do I fix this??!! http://fontmedia.com.au/penair/index.html Please save me from myself!! haha Thanks in advance Rahelle
Lots of views but no replies... Am I destined to never fix this?? Time for me to blow the dust off my CSS books I think... I knew they'd come in handy one day!!
You will have to add JavaScript probably i guess. There needs to be a special class something like 'active' added on the parent Li when you hover on it. So that you can apply a background image to it that 'stays' while you browse/scroll the sub-menu items. The reference website u gave uses JQuery which actually makes it pretty easy. If you look under the hood, the site.js has these lines which adds a 'over' class to the parent Li on hover, and removes it when u move away from it. function initialiseDropdownMenus() { var options = { over: function() { $(this).addClass("over"); $("ul", this).bgiframe(); }, out: function() { $(this).removeClass("over"); }, timeout: 125 }; $("#product_nav .dropdown_menu li").hoverIntent(options); $("#header .dropdown_menu li").hover( function() { $(this).addClass("over"); $("ul", this).bgiframe(); }, function() { $(this).removeClass("over"); } ); } HTML: Now don't just copy paste the above code snipet, understand and then use
OK... I've edited it to how I think it should look to work for me, but alas... it doesnt! If you could help me out again please I would really really appreciate it - I am trying to learn this stuff function initialiseDropdownMenus() { var options = { over: function() { $(this).addClass("over"); $("ul", this).bgiframe(); }, out: function() { $(this).removeClass("over"); }, timeout: 125 }; $("#nav li").hoverIntent(options); $("#nav li").hover( function() { $(this).addClass("over"); $("ul", this).bgiframe(); }, function() { $(this).removeClass("over"); } ); } HTML: Thanks once again
I'm going to post this again in the 'trading' services section as I'm happy to pay to get this sorted - anyone interested please head to: http://forums.digitalpoint.com/showthread.php?p=11065141#post11065141
I came across this before (the images of the main menu keep their focus when the flyout part is actived) http://www.cssplay.co.uk/menus/flyout_wall.html
If u would read carefully, that reads "JQUERY". You need to have JQuery added before you can expect that code to work. Just look into the code behind of your reference site.
Thanks but I'm no Javascript expert (or novice come to that) so JQuery means absolutely nothing to me. I've taken it as far as I'm able to at the moment which is why I'm now happy to pay for the help.
Thanks so much to beesystem for a great job! For those interested the problem was a simple CSS problem rather than javascript (but something I certainly wouldnt have picked up on myself!) replacing "ul li a:hover" with "ul li hover:a" was all it too Great job beesystem! iTrader coming your way