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>
Related
This is the navbar html code:
<nav id="navbar">
<ul class="menu">
<li class="logo"><img src="img/LOGO JS BLANCO PNG.png"></li>
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Portfolio</li>
<li class="item">Knowledge</li>
<li class="item">Experience</li>
<li class="item">Contact</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
</ul>
</nav>
This is the navbar js code:
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
/* Toggle mobile menu */
function toggleMenu() {
if (menu.classList.contains("active")) {
menu.classList.remove("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
menu.classList.add("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
}
}
/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
item.addEventListener("keypress", toggleItem, false);
}
I want navbar to be closed when I click on a menu option. Any solution here? thanks
You can add the click to the menu instead of just the .toggle link
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
/* Toggle mobile menu */
function toggleMenu() {
menu.classList.toggle("active");
const icon = toggle.querySelector("a i.fas");
icon.classList.toggle('fa-bars');
icon.classList.toggle('fa-times');
}
/* Event Listeners */
menu.addEventListener("click", toggleMenu, false);
#navbar .item {
display: none;
}
#navbar .menu.active .item {
display: list-item;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<nav id="navbar">
<ul class="menu">
<li class="logo">
<img src="img/LOGO JS BLANCO PNG.png">
</li>
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Portfolio</li>
<li class="item">Knowledge</li>
<li class="item">Experience</li>
<li class="item">Contact</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
</ul>
</nav>
I want the current page of the navigation including the start page to get the css class "active".
In addition, if a submenu item is selected, the parent menu should also get this class.
$(document).ready(function(){
$("a[href*='" + location.pathname + "']").addClass("active");
});
.active {
background-color: #009EE3;
color:#fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<nav>
<ul>
<li class="first-menu">Home</li>
<li class="first-menu">Menu1
<ul>
<li class="sub-menu">Menu1Sub1</li>
<li class="sub-menu">Menu1Sub2</li>
<li class="sub-menu">Menu1Sub3</li>
<li class="sub-menu">Menu1Sub4k</li>
</ul>
</li>
<li class="first-menu">Menu2</li>
</nav>
</div>
right now i have this code to indicate on the nav links what id i am on.
But how can i also add a scroll function, if i scroll down to specific id then add the class to the right nav link. Thank you.
$(window).load(function(){
$("nav.site-nav ul.open.desktop li a").click(function() {
$('.current_yes').removeClass('current_yes');
$(this).addClass("current_yes");
});
});
jQuery(document).ready(function($){
var url = window.location.href;
$('nav.site-nav ul.open.desktop li a').filter(function() {
return this.href == url;
}).closest('a').addClass('current_yes');
});
and the nav look like this:
<div class="wrapper">
<nav class="site-nav">
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
<ul class="open desktop">
<li><a id="link1" href="index.php#"><i class="site-nav--icon"></i>Hem</a></li>
<li><a id="link2" href="index.php#products-anchor"><i class="site-nav--icon"></i>Produkter</a></li>
<li><a id="link3" href="index.php#uthyres-anchor"><i class="site-nav--icon"></i>Uthyres</a></li>
<li><a id="link4" href="#rent"><i class="site-nav--icon"></i>Kontakta</a></li>
</ul>
</nav>
</div>
The css for current link:
.current_yes {
border-bottom: 2px solid #732813;
}
I've got a custom header / nav where I have two elements that represent two sections of a website. I want to be able to hover over one of the elements and display a particular menu. However the Menu list isn't a child of the element. So I can't do it with CSS.
The problem i'm having is when I hover over the element, the menu shows. But I move my mouse to hover over the menu and and as soon as move away from the element the menu disappears. I have tried adding a display:block to the manu items, with a .delay() method running but there is still a slight flicker when moving the mouse away from the div.
Here is my current code:
//HTML
<header>
<a class='hoverOverOne'>Hover over me to show menu</a>
<a class='hoverOverTwo'>Hover over me to show menu</a>
<nav>
<ul id='menuToShow-One'>
<li>testing</li>
<li>testing</li>
</ul>
<ul id='menuToShow-Two'>
<li>testing</li>
<li>testing</li>
</ul>
</nav>
</header>
// jQuery
jQuery("a.hoverOverOne").hover(
function () {
jQuery('#menuToShow-One').slideDown('medium').delay(500);
},
function () {
jQuery('#menuToShow-One').slideUp('medium').delay(500);
});
jQuery("a.country").hover(
function () {
jQuery('#menuToShow-Two').slideDown('medium').delay(500);
},
function () {
jQuery('#menuToShow-Two').slideUp('medium').delay(500);
});
// CSS
#menuToShow-One{
display:none;
}
#menuToShow-Two{
display:none;
}
Any help would be much appreciated.
Thanks.
$(function(){
$("a.hoverOverOne, a.hoverOverTwo").hover(function () {
var menu = '#menu'+this.id;
$('.menu').not(menu).slideUp(0);
$(menu).slideDown('medium');
});
$("ul.menu").mouseleave(function () {
$(this).slideUp('medium');
});
});
a.hoverOverOne{
margin-right: 20px;
}
#menuToShow-One{
display:none;
}
#menuToShow-Two{
display:none;
}
nav{
display:inline-block;
}
ul li{
display:block;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<header>
<a class='hoverOverOne' id="ToShow-One">Hover over me to show menu 1</a>
<a class='hoverOverTwo' id="ToShow-Two">Hover over me to show menu 2</a><br />
<nav>
<ul id='menuToShow-One' class="menu">
<li>testing menu 1</li>
<li>testing menu 1</li>
</ul>
<ul id='menuToShow-Two' class="menu">
<li>testing menu 2</li>
<li>testing menu 2</li>
</ul>
</nav>
</header>
Check the following solution. No need for JS to power this one.
#hover-one:hover ~ nav ul#menuToShow-One,
#hover-two:hover ~ nav ul#menuToShow-Two {
max-height: 500px;
transition: 0.2s;
}
#menuToShow-One,
#menuToShow-Two {
max-height: 0;
transition: 0.2s;
transition-delay: 1s;
overflow: hidden;
}
nav:hover #menuToShow-One,
nav:hover #menuToShow-Two {
max-height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<a id="hover-one" href='#hoverOverOne'>Hover over me to show menu</a>
<a id="hover-two" href='#hoverOverTwo'>Hover over me to show menu</a>
<nav>
<ul id='menuToShow-One'>
<li>testing 1</li>
<li>testing 1</li>
</ul>
<ul id='menuToShow-Two'>
<li>testing 2</li>
<li>testing 2</li>
</ul>
</nav>
</header>
I have vertical menu. when I click on each menu it should load the content and should display..
here I have my code
<ul id="menu">
<li class="selected">Home</li>
<li>About</li>
<li>Technologies</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home" >
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
so if i click on home menu in div it should show the home page..first function is to highlight the selected menu
and here my jquery
function highlightTab(link_id){
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_"+link_id).parent().addClass('selected');
}
$(document).ready(function()
{
$('#selected').on('click','a',function()
{
$('.display:visible').fadeOut();
$('.display[id='+$(this).attr('id')+']').fadeIn();
});
});
this is my css code
ul#menu li.selected{
background-color:black;
color:white;
}
.display
{
left: 734px;
position: relative;
}
How to do it?
There were some thing wrong with your code:
You've 2 the same ID's (the A and the DIV), updated with data-target.
You were searching for "#selected" instead of ".selected", updated this to #menu.
In JSFiddle the highlightTab function isn't being found. Why not mixing those two like here?
HTML:
<ul id="menu">
<li class="selected">Home
</li>
<li>About
</li>
<li>Technologies
</li>
<li>Services
</li>
<li>Contact Us
</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home">
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
JS:
function highlightTab(link_id) {
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_" + link_id).parent().addClass('selected');
}
$(document).ready(function () {
$('#menu').on('click', 'a', function () {
$('.display:visible').fadeOut();
$('.display[id="' + $(this).data('target') + '"]').fadeIn();
});
});
CSS:
ul#menu li.selected {
background-color:black;
color:white;
}
.display {
display: none;
}