Member Avatar for 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

  • 2 Contributors
  • 3 Replies
  • 233 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by TrustyTony

Dani AI

Generated

Short version for : attach a single click handler to the MENU label that toggles the menu, stop propagation for clicks inside the menu, and close when the user clicks anywhere else. 's inline onclick works, but a small unobtrusive jQuery snippet is easier to maintain, supports keyboard users, and avoids inline attributes.

Try this pattern (keeps label opacity, toggles the list, adds outside-click and Esc-to-close):

jQuery(function($){
  var $menu  = $('#fl_menu');
  var $label = $menu.find('.label');
  var $list  = $menu.find('.menu');
  var speed  = 500;
  var closedOpacity = 0.75;

  $list.hide();
  $label.css('opacity', closedOpacity)
        .attr('role','button')
        .attr('tabindex',0)
        .attr('aria-expanded','false');

  $label.on('click keydown', function(e){
    if (e.type === 'keydown' && e.which !== 13 && e.which !== 32) return;
    e.preventDefault();
    var open = $list.is(':visible');
    $list.stop(true,true).fadeToggle(speed);
    $label.stop(true,true).fadeTo(speed, open ? closedOpacity : 1)
          .attr('aria-expanded', String(!open));
  });

  $(document).on('click keydown', function(e){
    if ((e.type === 'click' && $list.is(':visible')) || (e.type === 'keydown' && e.key === 'Escape')){
      $list.fadeOut(speed);
      $label.fadeTo(speed, closedOpacity).attr('aria-expanded','false');
    }
  });

  $menu.on('click', function(e){ e.stopPropagation(); });
});

Notes and troubleshooting:

  • If you previously just swapped .hover(...) for .click(...) it may have failed because .hover expects two handlers (in/out) while click/key handlers are single callbacks.
  • If the floating-menu script you used also binds hover on the same element, remove that binding first (e.g. unbind the hover events) or run this toggle after the plugin initializes.
  • For anchors with href="#" add e.preventDefault() on item clicks to avoid jumps.
  • Ensure jQuery is loaded before this script and that $ is available (use jQuery(...) if there is a conflict).
  • For better accessibility, keep the role, tabindex and aria-expanded as shown so keyboard users can open/close the menu.

Recommended Answers

All 3 Replies

Member Avatar for 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>
Edited by TrustyTony
Member Avatar for 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.

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.