Toggle Menu Off/On using jQuery

Question

Hi,

I currently have a menu within a div called mnugrp and would like to add the following functionality onto my web page that will the allow the user to either hide the menu ("Menu Off") or show the menu ("Menu On")

With the main menu showing to start off with I want to be able to place this "Menu Off" item on the page, which would be a clickable item on the page and when the user clicks on the "Menu Off" hover item, toggle this to "Menu On" and hide the main menu and vice-versa.

Would also like to alternate the color of the text on each Menu Off(red color) and Menu On(green color).

Would appreciate your assistance on how to go about achieving this.

Thanks.

Answer 1

Attach a toggle to the "Menu Off" / "Menu On" element. Using the handlers you can change both the button element and menu, toggling both at the same time.

Something like:

var $button = $("#button"), $menu = $("#menu");
$button.toggle(function() {
  $button.text("Menu On").css("color", "green");
  $menu.show();
},
function() {
  $button.text("Menu Off").css("color", "red");
  $menu.hide();
});

Answer 2

Something like this should give you the basic hide/reveal functionality:

<input type="button" value="Menu Off" class="buttonOff" />
<input type="button" value="Menu On" class="buttonOn" />

<script class="text/javascript">
$("input.buttonOn").click(function(){ $("div.mnugrp").slideDown("slow"); });
$("input.buttonOff").click(function(){ $("div.mnugrp").slideUp("slow"); });
</script>

From there you can style the buttons any way you like (with css, or set properties...)

Answer 3

for alternating color, just use css on a ul, like so.

if your list looks like this:

<ul id="myList">
    <li>List Item 1</li>
    <li>List Item 2</li>
</ul>

your css would look like this:

#myList > li:nth-child(odd){
    background:#fff;
}
#myList > li:nth-child(even){
    background:#ccc;
}

as for the jQuery, jQuery isn't my native library, but I believe jQuery uses a similar syntax to the following to show or hide something on click :

    $('#hide_list_button').toggle(function() {
         $('#myList').hide();
    }, function() {
         $('#myList').show();
    });

Obviously the above code is untested, but it should get you started.