Get menu to expand with .click intead of .hover

[Annuscha]

Hi,

I'm very new to javascript, if someone could help me I would really appreciate it.

I'm adding this floatable jquery menu to my site jquery-floating-menu. What I'm trying to do is get the menu to expand when clicked.

I have tried to add .click instead of .hover but it does not work.

<div id="fl_menu">
    <div class="label">MENU</div>
    <div class="menu">
        <a href="#" class="menu_item">An menu item</a>
        <a href="#" class="menu_item">A long menu item</a>
        <a href="#" class="menu_item">Item 3</a>
        <a href="#" class="menu_item">Another one</a>
        <a href="#" class="menu_item">A really, really long menu item</a>
        <a href="#" class="menu_item">Menu item 6</a>
        <a href="#" class="menu_item">And one more</a>
        <a href="#" class="menu_item">A tiny</a>
    </div>
</div>

<script type="text/javascript">
//config
$float_speed=1500; //milliseconds
$float_easing="easeOutQuint";
$menu_fade_speed=500; //milliseconds
$closed_menu_opacity=0.75;

//cache vars
$fl_menu=$("#fl_menu");
$fl_menu_menu=$("#fl_menu .menu");
$fl_menu_label=$("#fl_menu .label");

$(window).load(function() {
    menuPosition=$('#fl_menu').position().top;
    FloatMenu();
    $fl_menu.hover( // I have tried .click here but then it does nothing
        function(){ //mouse over
            $fl_menu_label.fadeTo($menu_fade_speed, 1);
            $fl_menu_menu.fadeIn($menu_fade_speed);
        },
        function(){ //mouse out
            $fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
            $fl_menu_menu.fadeOut($menu_fade_speed);
        }
    );
});
</script>

Please can someone help me.

Thanks

[TrustyTony]

You can add a onclick call in href of the menu item, this reacts to click of first menu item with alert

<div id="fl_menu">
    <div class="label">MENU</div>
    <div class="menu">
        <span onclick="alert('m1 pushed')" class="menu_item">An menu item</span>
        <span class="menu_item">A long menu item</span>
        <span class="menu_item">Item 3</span>
        <span class="menu_item">Another one</span>
        <span class="menu_item">A really, really long menu item</span>
        <span class="menu_item">Menu item 6</span>
        <span class="menu_item">And one more</span>
        <span class="menu_item">A tiny</span>
    </div>
</div>

[Annuscha]

At the moment when you hover over the menu tab it expands the menu_items, what I need is you to click on the menu tab to expand the menu_items. How can I add a click event instead of a hovering event.

[TrustyTony]

I do not know to put it in css but this I got to work as toggle show/hide on click menu:

First change the beginning of menu thus:

<div id="fl_menu">
    <div class="label" onclick="showElement('Menu1')">MENU</div>
    <div id='Menu1' class="menu">

Then add this to script section in body:

    function showElement(id){
        obj = document.getElementById(id);
        if (obj.style.display == "block"){
           obj.style.display = "none";
        } else {
           obj.style.display = "block";
        }
    }

Surely it is not the correct way to do it, it should be possible to use css definition to do same, but I am javascript/css newbie.