I am creating a menu like in uber help page here . How can i achieve the same menu type that is on click of the menu item the sub menu appears sliding and the other menu items disperses. how can i achieve this
<div class="side-memu">
<div class="wrap">
<ul>
<li>Lorem
<ul>
<li><p>dddd</p></li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
</div>
</div>
.side-memu { width:300px; background:#dfdfdf; height:200px;}
Why don't you try some responsive navigation plugins?
There are few navigation menu plugins available for your requirement which are,
1. slinky Navigation Menu
2. Jquery mmenu
3. Multi Level push menu
Try this:
.side-memu { width:300px; background:#dfdfdf; height:200px;}
.side-memu ul ul{display:none}
HTML:
<div class="side-memu">
<div class="wrap">
<ul>
<li>Lorem
<ul>
<li><p>dddd</p></li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</li>
<li>Lorem
<ul>
<li><p>CCCC</p></li>
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
</div>
</div>
Jquery:
$('.side-memu .wrap > ul > li ').click(function(){
$(this).children('ul').slideToggle();
});
$(document).mouseup(function (e)
{
var menu = $(".wrap > ul > li > ul");
if (!menu.is(e.target) // if the target of the click isn't the container...
&& menu.has(e.target).length === 0) // ... nor a descendant of the container
{
menu.slideUp();
}
});
Here is working example: https://jsfiddle.net/npLhmhe7/
Related
So I have something like this:
And some ultra simple jQuery that is toggling the child links when I click the parents ("Spec Sheet", "Instructions" etc) although when I click on one, they all open. Here is the code (is there a simple way to only open one parent per click)?:
$(document).ready(function(){
$("ul#dropdown-download-links li > a").unbind().click(function(e) {
var ulContainer = $(this).closest("ul");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
$(this).closest("ul"); is targeting the wrong element, this targets the first parent ul encountered going up the DOM tree from the clicked a tag
In the below $(this).closest("li").find("ul"); will target the first parent li tag encountered going up the DOM tree from the clicked a tag, then find the ul tag inside that li tag
$(document).ready(function() {
$("ul#dropdown-download-links li > a").unbind().click(function(e) {
var ulContainer = $(this).closest("li").find("ul");
e.preventDefault();
$(ulContainer).slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sticky-sidebar">
<ul class="dropdown-menu">
<li>
Where to Buy
</li>
<li>
<ul id="dropdown-download-links" data-sticky="sticky-aside" class="fast-links dropdown">
<div data-domain="http://wacdev.waclighting.com" style="display:none;"></div>
<div data-zspectempid="" style="display:none;">0</div>
<div data-ppid="" style="display:none;">333</div>
<div data-spec-sheet-url="" style="display:none;">/storage/SPECSHEET_PDF/R3CRDT_SPSHT.pdf</div>
<li>SPEC SHEET
<ul id="spec-sheet-option" style="display: none;">
<li><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>Oculux Architecture</li>
<li>Dim-to-Warm!</li>
</ul>
</li>
<li>INSTRUCTIONS
<ul id="spec-sheet-option" style="display: none;">
<li>Oculux Architecture</li>
<li>Dim-to-Warm!</li>
</ul>
</li>
<li>IES FILES
<ul style="display: none;">
<li>Some value</li>
<li>Some other value</li>
</ul>
</li>
<li>DIMMING REPORT
<ul style="display: none;">
<li>Some value</li>
<li>Some other value</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I have been searching for a solution but I can't find any that fits to what I woluld like to get. I have an icon and want the dropdown menu opened when HOVER in sreen size larger than 980px, and then when CLICK in screen size smaller than 980px.
This is the code.
/*Hide menu by default*/
$("#menu").hide();
/*When menu button is clicked, toggle the menu*/
$("#menu-btn").click(function() {
$("#menu").slideToggle();
});
$("#menuser").hide();
/*When menu button is clicked, toggle the menu*/
$("#ser_btn").click(function() {
$("#menuser").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Hamburger menu toggle button-->
<div id="menu-btn">
<img src="images/icon.png" style="height:50px; width:50px;">
</div>
<!--Menu-->
<nav id="menu">
<ul>
<li>INICIO</li>
<li>LA BELLE</li>
<li id="ser_btn">SERVICIOS
<ul id="menuser">
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
</ul>
</li>
<li>NOTICIAS</li>
<li>CONTACTO</li>
</ul>
</nav>
I would appreciate any help.
$(function() {
// check the event to listen to
var evt = $(window).width() > 980 ? // if the window width is greater than 980
"mouseenter mouseleave" : // then lesten for mouseenter and mousleave
"click"; // otherwise a click event
// hide it by default
$("#menu").hide();
// on the event evt toggle the menu
$("#menu-btn").on(evt, function() {
$("#menu").slideToggle();
});
// hide it by default
$("#menuser").hide();
// on the event evt toggle the menu
$("#ser_btn").on(evt, function() {
$("#menuser").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Hamburger menu toggle button-->
<div id="menu-btn">
<img src="images/icon.png" style="height:50px; width:50px;">
</div>
<!--Menu-->
<nav id="menu">
<ul>
<li>INICIO</li>
<li>LA BELLE</li>
<li id="ser_btn">SERVICIOS
<ul id="menuser">
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
<li>PELUQUERIA</li>
</ul>
</li>
<li>NOTICIAS</li>
<li>CONTACTO</li>
</ul>
</nav>
I would just do this using CSS in most cases:
<div id="menu-btn">
<img src="images/icon.png" style="height:50px; width:50px;">
</div>
<!--Menu-->
<nav id="menu">
<ul>
<li>INICIO</li>
<li>CONTACTO</li>
</ul>
</nav>
<style>
nav#menu { display: none }
#menu-btn:hover + nav#menu, nav#menu:hover { display:block }
</style>
Or more often I would nest the nav inside the button
<div id="menu-btn">
<img src="images/icon.png" style="height:50px; width:50px;">
<nav id="menu">
<ul>
<li>INICIO</li>
<li>CONTACTO</li>
</ul>
</nav>
</div>
<style>
#menu-btn nav { display: none }
#menu-btn:hover nav, #menu-btn nav:hover { display:block }
</style>
I want the menu to work like this. When you click Main1 it becomes active and the list will show, when you click it again the list will hide. When Main1 is active and you click Main2, then the Main1 should be inactive and Main2 active.
But my Javascript doesn't seem to make it work well. It makes the Main1 inactive when you click Main2 and the other way, but if you click on any of the active Main it doesn't become incactive. Please help
<div class="directory-section-list">
<ul class="list_item">
<li class="li_lvl lvl0" id="bx_1847241719_2">Main1</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul>
<ul class="list_item">
<li class="li_lvl lvl0" id="bx_1847241719_2">Main2</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul >
</div>
Javascript
$(' .list_item .lvl0').click(function(){
$(".list_item.active").removeClass("active");
$(this).parent().toggleClass('active');
});
$(' .list_item .lvl1').click(function(){
$(this).parent().toggleClass('active');
});
Try this,
$('.list_item .lvl0').click(function(){
$('.directory-section-list .active').removeClass('active');
if ($(this).parent().hasClass('active'))
{
$(this).parent().removeClass('active');
}
else
{
$(this).parent().addClass('active');
}
});
$('.list_item .lvl1').click(function(){
$(this).parent().toggleClass('active');
});
Please try this
HTML
<div class="directory-section-list">
<ul class="list_item">
<li class="li_lvl lvl0" id="bx_1847241719_2">Main1</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul>
</ul>
<ul class="list_item">
<li class="li_lvl lvl1" id="bx_1847241719_2">Main2</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul>
</ul>
</div>
Java Script
$(' .list_item .lvl0').click(function () {
$(' .list_item .lvl1').parent().removeClass("active");
$(this).parent().toggleClass('active');
});
$(' .list_item .lvl1').click(function () {
$(' .list_item .lvl0').parent().removeClass("active");
$(this).parent().toggleClass('active');
});
Sorry but your HTML List had a couple of errors the
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
will never be closed...
its all about the HTML Structure - i've done another change -> check the HTML Structure of this JS Fiddle: http://jsfiddle.net/marco_rensch/hzu76hgt/32/
I think you want something like this?
$(document).ready(function(){
$('.maindiv').hide();
$( "button" ).click(function() {
$('.maindiv[data-link=' + $(this).data('link') + ']').toggle("fade",300);
});
});
div {
background-color: green;
color: white;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button class="show" data-link="main1">Main1</button>
<button class="show" data-link="main2">Main2</button>
<div>
<div class="maindiv" data-link="main1">
<h1>This is main1</h1>
</div>
<div class="maindiv" data-link="main2">
<h1>This is main2</h1>
</div>
</div>
Well Thank you all for your help. I managed to do it taking some of your examples and making it work my own way. Thank you again. I will post the Javascript fix.
$(document).ready(function() {
$('.li_lvl').click(function () {
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
}
else {
$('.directory-section-list .active').removeClass('active');
$(this).parent().addClass('active');
}
});
This will toggle class active of the parent .li_lvl which is the ul.list_item. If parent has class active it will remove class active. If any other list_item will have class active whilst you click on the other list_item, it will remove class active on the other list_item and make class active on the list_item you clicked.
hi i have a unordered list menu, trying to make the sub-items slide down and up on clicking at the main items, i wrote a jQuery code that works but when click at open menu it close it and open again, but i was hoping it will just close it.
html
<div class="menuNav">
<ul>
<li><span>item_1</span>
<ul>
<li>sub-item_1-1</li>
<li>sub-item_1-2</li>
<li>sub-item_1-3</li>
<li>sub-item_1-4</li>
</ul>
</li>
<li><span>item_2</span>
<ul>
<li>sub-item_2-1</li>
<li>sub-item_2-2</li>
<li>sub-item_2-3</li>
<li>sub-item_2-4</li>
</ul>
</li>
<li><span>item_3</span>
<ul>
<li>sub-item_3-1</li>
<li>sub-item_3-2</li>
<li>sub-item_3-3</li>
<li>sub-item_3-4</li>
</ul>
</li>
</ul>
</div>
jQuery
$(document).ready(function() {
$('.menuNav ul li').click(function(){
$(this).parent().find('ul').slideUp("fast");
$(this).parent().find("li").removeClass('menuactive');
$(this).find('ul').slideDown("slow");
$(this).addClass('menuactive');
});
$('.menuNav ul .menuactive').click(function(){
$(this).parent().find('ul').slideUp("fast");
});
});
If the li has a class menuactive, call the slideUp() function and remove the class menuactive else call the slideUp() function on all uls, remove the class menuactive from all lis, call slideDown() on the one that was clicked and add the class menuactive to the one that was clicked.
$(document).ready(function() {
$('ul > li > ul').hide();
$('.menuNav > ul > li').click(function() {
if ($(this).hasClass('menuactive')) {
$(this).find('ul').slideUp('fast');
$(this).removeClass('menuactive');
} else {
$(this).siblings().find('ul').slideUp('fast');
$(this).siblings().removeClass('menuactive');
$(this).find('ul').slideDown('fast');
$(this).addClass('menuactive');
}
});
});
.menuactive {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menuNav">
<ul>
<li><span>item_1</span>
<ul>
<li>sub-item_1-1</li>
<li>sub-item_1-2</li>
<li>sub-item_1-3</li>
<li>sub-item_1-4</li>
</ul>
</li>
<li><span>item_2</span>
<ul>
<li>sub-item_2-1</li>
<li>sub-item_2-2</li>
<li>sub-item_2-3</li>
<li>sub-item_2-4</li>
</ul>
</li>
<li><span>item_3</span>
<ul>
<li>sub-item_3-1</li>
<li>sub-item_3-2</li>
<li>sub-item_3-3</li>
<li>sub-item_3-4</li>
</ul>
</li>
</ul>
</div>
need your help for menuTrigger javascript
I am making menu like, firstly display only titles but when clicked on menu icon(which right now dark grey box) it expands with further submenus.
I have almost achieved what I want, but (stuck)I want fade effect or animation effect when clicking on menu button to open menu.Which I am not getting proper syntax to put, plz do help me with that achieving effect.
You can check code on link:
http://jsfiddle.net/kBpqa/1/
JS:
(function ($) {
$(document).ready(function() {
/* --------- Main Submenu Open/Close --------- */
var menuOpen = false;
// Close menu when pointer leaves expanded menu
$('#headerContainer').mouseleave(
function() {
if( menuOpen == true)
closeSubMenu();
});
// Open/Close menu when user clicks on trigger link
$('.menuTrigger').click(
function(e){
e.preventDefault();
if( menuOpen == true)
closeSubMenu();
else
openSubMenu();
});
// Opens Main Submenu
function openSubMenu(){
$('#mainMenu').addClass('openMenu');
$('#mainMenu').find('ul.menu li ul').show();
var menuHeight = $('#mainMenu').height();
$('#header').height(menuHeight);
$('#mainMenu').find('ul.menu li ul').delay(300).css({'opacity' : 1});
$('#header .extIcons').show(500);
// $('#header .extIcons a').delay(500).css({'opacity' : 1});
// contractLogo();
if ( $(window).width() < 1400 ) {
$('#logo a').html('');
};
menuOpen = true;
}
// Closes Main Submenu
function closeSubMenu(){ $('#mainMenu').removeClass('openMenu');
$('#mainMenu').find('ul.menu li ul').css({'opacity' : 0});
$('#mainMenu').find('ul.menu li ul').delay(500).hide();
var menuHeight = $('#mainMenu').height();
$('#header .extIcons').hide();
$('#header').height(menuHeight);
// contractLogo();
$('#logo a').text('');
menuOpen = false;
}
/* --------- END Main Submenu Open/Close --------- */
});
}
(jQuery));;
HTML:
<div id="header">
<div id="headerContainer">
<div class="block block-menu-block">
<div id="mainMenu">
<ul class="menu">
<li class="first expanded menu-mlid-601 menu-601">About Us
<ul class="menu">
<li class="first leaf menu-mlid-606 menu-606">Title1</li>
<li class="leaf menu-mlid-585 menu-585">Title2</li>
<li class="leaf has-children menu-mlid-1409 menu-1409">Title3</li>
<li class="leaf has-children menu-mlid-616 menu-616">Title4</li>
</ul>
</li>
<li class="expanded active-trail active menu-mlid-1107 menu-1107">Work
<ul class="menu">
<li class="first leaf menu-mlid-1138 menu-1138">Title1</li>
<li class="leaf menu-mlid-1134 menu-1134">Title1</li>
<li class="leaf menu-mlid-1137 menu-1137">Title1</li>
<li class="leaf menu-mlid-1135 menu-1135">Title1 </li>
<li class="leaf menu-mlid-1260 menu-1260">Title1</li>
<li class="leaf menu-mlid-1261 menu-1261">Title1</li>
</ul>
</li>
<li class="expanded menu-mlid-1237 menu-1237">Research
<ul class="menu">
<li class="first leaf menu-mlid-1138 menu-1138">Title1</li>
<li class="leaf menu-mlid-1134 menu-1134">Title1</li>
<li class="leaf menu-mlid-1137 menu-1137">Title1</li>
<li class="leaf menu-mlid-1135 menu-1135">Title1 </li>
<li class="leaf menu-mlid-1260 menu-1260">Title1</li>
<li class="leaf menu-mlid-1261 menu-1261">Title1</li>
</ul>
</li>
<li class="expanded menu-mlid-1103 menu-1103">Current Events
<ul class="menu">
<li class="first leaf menu-mlid-1138 menu-1138">Title1</li>
<li class="leaf menu-mlid-1134 menu-1134">Title1</li>
<li class="leaf menu-mlid-1137 menu-1137">Title1</li>
<li class="leaf menu-mlid-1135 menu-1135">Title1 </li>
<li class="leaf menu-mlid-1260 menu-1260">Title1</li>
<li class="leaf menu-mlid-1261 menu-1261">Title1</li>
</ul>
</li>
<li class="last expanded menu-mlid-1105 menu-1105">Contact</li>
</ul>
<div class="menuTrigger">Menu</div>
</div>
</div>
</div><!-- end headerContainer -->
</div><!-- end header -->
CSS:
div.block-menu-block{float:right; margin-top:0px;background-color: #e7e7e7;}
#headerContainer{background-color:#e7e7e7;}
#mainMenu{margin:0;padding:0;overflow:auto;}
#mainMenu > ul{margin:0;margin-right:65px;padding:0;list-style-type:none;}
#mainMenu li{margin:0;position:relative;}
#mainMenu > ul > li > a{color:#111 !important;display:block;padding:1.6em 1em;font-weight:600; font-size:17px;}
#header a:hover{color:#111 !important;}
#mainMenu > ul > li{float:left;}
div.menuTrigger{padding:.8em 1em 0 0;margin:0;float:right;background:#ccc}
.menuTrigger a{width:40px;height:40px;text-indent:9999em;display:block;overflow:hidden;margin-top:6px;background:url(../images/menu-trigger.png) no-repeat;}
.menuTrigger a:hover{background-position:0 -40px;}
#mainMenu > ul > li > ul{margin:0 3em 3em 1.5em !important;padding:0;display:none; font-size:13px; line-height:1.2em;}
#mainMenu > ul > li > ul > li{max-width:9em;padding:.4em 0;font-size:1em !important;display:block;}
#menu .first leaf menu-mlid-606 menu-606 a{ font-size:14px;}
#mainMenu > ul > li > ul > li > a{font-weight:normal;color:#999 !important;}
li.current{background:#222222;float:left;}
You can use slideDown() or slideUp() instead of hide() function. And you can user fadeIn() instead of .dealy(500).css({opacity:1}) . To make your animation more smooth you can you easing in jquery for most of the functions.
Updated fiddle
You can use jquery slideToggle() for this. check this fiddle: fiddle
$('#mainMenu').find('ul.menu li ul').slideToggle('slow');