CODEWITHSUNDEEP
javascriptjquerymenu
JamesBrownIsDead
JamesBrownIsDead

Reputation: 97

jQuery: Simple menu

I'm trying to learn jQuery by implementing a simple menu. I've got <div> elements that act as buttons and have links in them. I'm trying to add onclick events to the divs that navigate the browser to the link's address in the div. This is basically my pseudo-code. What would the real code be? How can I improve this? Any feedback appreciated!

// Iterate over each menu button

$('.masterHeaderMenuButton').each(function () {

    // Get the link in each button and set the button's onclick to 
    // redirect to the link's address

    var url = $('a', this).attr('href');

    this.click(function () {
        window.location.href = url;
    });

    // If the user is on the page for the current button, hilight it

    if (window.location.href === url) {
        $('a', this).addClass("masterHeaderMenuButtonSelected");
    }
});

Upvotes: 3

Views: 481

Answers (2)

dclowd9901
dclowd9901

Reputation: 6836

I don't actually use jQuery for such a simplistic task, especially if it involves page redirection. So unless you're looking to do some AJAX-style page loading, stick with standard HTML.

For that task, I use this sweet combo:

$('#nav_links li').live('click', function() {
    var ajax_link = $(this).attr('rel');                                      

    loadLink(ajax_link);
});

function loadLink(link){
    $('#content_window').css('position','relative');                              
    $('#content_window').animate({
        'left': '20px',
        'opacity': '0'
    }, 500, "swing", function() {

        $.ajax({
               url: '../sections/' + link,
               dataType: 'html',
               success: function(html) {
                   $('#content_window').html(html);
               }
        });
    });
}

Awesome, right?

Here's the HTML:

<ul id="nav_links">
    <li rel="setting-up.html"><span class="green">|</span>setting up<br></li>
    <li rel="features.html"><span class="purple">|</span>features<br></li>
    <li rel="more-uses.html"><span class="blue">|</span>more uses<br></li>
    <li rel="troubleshooting.html"><span class="yellow">|</span>troubleshooting</li>
</ul>

Have a fun.

Upvotes: 1

Jacob Relkin
Jacob Relkin

Reputation: 163308

Try this untested example:

$('.masterHeaderMenuButton a').each(function () {

    // Get the link in each button and set the button's onclick to 
    // redirect to the link's address

    var _this = this; // save this ref for click handler.
    $( this ).parent().click(function () {
        window.location.href = $(_this).attr('href');
    });

    // If the user is on the page for the current button, highlight it

    if (window.location.href === url) {
        $(this).addClass("masterHeaderMenuButtonSelected");
    }
});

Upvotes: 1

Related Questions