- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Magic Line navigation sliding triangle
Hi,
Sorry this is a bit of a silly question, but I can’t work out what I’m missing…
I was modifying the Magic Line navigation…what I wanted was – isntead of a line – have a triangle slide down under the menu.
I got it working in a test:
[http://jsfiddle.net/Shc7x/](http://jsfiddle.net/Shc7x/ “magic line fiddle”)
But when I used the css I need to in the final site – it doesn’t work. Initially it loads correctly – but then it’s doe3sn’t slide to the centre of the nav item you are hovering over…
[http://jsfiddle.net/bvwMX/](http://jsfiddle.net/bvwMX/ “Updated magic line”)
Any help would be greatly appreciated! :)
http://jsfiddle.net/jonigiuro/bvwMX/2/
this was the problem:
#mainnav ul li:hover, #mainnav ul li.iehover{
position:relative;
}
Remove this css rule and it’ll work.
Also, this:
$(“.group li”).find(“a”)
can be written as:
$(“li a”)
Hi Remmie!
I ended up changing the css around and wrapping the level1 UL so the dropdown would position correctly.
Check out [this demo](http://jsfiddle.net/Mottie/bvwMX/3/)
Hi JoniGiuro and Mottie,
Thank you very much for your help! That did it!
If it’s not too much trouble, can I ask why the “position:relative” didn’t work – I’m still learning css and javascript so, just trying to avoid making the same mistake in a different setting :)
Thank you again for your help!