I have five parent menu items, and the third one has a child dropdown menu. When you click on the third parent menu, the dropdown menu shows up, but it pushes the fourth and fifth parents menu items to below.I'd like the dropdown menu to be below the parent menu row, without pushing any parent menu items. It's a Shopify site.
http://jsfiddle.net/3s2qhhx3/
//Main nav expanders
$(document).on('click', '#navpanel .mainnav .title', function() {
$(this).parent().addClass('active').siblings().removeClass('active');
$(window).trigger('reup-navbar');
});
var navSpeed = 150;
$(document).on('click', '#navpanel .mainnav button', function() {
//Prep animation on sublist
if ($(this).parent().hasClass('expanded')) {
$(this).html('<span class="icon-plus"></span>');
$(this).siblings('ul').stop(true, true).css('display', 'block').slideUp(navSpeed, 'linear', function() {
$(this).parent().toggleClass('expanded');
$(window).trigger('reup-navbar');
});
} else {
$(this).html('<span class="icon-cross"></span>');
$(this).siblings('ul').stop(true, true).css('display', 'none').slideDown(navSpeed, 'linear', function() {
$(window).trigger('reup-navbar');
});
$(this).parent().toggleClass('expanded');
}
$(window).trigger('reup-navbar');
});
$(document).on('click', '#navpanel .mainnav a[href="#"]', function() {
$(this).siblings('button').trigger('click');
return false;
});
#navbar #navpanel .mainnav {
position: relative;
margin: 0 auto;
}
#navbar #navpanel .mainnav > ul > .active > ul {
display: block;
text-align: center;
}
#navbar #navpanel .mainnav li li {
position: relative;
display: inline;
text-align: center;
}
<div class="mainnav">
<ul class="tier1">
<li id="blog">blog</li>
<li class="">
<a class="tier1title" href="/collections/newarrivals">New Arrivals</a>
</li>
<li class="">
<a class="tier1title" href="/#">Categories</a>
<ul class="tier2">
<li class="">
Knits
</li>
<li class="">
Tops
</li>
<li class="">
Dresses
</li>
<li class="">
Bottoms
</li>
. . .
<li class="">
<a class="tier1title" href="/collections/sale">Sale</a>
</li>
<li class="registerform">
...
</li>
</ul>
</div>
You need to set the position of your sub-menu to absolute. Also, you need to change your first <li> display to inline-block instead of inline.
CSS:
.mainnav {
position: relative;
margin: 0 auto;
}
.mainnav ul > li {
display: inline-block;
text-align: center;
}
.mainnav ul li:hover ul {
display:block;
background:red;
height:auto;
width:auto;
}
.mainnav ul li ul {
position: absolute;
display: none;
padding: 0;
margin: 0;
}
Hope it helps. Updated Fiddle..
Related
I am trying to make a responsive navigation on my Wordpress site where I am building a template from scratch. I have decent experience with HTML and CSS(SCSS) some PHP but not so much Javascript or the Wordpress way.
I am looking to remove the :hover element on my sub menu under the 'services' li and instead have it trigger on click on tablet and mobile devices. I understand it will be similar to how I have done the mobile menu button but I am struggling to figure out the best way to do it.
Can anyone give me an idea please? Thanks in advance.
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
header {
height: 128px;
border-bottom: 1px solid #f0f0f0;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 4000;
background: white;
}
header .nav-container {
max-width: 100em;
margin: auto;
display: flex;
justify-content: space-between;
z-index: 45;
padding: 0 1.5rem;
}
header .nav-container .logo {
width: 14%;
padding-top: 2.8rem;
}
header .nav-container p {
display: none;
}
#media only screen and (max-width: 600px) {
header .nav-container p {
display: flex;
}
}
header .nav-container nav {
padding-top: 2rem;
}
#media only screen and (max-width: 600px) {
header .nav-container nav {
display: none;
}
}
#media only screen and (max-width: 600px) {
header .nav-container nav ul {
flex-direction: column;
display: flex;
}
}
header .nav-container nav ul li {
position: relative;
display: inline-block;
}
header .nav-container nav ul li a {
display: inline-block;
transition: all 0.5s linear;
text-decoration: none;
padding: 16px 10px;
color: #00458B;
}
header .nav-container nav ul li a:hover {
color: #00458B;
}
header .nav-container nav ul li ul {
display: none;
background: white;
position: absolute;
top: 100%;
width: 160px;
padding: 0;
z-index: 500;
}
header .nav-container nav ul li ul li, header .nav-container nav ul li ul a {
width: 100%;
}
header .nav-container nav ul li:hover ul {
display: block;
}
header .nav-container nav ul .menu-item-40 a {
padding: 0;
}
<header>
<div class="nav-container">
<p onclick="myFunction()"> Click</p>
<nav class="nav" role="navigation" id="myDIV">
<ul>
<li class="nav-item">Home
</li>
<li class="nav-item">About us
</li>
<li class="nav-item">Services
<ul class="sub-menu">
<li class="nav-item ">Windows
</li>
<li class="nav-item">Glass
</li>
<li class="nav-item">Doors
</li>
<li class="nav-item">Roofline
</li>
</ul>
</li>
<li class="nav-item">Our Work
</li>
<li class="nav-item">Contact Us
</li>
</ul>
</nav>
</div>
</header>
Wrap it with Media Query so it doesn't work on Mobile and tablet.
header .nav-container nav ul li:hover ul {
display: block;
}
This is only one of many possible solutions, but I think it gives you an idea off how to solve the problem.
First you have to wrap following selector with a media query to disable the hover when your mobile button shows up. In your case it would look like this:
#media only screen and (min-width: 601px) {
header .nav-container nav ul li:hover ul {
display: block;
}
}
To attach the toggle functionality I would suggest to add a js-submenu-toggle class to all a elements which have a submenu as sibling. I prefer to add a js prefix to my classes to mark them as classes that are only used in combination with javascript and have no styling attached to them:
<ul>
...
<li class="nav-item">
Services
<ul class="sub-menu">
...
</ul>
</li>
...
</ul>
For the actual functionality use the toggle function to add and remove an is-active class on click to the submenu element and the matchMedia function to make the toggle functionality only available when your mobile menu button is visible:
document.addEventListener('click', event => {
const element = event.target;
const mediaQuery = window.matchMedia('(max-width: 600px)');
if(element.matches('.js-submenu-toggle') && mediaQuery.matches) {
// Prevents the default behaviour of the `a`-tag with an `href`-attribute
event.preventDefault();
element.nextElementSibling.classList.toggle('is-active');
}
});
The is-active class should look like this:
.is-active {
display: block;
}
Hi everyone hope you are all well, just wondering if someone could give me hand I have a nav bar that when screen is max-width 750px the nav links turn into toogle menu. My problem is I can't seem to get the toggle menu to open and close when I click on it,I have googled and tried a few different code sorces with no luck.
Any help will be very appreciated.
This is my current code.
$(document).ready(function() {
$("menu-toggle").on("click", function() {
$('nav').toggleClass('showing');
$('.nav ul').toggleClass('showing');
});
});
header .menu-toggle {
display: none;
}
/***** MEDIA QUERIES*****/
#media only screen and (max-width: 750px) {
header {
position: relative;
}
header ul {
width: 100%;
background: #666666;
max-height: 0px;
overflow: hidden;
}
.showing {
max-height: 100em;
}
header ul li {
width: 100%;
}
header ul li ul {
position: static;
display: block;
width: 100%;
}
header ul li ul li a {
padding: 10px;
background: #666666;
color: #ffffff;
padding-left: 50px;
}
header ul li ul li a.logout {
color: #ff0000;
}
header .menu-toggle {
display: block;
position: absolute;
right: 20px;
top: 20px;
font-size: 1.9em;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<header>
<div class="logo">
<img src="img/logo.png" alt="logo" />
</div>
<i class="fa fa-align-justify menu-toggle"></i>
<ul class="nav">
<li>Home</li>
<li>About</li>
<!--<li>Login</li> -->
<li>
<a href="#">
<i class="fa fa-user"></i> Nathan Ashbury
<i class="fa fa-chevron-down"></i>
</a>
<ul>
<li>Dashboard</li>
<li>Logout</li>
</ul>
</li>
</ul>
</header>
Modify the jquery .menu-toggle to toggle onclick() function
$(document).ready(function () {
$(".menu-toggle").on("click", function () {
$('.nav').toggleClass('showing');
$('.nav ul').toggleClass('showing');
});
});
Your nav is a class, use $('.nav').
You have not written CSS for the class name .showing for .nav or .nav ul. So, nothing will happen even if you click.
I want to create a simple dropdown menu when a user clicks on an image. Currently I'm using CSS hover but it doesn't stay so I want to convert it to a JS onClick function.
<html>
<head>
<style>
ul {
text-align: left;
display: inline;
margin: 0;
list-style: none;
}
ul li {
display: inline-block;
position: relative;
}
ul li ul {
padding: 0;
position: absolute;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
display: block;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
</style></head><body>
<ul>
<li>
<img src="https://cdn1.iconfinder.com/data/icons/thincons/100/menu-128.png" width="20px;" height="18px;"/>
<ul class="lang">
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
</ul>
</body>
</html>
With a little jQuery, we can easily toggle a class on or off to represent 'showing' the menu:
$("#menu").click(function(){
$(this).toggleClass("activated");
});
And changing the CSS (instead of :hover) to:
ul li.activated ul {
display: block;
opacity: 1;
visibility: visible;
}
The HTML only needs that first li element to have an id, which lets us use jQuery to bind a click event to it.
<ul>
<li id="menu">
You can see it all in action on this fiddle.
Edit: For a non-jQuery solution, you can use the following Javascript code:
var myEl = document.getElementById('menu');
myEl.addEventListener('click', function() {
this.classList.toggle('activated');
}, false);
I'mm trying to design a specific type of navbar in javascript/jquery.
I cannot get mouseenter() and mouseleave() to work correctly when the mouse passes between the li objects.
Here is my code. Any ideas?
http://jsfiddle.net/richofwombwell/1v8L0pdz/38/
function inversebuttonon(liId, aId) {
$(liId).css('background-color', 'white');
$(aId).css('background-color', 'white');
$(aId).css('color', '#0086CA');
}
function inversebuttonoff(liId, aId) {
$(liId).css('background-color', '#0086CA');
$(aId).css('background-color', '#0086CA');
$(aId).css('color', 'white');
}
function showselectedmenu(liclass, aclass) {
$('.menu').css('max-height', '100px');
$(liclass).css('display', 'inline');
$(aclass).css('display', 'inline');
}
function dontshowselectedmenu(liclass, aclass) {
$('.menu').css('max-height', '0px', 'none');
$(liclass).css('display', 'none');
$(aclass).css('display', 'none');
}
$('#n-2').mouseenter(function () {
inversebuttonon('#n-2', '#a2');
showselectedmenu('.tmenuli', '.tmenua1');
});
$('.menu').mouseleave(function () {
dontshowselectedmenu('.tmenuli', '.tmenua1');
inversebuttonoff('#n-2', '#a2');
});
$('#n-3').mouseenter(function () {
inversebuttonon('#n-3', '#a3');
showselectedmenu('.tmenuli2', '.tmenua2');
});
$('.menu').mouseleave(function () {
dontshowselectedmenu('.tmenuli2', '.tmenua2');
inversebuttonoff('#n-3', '#a3');
});
Your script does not work correctly because your html code is invalid (you are nesting DIVs instead of list elements. That forces the browser to correct your code (the way it wants to).
Before you continue scripting, please consider using CSS solution:
* {
box-sizing: border-box;
font-family: sans-serif;
font-size: 16px;
}
.my_menu {
height: 66px;
text-align: center;
width: 100%;
overflow:
}
.my_menu ul {
list-style: none;
}
.my_menu ul li {
display: inline-block;
}
.my_menu > ul {
position: relative;
background: none #0086CA;
}
.my_menu ul a {
text-decoration: none;
color: #fff;
display: inline-block;
}
.my_menu > ul > li > a {
padding: 15px 20px;
}
.my_menu > ul > li > a:hover,
.my_menu > ul > li a:focus {
color: #0086CA;
background: #fff;
}
.my_menu ul ul {
background: none grey;
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
display: none;
}
.my_menu ul li:hover ul {
display: block;
}
.my_menu ul ul a {
padding: 5px 10px;
}
.my_menu ul ul a:hover,
.my_menu ul ul a:focus {
background: none black;
}
<header>
<nav class="my_menu">
<ul>
<li>
Home
</li>
<li>
menuitem1
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</li>
<li>
menuitem2
<ul>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</li>
</ul>
</nav>
</header>
Also at Playground.
You can probably clean this up but if you insist on a script method, this will work: It also should be easier to extend with less id's etc. just add markup.
Working example here: http://jsfiddle.net/MarkSchultheiss/fLqs1nru/2/
function showmenu(targ, me) {
$('.menuitem').removeClass('menu-on');
$(me).parent().addClass('menu-on');
$('.menu').hide();
$('.' + targ).show();
}
$('.menuitem a').mouseenter(function () {
var targ = $(this).parent().data("targetmenu");
showmenu(targ, this);
});
$('nav').mouseleave(function () {
$('.menuitem ').removeClass('menu-on');
$('.menu').hide();
});
Adjust the markup, get rid of the div and add some classes. Add a data element for the target menu to use.
<nav>
<ul class="ulparent">
<li class="navitem" id="n-1">Home
<li class="navitem menuitem" data-targetmenu="menu1">menuitem1
</li>
<li class="navitem menuitem" data-targetmenu="menu2"><a href="#" >menuitem2</a>
</li>
<ul class="menu menu1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<ul class="menu menu2">
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</ul>
</nav>
add this to the end of you CSS (which can probably be cleaner but this is only additive:)
.menu-on {
background-color: white;
}
.menu-on a {
color:#0086CA;
}
.menu {
max-height:100px;
display:none;
}
I have a dropdown navigation bar, and when elements like buttons or images are too high up on the page, the navigation bar pushes the elements to the right side when drop-down options appear. How do I stop this?
Navbar:
<nav id="nav1">
<ul>
<li>Home</li>
<li onmouseover = "DropDown1()" onmouseout="DropUp1()">Images<ul class="DropUp" id="Droplist1" >
<li class="DropDown"><a id="Droplist1" href="#">Test1</a></li>
<li class="DropDown">Test2</li>
<li class="DropDown">Test3</li></ul>
</li>
<li onmouseover = "DropDown2()" onmouseout="DropUp2()">Adverts<ul id="Droplist2" class="DropUp">
<li class="DropDown">Test1</li>
<li class="DropDown">Test2</li></ul>
</li>
<li>Data Validation</li>
<li>Security</li>
</ul>
</nav>
CSS:
nav#nav1 li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none;
}
nav#nav1 li {
list-style: none;
float: left;}
.DrowDown {
display: block;
position: absolute;
margin: 0;
padding: 0;
float: none;
}
nav#nav1 li:hover li {
float: none; }
nav#nav1 li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }
nav#nav1 ul li a:hover { background: #686868 ; }
nav#nav1 ul li a:active { background: #F0F0F0; }
JavaScript functions for dropdown:
function DropDown2() {
var t = document.getElementById("Droplist2");
t.className = "DropDown";
}
function DropDown1() {
var t = document.getElementById("Droplist1");
t.className = "DropDown";
}
function DropUp2() {
var t = document.getElementById("Droplist2");
t.className = "DropUp";
}
function DropUp1() {
var t = document.getElementById("Droplist1");
t.className = "DropUp";
}
If you are wondering why I took such a difficult route for making the navigation bar, it's because I have to use JavaScript.
Here is JS fiddle example: http://jsfiddle.net/fNPvf/10015/
The window is small in the fiddle, and the effect is slightly different, but notice how when you hover over "Data Validation" the dropdown menu pushes the text/image/body downwards?
You need absolute positioning and a higher z-index for either the containing <div> or the <ul> itself. Just add this to your code and adjust the z-index as needed:
nav#nav1 ul{
position: absolute;
top: 0;
z-index: 9;
}
See working demo here