2

Have menu same as:

<li id="nav_more" data-dropdown class='left'>
  <a href="#">MENU 
    <img src="/dropdown_arrow.png" alt="" />
  </a>
  <ul>
    <li>
      <a href="#">
        <img src="/user-info-icon.png" alt="" /> SubMenu 1
      </a>
    </li>
    <li>
      <a href="#">
        <img src="/chart-search-icon.png" alt="" /> SubMenu 2
      </a>
    </li>
  </ul>
</li>

Need disable show menus when hover mouse. I need show menus only if clicked in MENU.

How to?

Thank you

Erekle Maziashvili
  • 43
  • 11

2 Answers2

3

You can simple do it with JQuery in following:

$('.sub-menu').hide();

$("li:has(ul)").click(function() {
    $("ul",this).slideDown();
});

Just add class to your sub-menu's ul like:

<li id="nav_more" data-dropdown class='left'>
  <a href="#">MENU 
    <img src="/dropdown_arrow.png" alt="" />
  </a>
  <ul class="sub-menu">
    <li>
      <a href="#">
        <img src="/user-info-icon.png" alt="" /> SubMenu 1
      </a>
    </li>
    <li>
      <a href="#">
        <img src="/chart-search-icon.png" alt="" /> SubMenu 2
      </a>
    </li>
  </ul>
</li>

Check demo at JS FIDDLE

Above solution don't hide sub-menu if it clicked again. You could try this instead:

Add class menu to a:

<li id="nav_more" data-dropdown class='left'>
  <a href="#" class="menu">MENU
    <img src="/dropdown_arrow.png" alt="" />
  </a>
  <ul class="sub-menu">
    <li>
      <a href="#">
        <img src="/user-info-icon.png" alt="" /> SubMenu 1
      </a>
    </li>
    <li>
      <a href="#">
        <img src="/chart-search-icon.png" alt="" /> SubMenu 2
      </a>
    </li>
  </ul>
</li>

Add to your CSS display: none for sub-menu:

.sub-menu {
  display: none;
}

And use JQuery in following:

$(document).on('click', 'a.menu', function(e) {
  e.preventDefault();
  $(this).siblings('.sub-menu').slideToggle();
});

Check demo at JS FIDDLE

Infinity
  • 828
  • 4
  • 15
  • 41
0

Mr. @Caiuby Freitas I found CSS which works for this menu:

/* No Flickering */
[data-dropdown] ul, [data-box], [data-dombox], [data-store], [data-domballoon] { display: none;}

/* Dropdown Menu */
[data-dropdown] { position: relative; }
[data-dropdown=right] ul { right: 0px; }

/* Submenu */
[data-dropdown] ul {
 background-color: #fafafa;
 box-shadow: 0 4px 4px rgba(0,0,0,0.2);
 -webkit-box-shadow: 0 4px 4px rgba(0,0,0,0.2);
 -moz-box-shadow: 0 4px 4px rgba(0,0,0,0.2);
 border-radius: 4px 0 4px 4px;
 -moz-border-radius: 4px 0 4px 4px;
 -webkit-border-bottom-left-radius: 4px;
 -webkit-border-bottom-right-radius: 4px;
 -webkit-border-top-left-radius: 4px;
 font-size: 0.95em !important;
 text-shadow: 1px 1px 1px #fff !important;
 width: 190px;
 position: absolute;
 z-index: 10000;
 margin: 0;
 padding: 0 !important;
 right: 0;
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}

 [data-dropdown] ul li {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  float: none !important;
  text-align: left !important;
  text-transform: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.08);
 }

  [data-dropdown] ul li a {
   background: transparent !important;
   border-radius: 4px !important;
   -moz-border-radius: 4px !important;
   -webkit-border-radius: 4px !important;
   box-shadow: none !important;
   -webkit-box-shadow: none !important;
   -moz-box-shadow: none !important;
   margin: 0 !important;
   padding: 4px !important;
   color: #555 !important;
   border: 0 !important;
   display: block !important;
   float: none !important;
  }

  [data-dropdown] ul li a img {
   position: relative;
   margin-top: 1px;
   margin-right: 2px;
   opacity: 0.3;
   filter: Alpha(opacity=30);
  }

   [data-dropdown] ul li a:hover {
    background: #efefef !important;
    color: #000 !important;
    border: 0 !important;
   }

   [data-dropdown] ul li a:hover img {
    opacity: 0.8;
    filter: Alpha(opacity=80);
   }

   [data-dropdown] ul li a:active {
    background: #e6e6e6 !important;
    border: 0 !important;
    color: rgba(0,0,0,0.5) !important;
   }

And bite from JS:

Platform.module(function(b, a, c) {
    var d = function(b, a) {
        0 < a.length && (a.stop(!0, !0), c.show(a, {
            type: "fade",
            duration: 250
        }))
    };
    Platform.dropdowns = function() {
        b("[data-dropdown]").each(function() {
            var a = b(this),
                g = a.children(":eq(1)");
            g.hide();
            g.addClass("sb-dropdown-off"); - 1 !== a.attr("data-dropdown").indexOf("click") ? a.click(function(f) {
                f.preventDefault();
                g.is(":visible") || (d(a, g, {}), f.stopPropagation(), b(document).bind("click", function(a) {
                    a.preventDefault();
                    !b(a.target).is(g) && !b(a.target).parentsUntil(g).parent().is("ul") &&
                        (b(document).unbind("click"), 0 < g.length && c.hide(g, {
                            type: "fade",
                            duration: 250
                        }))
                }))
            }) : a.hover(function() {
                d(a, g, {})
            }, function() {
                0 < g.length && c.hide(g, {
                    type: "fade",
                    duration: 250
                })
            })
        })
    };
    c.autoload(Platform.dropdowns)
});
Erekle Maziashvili
  • 43
  • 11