Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Magic Line navigation sliding triangle

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #40640
    remmie
    Member

    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! :)

    #113486
    JoniGiuro
    Participant

    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”)

    #113489
    Mottie
    Member

    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/)

    #113605
    remmie
    Member

    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!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.