Optimizing jQuery functions for mobile menu
you can add some data attribute to the HTML like this    

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


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