Dropdown menu with hover/mouseover event in jQuery - javascript

I was trying to make and hover dropdown menu but I cant, well not really, I can make that the menu toggle just the specific items, with my code show all the items available:
Code here:
$(document).on('ready', function(){
var timeout = 0;
$('.nav').hover(function(){
$('.dropdown-menu').slideDown('fast');
},function(){
timeout = setTimeout(hideMenu,300);
});
$(".dropdown-menu").hover(function(){
clearTimeout(timeout);
},function(){
hideMenu();
});
});
function hideMenu(){
$(".dropdown-menu").slideUp('fast');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-static-top navbar-default">
<div class="container">
<div id="cls">
<div class="navbar-header center">
<div class="navbar-header">
<img class="logo" src="paruno_logo.png">
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">GIRL</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="n-smasd">
<ul>
<li class="dropdown-header title">Zapatos</li>
</ul>
<ul>
<li class="dropdown-header title">Botines</li>
</ul>
<ul>
<li class="dropdown-header title">Botas</li>
</ul>
<ul>
<li class="dropdown-header title">Sandalias</li>
</ul>
<ul>
<li class="dropdown-header title">Tenis</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/masculino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">HUMMIE</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">Casuales</li>
</ul>
<ul>
<li class="dropdown-header title">Mocasines</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">Botas</li>
</ul>
<ul>
<li class="dropdown-header title">Tenis</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption" data-toggle="dropdown">SOULCREATION</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ANGER</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">SOUL</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">URBAN</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ART</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ALAN ARROUND THE MUNDO</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption"> MAGNIFICIENT </a>
</li>
</ul>
</div>
<!-- /MB -->
</div>
</div>
</div>
To give more information, I use Bootstrap to make a responsive navbar and I don't want to use the Javascript from Bootstrap beacuse I want to get a pure Javascript.


Ok, don't know what do you mean by pure js when you using Jquery and bootstrap (which is using Jquery as well). But add that function to your code
$(document).on('mouseover','.dropdown-toggle',function(e){
$(this).parent('li').children('ul').slideDown('fast');
});
This will open dropdown menu. For hiding it you can research more.
Also I noticed that you have several elements with same id="drop-to". Id value should be unique! Name and class can be same on multiple elements.

Related

How to select the parent elements?

I am trying to make a sidebar that stores the last click link into the local storage and still opens the collapse links after the page reloads.
$(".clickedLink").parent().parent().css('background-color', 'green');
Could someone help me how to select elements?
Example: If I click the "PHP Advanced" link it will select the #5 & #6, also the #1 & #2. But not selecting the #3 & #4...
<a class="nav-link" aria-expanded="false">Programming</a> __#1__
<div class="collapse"> __#2__
<ul>
<li>
<a class="nav-link" aria-expanded="false">HTML</a> __#3__
<div class="collapse"> __#4__
<ul>
<li>HTML Basic</li>
<li>HTML Advanced</li>
<li>HTML Examples</li>
</ul>
</div>
</li>
<li>
<a class="nav-link" aria-expanded="false">PHP</a> __#5__
<div class="collapse"> __#6__
<ul>
<li>PHP Basic</li>
<li>PHP Advanced</li>
<li>PHP Examples</li>
</ul>
</div>
</li>
</ul>
</div>
I would appreciate it if anyone can help me out

You can do something like this. call parents('.collapse') to get all parents with given class. Then call prev() to get the links.
$('a').click(function() {
var parents = $(this).parents('.collapse');
parents.css('border-top', '1px solid red');
parents.prev().css('border-top', '1px solid blue');
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-link" aria-expanded="false">Programming</a> __#1__
<div class="collapse"> __#2__
<ul>
<li>
<a class="nav-link" aria-expanded="false">HTML</a> __#3__
<div class="collapse"> __#4__
<ul>
<li>HTML Basic</li>
<li>HTML Advanced</li>
<li>HTML Examples</li>
</ul>
</div>
</li>
<li>
<a class="nav-link" aria-expanded="false">PHP</a> __#5__
<div class="collapse"> __#6__
<ul>
<li>PHP Basic</li>
<li>PHP Advanced</li>
<li>PHP Examples</li>
</ul>
</div>
</li>
</ul>
</div>

how to highlight current click menu items in css?

this is My menu showing file, I need only highlighted current clickable menu item. currently active class item is highlighted
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li style="margin-left:20px;">
</li>
<li> # {{ Auth::user()->name }}</li>
<li class="active">PREGO<span class="sr-only">(current)</span></li>
<li>Edit Account</li>
<li>Projects</li>
<li>Collaborators</li>
<li>Todos</li>
</ul>
<ul class="nav nav-sidebar">
<li class="">Account</li>
<li class="">Help</li>
</ul>
</div>
how can do this?

.active a {
color: red;
}
<div class="col-sm-2">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contact us</li>
</ul>
</div>

Bootstrap droppable Navigation menu

I create this navigation menu with Bootstrap ..
How to make it display the dropdown menu on click for small devices but display on hover large ones?
Also whats the way to keep the menu (with burger) of small devices, on tablets as well?
<div class="collapse navbar-collapse btnCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Category
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-3">
<li>Sub
</li>
<li>Sub2
</li>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
Category
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-4">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<ul class="col-sm-4">
<li>Cat</li>
<ul class="thirdmenu">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub
<ul class="thirdmenu">
<li>SubSub</li>
<li>SubSub</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
Category<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-3">
<li>Sub</li>
<li>Sub</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
Css and Js are applied by Bootstrap... Not changes yet

To make work on hover on larger screens you can use this plugin.
If you want a hamburger menu, you should place it in Bootstrap .navbar as in official documentation

JQuery - Creating parent grandparent level text as object

I am trying to create previous parent and grandparent level text as object using function
For example on element grandchild11
<a class="level-12" href="#" parobj="['Child1','Child','Grandparent']" other="getOther(this)"> Grandchild11</a>
I am facing issue in creating object for attribute parobj as shown above for every anchor tag and I have even tried adding class with levels but failing to get exact output
is there anyway to get parobj as mentioned above either by hover or clicking anchor tag?
Codepen URL for reference:
http://codepen.io/divyar34/pen/bqMaQY
HTML:
$('a').attr('parObj', 'getParent(this)'); //adding attr parentObject with function to get parent,grandparent details
$('a').attr('other', 'getOther(this)'); //other Info attribute for ajax call
function getParent(val) {
var obj = [val];
obj.push($(val).parent().text());
return obj
}
function getOther(val) {
//just for reference, but originaly using internal api
$.get('otherinfo.html', {
option: val
}, function(data) {
console.log(data);
return data.name
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="level-1">Parent1
<ul class="level-2">
<li class="level-3"><a class="level-4" href="#">Grandparent</a>
<div class="level-4">
<ul class="level-5">
<li class="level-6">
<a class="level-7" href="#">Child</a>
<div class="level-7">
<ul class="level-8">
<li class="level-9"> <a class="level-10" href="#">Child1</a>
<ul class="level-10">
<li class="level-11"><a class="level-12" href="#"> Grandchild11</a></li>
<li class="level-11"><a class="level-12" href="#"> Grandchild11</a></li>
</ul>
</li>
<li class="level-9"> <a class="level-10" href="#">Child2</a>
<ul class="level-10">
<li class="level-11"><a class="level-12" href="#">GrandChild21</a></li>
<li class="level-11"><a class="level-12" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="level-6">
<a class="level-7" href="#"> Child2 </a>
<ul class="level-7">
<li class="level-8"><a class="level-9" href="#">GrandChild21</a></li>
<li class="level-8"><a class="level-9" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Parent1 -->
<div class="level-1">Parent2
<ul class="level-2">
<li class="level-3"><a class="level-4" href="#">Grandparent</a>
<div class="level-4">
<ul class="level-5">
<li class="level-6">
<a class="level-7" href="#">Child</a>
<div class="level-7">
<ul class="level-8">
<li class="level-7"> <a class="level-8" href="#">Child1</a>
<ul class="level-8">
<li class="level-9"><a class="level-10" href="#"> Grandchild11</a></li>
<li class="level-9"><a class="level-10" href="#"> Grandchild11</a></li>
</ul>
</li>
<li class="level-7"> <a class="level-8" href="#">Child2</a>
<ul class="level-8">
<li class="level-9"><a class="level-10" href="#">GrandChild21</a></li>
<li class="level-9"><a class="level-10" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
<li class="level-6">
<a class="level-7" href="#"> Child2 </a>
<ul class="level-7">
<li class="level-8"><a class="level-9" href="#">GrandChild21</a></li>
<li class="level-8"><a class="level-9" href="#">grandchild22</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Parent2 -->

Sidenav not showing when i minimise the browser

I am trying to do the Sidenav, when i have a full screen, the menu displays but when i minimize the browser the menu button shows but when i click it, it doesn't display anything. I don't know why. I am using Materialize css. http://jsfiddle.net/xdrL9e83/8/. When i run it in Jsfiddle it shows the Toggle icon being outside Navbar. I don't know why
<nav>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="material-icons"></i>
</div>
<ul class="hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<i class="mdi-navigation-menu"></i>
</nav>
The Javascript
<script>
$(".button-collapse").sideNav();
</script>

Your DIV is closed in the wrong place. It needs to close after the content of your Nav.
<nav>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="mdi-navigation-menu"></i>
<ul class="right hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
</div>
</nav>
http://jsfiddle.net/aaronfranco/xdrL9e83/14/

Put the menu toggle icon (mdi-navigation-menu) at the top..
<nav>
<i class="mdi-navigation-menu"></i>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Booking</a>
<i class="material-icons"></i>
</div>
<ul class="hide-on-med-and-down">
<li>Patients</li>
<li>Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">Patients</li>
<li class="bold">Patients History</li>
<li>Bookings</li>
<li>Notes</li>
<li>Add Patient</li>
</ul>
</nav>
Demo: http://codeply.com/go/mMvlUnsNRT

Categories

Resources