CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
codek
codek

Reputation: 343

Menu - Submenu and active links on ajax loaded content

I have problems with the active items of the menu and a submenu that toggles: When I click over "Prensa" or "Contacto" the script adds the active well to menu item. For example "Prensa" gets the active and if I click on "Contacto", it get's the active removing it from "Prensa".

The problem is when I click on "Artworks" it get's the active class but also all the links from it's submenu. Also if I click again over "Prensa" the submenu from "Artworks" stays open and all the links of "Artworks" still gets the active class (Also the "artworks" link itself).

Another problem is that when I click over a submenu item, it adds just a "class" without anything more, so I can't add css to make it active.

Here it's my markup:

        <ul id="menu" class="menu">
            <li id="artworks"><a href="#">ARTWORK</a>
                <ul class="submenu">
                    <img src="../img/submenu.png" alt="submenu" width="62" height="1" />
                    <li><a href="#" id="sweetlife">Sweet Life</a></li>
                    <li><a href="#">Pleasure</a></li>
                    <li><a href="#">Bienal de la habana</a></li>
                    <li><a href="#">Estudios de craneos</a></li>
                </ul>
            </li>
            <li id="prensa_nav"><a href="#">PRENSA</a></li>
            <li id="contacto_nav"><a href="#">CONTACTO</a></li>
        </ul>

Here it's my js:

    // active menu item
$(function() {
    $('#menu li').click(function() {
        $('#menu li').each(function() {
            $(this).removeClass('active');
        });
        $(this).addClass('active');
    });
});


    /* Menu dropdown */
    $(document).ready(function($){

    // Add class of drop if item has sub-menu
    $('ul.submenu').closest('li').addClass('drop');

    // Left Sidebar Main Navigation
    var menu_ul = $('.menu > li.drop > ul'),
        menu_a  = $('.menu > li.drop > a');

    menu_ul.hide()    

    menu_a.click(function(e) {
        e.preventDefault();
        if(!$(this).hasClass('active')) {
            menu_a.removeClass('active');
            menu_ul.filter(':visible').slideUp('normal');
            $(this).addClass('active').next().stop(true,true).slideDown('normal');
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true,true).slideUp('normal');
        }
    });

});

Can someone help me out to fix these problems?

Upvotes: 0

Views: 3013

Answers (2)

Saeed
Saeed

Reputation: 3775

You use this style code

 $(function() {
   $('#menu li').click(function() {
        $(".active").removeClass('active');
        $(this).addClass('active');
   });
});

$(document).ready(function($){

// Add class of drop if item has sub-menu
$('ul.submenu li:first').addClass('drop');
var menu_ul = $('.menu li.drop ul'),
menu_a  = $('.menu li.drop a');

best regards

Upvotes: 0

Willem Van Bockstal
Willem Van Bockstal

Reputation: 2263

You have to style only the direct child of an active menu an not all other children.

For the scripting, the click on a submenu is called twice: once on the child and once on the parent. First call sets the class on the child, but second call removes it instantly. You can prevent this 'propagation' of the click in jQuery.

Example: http://jsfiddle.net/willemvb/q96FK/

Upvotes: 1

Related Questions