1
\$\begingroup\$

I'm using Bootstrap 3 as the front-end framework for this. It is quite simple but I feel I'm doing it wrong. I'm sure this code can be optimized not to duplicate the $('a[href=""]') functions but I just can't wrap my head around it.

For now, this code is only for mobile. I'll have to figure out how to control the menu behavior for larger screens (not requested at this time).

jsFiddle (you need to resize your browser to see the effect)

$(document).ready(function () { 

/*
 * Modification du boutton MENU pour CLOSE
 */ 

$('button').on('click', function(e){
    var str = $(this).text();
    if(str =="CLOSE"){
        $(this).html("MENU");
    }
    else{
        $(this).html("CLOSE");
    }

    if(str == "MAIN MENU"){
        e.stopPropagation();
        $('#menuContacts').css('display', 'none');
            $('#menuWines').css('display', 'none');
            $('#menuMain').css('display', 'block');

            $('button').html('CLOSE');
    }
});

/*
 * Modification du menuMain pour le menuContacts
 */

$('a[href="#contacts"]').on('click', function(e){
    e.preventDefault();
    $('#menuMain').css('display', 'none');
    $('#menuContacts').css('display', 'block');

    $('button').html('MAIN MENU');

});

/*
 * Modification du menuMain pour le menuWine
 */

$('a[href="#wines"]').on('click', function(e){
    e.preventDefault();
    $('#menuMain').css('display', 'none');
    $('#menuWines').css('display', 'block');

    $('button').html('MAIN MENU');

});
});
\$\endgroup\$
1
\$\begingroup\$

you can add some data attribute to the HTML like this

<ul id="menuMain" class="nav navbar-nav">
    <li><a href="#preface">Préface</a></li>
    <li><a href="#maison">Maison Ilan</a></li>
    <li><a href="#history">History</a></li>
    <li><a href="#vineyard">Vineyard</a></li>
    <li><a href="#cuverie">Cuverie</a></li>
    <li><a href="#chai">Chai</a></li>
    <li><a href="#wines" data-menu="#menuWines">Wines</a></li>
    <li><a href="#contacts" data-menu="#menuContacts">Contacts</a></li>
</ul>    

so instead of .on('click') for each link you can do something like this

//all the links in #menuMain
$('#menuMain a').on('click', function(e){
    e.preventDefault();
    $('#menuMain').css('display', 'none');
//$(this).data("menu") have the id of the element to display
    $($(this).data("menu")).css('display', 'block');
    $('button').html('MAIN MENU');
});     

http://jsfiddle.net/zXe7C/4/
for the example i only add the data attribute to the last two links but if you dont have something on the attribute or some element with that id then it will only hide "menuMain" but you can check first if the element $($(this).data("menu")) exists

\$\endgroup\$
  • \$\begingroup\$ Thanks a lot for your help @Abraham Uribe. It works just great as it is. Using data-menu is pretty clever, from a junior perspective as I am, anyways. :) \$\endgroup\$ – TTC1 Oct 9 '13 at 14:38
  • \$\begingroup\$ One little quirks though, if you click on a menu that doesn't have the data-menu attribute, the button reverts back to MAIN MENU instead of MENU. \$\endgroup\$ – TTC1 Oct 9 '13 at 14:55
  • \$\begingroup\$ if it need to revert to MENU then you can check if the element exists then change the html to menu \$\endgroup\$ – Abraham Uribe Oct 9 '13 at 15:19
  • 1
    \$\begingroup\$ Yes. Just solved it using your check idea in your initial response "$(this).data("menu")"jsFiddle \$\endgroup\$ – TTC1 Oct 9 '13 at 15:24
  • \$\begingroup\$ also it will be good to change $('button') for some id like $('#menubutton') and add the id to your html so you could add more <button> without problems \$\endgroup\$ – Abraham Uribe Oct 9 '13 at 15:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.