I am using Jquery mmenu for my application. My menu contains sub menus. Sub menus are expanded only when user clicks on the main menu item. I want that expanded by default when user clicks on the menu button. How is this possible? I have initialized as follows.
$(document).ready(function () {
console.log('mmenu loading');
$("#menu").mmenu({
slidingSubmenus: false
});
});
Any help is really appreciated.
Thank You
You can give the class ( "mm-opened" ) to the menu which have submenu.
<nav id="menu">
<ul>
<li>Home</li>
//MENU WITH SUBMENU ADD CLASS mm-opened
<li class="mm-opened">
About us
<ul>
<li>History</li>
<li> The team</li>
<li>Our address</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
AND slidingSubmenus to false.
$("#menu").mmenu({
slidingSubmenus: false
});
Related
I need to open a submenu, clicking on the parent element. I could do it this way
$(function(){
$('li.dropdown > a').on('click',function(event){
event.preventDefault();
$(this).toggleClass('selected');
$(this).parent().find('ul').first().toggle(300);
$(this).parent().siblings().find('ul').hide(200);
//Hide menu when clicked outside
$(this).parent().find('ul').parent().mouseleave(function(){
var thisUI = $(this);
$('html').click(function(){
thisUI.children(".dropdown-menu").hide();
thisUI.children("a").removeClass('selected');
$('html').unbind('click');
});
});
});
});
But, sometimes I have an actual link as a parent element. And I'd want to go to that link on click. And open the dropdown otherwise. Tried with a click on dropdown:before/ dropdown:after pseudoelements with no luck. And I can't manage to do it adding a span inside dropdown div.
Thank you for any help.
LE: My HTML structure looks like this
<nav id="main-nav">
<ul>
<li>Home</li>
<li class="dropdown">Main Cat
<ul class="dropdown-menu">
<li>Sub Cat1</li>
<li>Sub Cat2</li>
<li>Sub Cat3</li>
</ul>
</li>
<li>Second Cat</li>
</ul>
</nav>
I have a menu which I have working fine but I need a small change and that is I need the parent menu to toggle the submenu, currently if you click the parent menu the submenu appears but I need it so when you click the parent menu again it closes the sub menu.
You can see the menu in action here.
and this is the javascript that is for the menu:
$('.dropdown-toggle').click(function() {
$('.dropdown').css('display', 'none'); // Hide submenus when other submenus are clicked
$(this).next('.dropdown').toggle();
});
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle') && !$(target).parents().is('.dropdown-toggle')) {
$('.dropdown').hide();
}
});
This is the menu html
<nav class="main">
<a class="dropdown-toggle" href="#" title="Menu">Menu One</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>
Replace this code:
$('.dropdown-toggle').click(function() {
$('.dropdown').css('display', 'none'); // Hide submenus when other submenus are clicked
$(this).next('.dropdown').toggle();
});
With the code below:
$('.dropdown-toggle').click(function() {
var $currentDropdown = $(this).next('.dropdown');
$currentDropdown.siblings('.dropdown').not($currentDropdown).removeClass('toggled');
$currentDropdown.siblings('.dropdown').not($currentDropdown).hide();
$currentDropdown.toggleClass('toggled');
$currentDropdown.toggle();
});
That should do it.
I think this is the simplier way :)
Hope you helped
$(".dropdown").css('display', 'none');
$('.dropdown-toggle').click(function(e) {
if ($(this).next().is(":visible")){
$(this).next().hide();
}else{
$(".dropdown").hide();
$(this).next().show();
}
});
a {
display: block;
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><nav class="main">
<nav>
<a class="dropdown-toggle" href="#" title="Menu">Menu One</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
<a class="dropdown-toggle" href="#" title="Menu">Menu One</a>
<ul class="dropdown">
<li>Menu Item</li>
<li>Menu</li>
<li>Settings</li>
<li>Search</li>
</ul>
</nav>
I think this code will be enough.
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown').toggle();
});
Codepen Example
This can be done easily with Bootstrap:
<li class="submenu">
<i class="la la-user"></i>
<span> Main menue </span>
<span class="menu-arrow"></span>
<ul style="display: none;">
<li>sub menu 1</li>
<li> sub menu 2 </li>
<li> sub menu 3 </li>
</ul>
</li>
I found a fiddle that has the functionality I want. However, I'm not sure how to adjust the code (css) to get it to drop down the menu links.
When I click on the = I want the menu to drop down. The original code works by clicking on the parent and showing the child links. I assume it could work for my instance but not sure how.
What I want to accomplish is clicking the = drops Item 1 and Item 2. Otherwise they are hidden.
HTML
<!-- original code -->
<ul id="nav">
<li>Home</li>
<li class="parent">About
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li>Contact</li>
</ul>
<!-- my code -->
<div class="header-nav">
<nav class="nav-menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
</div>
JS
$(document).ready(function() {
$('.parent').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
// rename the JS to use the id/class for my script
The JSfiddle is here https://jsfiddle.net/cRsZE/982/
You have to update the click event in your jQuery to work for clicking the menu icon. This works:
$(document).ready(function() {
$('#menu-icon').click(function() {
$('.nav-menu ul').toggleClass('visible');
});
});
Edit As requested via the comments, to have the menu appear below the menu icon all you have to do is reposition the menu icon to be above the ul like so:
<div class="header-nav">
<nav class="nav-menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
</div>
And working Fiddle
Need To update Code Like That :
$(document).ready(function() {
$('#menu-icon').click(function() {
$('.nav-menu ul').toggleClass('visible');
});
});
For Documentation :https://jqueryui.com/menu/
Cleaned up code a little. Like this?
https://jsfiddle.net/cshanno/cRsZE/990/
$(document).ready(function () {
$('#menu-icon').click(function () {
$('.sub-nav').toggleClass('visible');
});
});
I'm creating a website for a project and i'm not allowed to use frameworks (so no bootstrap), i've now run into a problem where the navigation bar when collapsed (screen width under 800px) has all the individual links expanded, rather than being in individual categories.
I've uploaded this website to
here
The Html nav bar
<nav role="navigation" id="cssmenu">
<ul>
<li class="active">Home</li>
<li class="has-sub">Courses
<ul>
<li>Digital Media</li>
<li>Web Development</li>
<li>Journalism</li>
<li class="last">Information & Communications</li>
</ul>
</li>
<li class="has-sub">Facilities
<ul>
<li>Societies</li>
<li>Jobs and Placements</li>
<li class="last">Library</li>
</ul>
</li>
<li class="has-sub">Manchester & Student Life
<ul>
<li>Travel</li>
<li>Attractions</li>
<li class="last">Nightlife</li>
</ul>
</li>
<li class="has-sub">Student Help
<ul>
<li>Finance</li>
<li>Student Union</li>
<li class="last">Assistance</li>
</ul>
</li>
<li class="last">Contact</li>
</ul>
</nav>
The Jquery script
( function( $ ) {
$( document ).ready(function() {
// Cache the elements we'll need
var menu = $('#cssmenu');
var menuList = menu.find('ul:first');
var listItems = menu.find('li').not('#responsive-tab');
// Create responsive trigger
menuList.prepend('<li id="responsive-tab">Digi-Co</li>');
// Toggle menu visibility
menu.on('click', '#responsive-tab', function(){
listItems.slideToggle('fast');
listItems.addClass('collapsed');
});
});
} )( jQuery );
The css can also be found
here
Any help will be appreciated, i'm sure its just a simple overwriting syntax, but i can't be too sure, whether it's that or if it's a scripting problem.
Thank you.
The problem I am running into is that I have this responsive navigation built. I only want it to dropdown when the hamburger icon is clicked, but it will not work if I try targeting it. It only works if I target the entire navbar it is nested in.
Here is a link to a local jsFiddle here
HTML Code
<div class="toggleMenu">
<button type="button" class="navbar-toggle" id="toggle-btn"></button>
</div>
<nav class="level-nav hidden-md">
<ul>
<li>About Me</li>
<li>Pulses</li>
<li>Kudos</li>
<li>Blogs</li>
<li>
Resources <b class="caret"></b>
<div class="level-inner">
<span class="split"></span>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</li>
</ul>
</nav>
JQuery Code
$(document).ready(function(){
var mobileMenu = $(".level-nav li a");
$(mobileMenu).each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
/* Defined variables for main and sub multi-level navigations */
var subNav = $("#toggle-btn");
/* Function that activates the sub-navigation bar to toggle the sibiling which is the .level-nav */
$(subNav).click(function (e){
e.preventDefault();
$(this).siblings(".level-nav").toggle(175, "easeInQuad");
});
});
The button is not a sibling of the navigation, it's wrapped in a DIV that is a sibling of the navigation
$(this).closest('.toggleMenu').siblings(".level-nav").toggle(175, "easeInQuad");
And to use toggle() like that, you'll have to include jQuery UI as well
FIDDLE