JavaScript to jQuery syntax Building custom CSS horizontal menu

Question

This is a horizontal menu using traditional JavaScript.

function createcssmenu()
{
    var ultags = document.getElementById("navmenu").getElementsByTagName("ul");
    for (var t = 0; t < ultags.length; t++)
    {
        ultags[t].style.top = ultags[t].parentNode.offsetHeight -1 + "px";
        ultags[t].parentNode.onmouseover = function()
        {
            this.style.zIndex = 100;
            this.getElementsByTagName("ul")[0].style.visibility = "visible";
            this.getElementsByTagName("ul")[0].style.zIndex = 0;
        }
        ultags[t].parentNode.onmouseout = function()
        {
            this.style.zIndex = 0;
            this.getElementsByTagName("ul")[0].style.visibility = "hidden";
            this.getElementsByTagName("ul")[0].style.zIndex = 100;
        }
    }
}

if (window.addEventListener)
    window.addEventListener("load", createcssmenu, false);
else if (window.attachEvent)
    window.attachEvent("onload", createcssmenu);

I need to re-write it using jQuery syntax.

This is where I came to:

$(document).ready(function ()
{
    $('#navmenu ul').css('top', $('#navmenu ul').parent().height() - 1 + "px");

    $('#navmenu ul').parent().bind('mouseover', function ()
    {
        $(this).css('z-index', 100);
        $('#navmenu ul').css({ 'visibility': 'visible', 'z-index': 0 });
    });

    $('#navmenu ul').parent().bind('mouseout', function ()
    {
        $(this).css('z-index', 0);
        $('#navmenu ul').css({ 'visibility': 'hidden', 'z-index': 100 });
    });
});

It doesn't work correct.

I still have trouble with this.getElementsByTagName("ul")[0] line.

Look at JSfiddle http://jsfiddle.net/sublay/HCajr/

It should work a normal menu.

Thank you!

Related question JavaScript to jQuery syntax Still need help on Converting

rajesh kakawat · Accepted Answer · 2013-04-16 11:01:57Z

1

I think this is what you want FIDDLE

$(document).ready(function ()
{
    $('#navmenu ul').css('top', $('#navmenu ul').parent().height() - 1 + "px");
    $('#navmenu ul').each(function(){
        $(this).css('top', $(this).parent().height() - 1 + "px")
    });

    $('#navmenu ul').parent().bind('mouseover', function ()
    {
        $(this).css('z-index', 100);
        $('ul',this).css({ 'visibility': 'visible', 'z-index': 0 });
    });

    $('#navmenu ul').parent().bind('mouseout', function ()
    {
        $(this).css('z-index', 0);
         $('ul',this).css({ 'visibility': 'hidden', 'z-index': 100 });
    });
});

answered Apr 16, 2013 at 11:01

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

boz · Accepted Answer · 2013-04-16 11:14:09Z

1

Instead of trying to rewrite the above javascript, you could always just simplify it.

Have a look at this fiddle - http://jsfiddle.net/DeHQ5/

$(document).ready(function () {
    $('#navmenu ul').css('top', $('#navmenu ul').parent().height() - 1 + "px");

    $('#navmenu > li').bind('mouseover', function () {
        $(this).children('ul').css({
            'visibility': 'visible',
            'z-index': 0
        });
    });

    $('#navmenu > li').bind('mouseout', function () {
        $(this).children('ul').css({
            'visibility': 'hidden',
            'z-index': 100
        });
    });
});

The main change is the initial sibling selector #navmenu > li.

edited Apr 16, 2013 at 11:14

answered Apr 16, 2013 at 11:00

boz

4,9045 gold badges45 silver badges72 bronze badges

1 Comment

boz Over a year ago

As long you are using a version of jquery that is compatible with ie7 then they will be.

Collectives™ on Stack Overflow

JavaScript to jQuery syntax Building custom CSS horizontal menu

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related