Bootstrap droppable Navigation menu - javascript

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

Related

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>

Dropdown menu with hover/mouseover event in jQuery

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.

Bootstrap Vertical Menu dropdown highlights NEXT menu item but not sub menus of CURRENT PARENT

all...
So here's my BOOTSTRAP code for a vertical DROP DOWN side bar menu:
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-nav">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li class="dropdown" id="dropdown1">
Projects <span class="caret"></span>
<ul class="dropdown-menu">
<li class="page-scroll">In Development</li>
<li class="page-scroll">Pre-Production</li>
<li class="page-scroll">Production</li>
</ul>
</li>
<li>Showcase</li>
<li>Dream Team</li>
<li>Contact</li>
<li class="dropdown" id="dropdown2">
My<br>Entertainment <span class="caret"></span>
<ul class="dropdown-menu">
<li class="page-scroll">Projects</li>
</ul>
</li>
<li>Privacy Policy</li>
<li>Terms of Use</li>
</ul>
</div><!-- /.navbar-collapse -->
So here are the images which best displays what's occurring:
Then when you hover on SUB MENU, the NEXT MENU is highlighted...
This is very confusing...
Any thoughts?
Thanks

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

Bootstrap collapsible side menu items

I am trying to make a bootstrap side menu that makes sub items collapsible.
Similar to http://jsfiddle.net/
However I want link items in the submenus and not such a complicated structure.
This is what I tried
<div class="row">
<!-- Main component for a primary marketing message or call to action -->
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="dropdown">
More<b class="caret"></b>
<ul class="dropdown-menu">
<li>Blog</li>
<li>About US</li>
<li>Jobs</li>
</ul>
</li>
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
</ul>
</div>
</div>
The dropable submenu does not push the rest of the items on the list down but rather appear on top of them. That makes it hard to navigate.

Would you not be better using panels and the collapse plugin to make a simple accordion? Here's an example to show what I mean. It does what I think you want.
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
More
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li>Blog</li>
<li>About US</li>
<li>Jobs</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
</ul>
</div>
</div>

Categories

Resources