In below code the Purchase, sale, and new menus have some multilevel menus which need to open onClick using jQuery also when click on another menu the first one multilevel menu should be close and then this menu should be open with some transition effects.
$('#handle').on('click', function() {
$('ul').toggleClass('showing');
});
$('li').on('click', function(e) {
$(this).next('li li').toggleClass('showingg');
});
#charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
}
.container {
margin: 0;
padding: 0;
}
#handle {
display: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
-moz-transition: linear 0.4s;
}
li {
float: left;
}
li a {
text-decoration: none;
display: block;
padding: 15px;
background: #0C9;
color: #FFF;
border-bottom: 1px solid #ccc;
}
li a:hover {
background: #333;
}
li ul {
display: none;
}
li:hover > ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
ul ul ul {
left: 100%;
top: 0;
}
ul:before,
ul:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
ul:after {
clear: both;
}
#media screen and (max-width: 480px) {
#handle {
display: block;
background: #066;
color: #fff;
padding: 10px;
text-align: center;
box-sizing: border-box;
font-size: xx-large;
cursor: pointer;
}
li {
width: 100%;
text-align: center;
font-size: x-large;
}
ul {
max-height: 0;
overflow: hidden;
}
li a:hover {
background: #0C9;
}
.showing {
max-height: 200em;
}
li:hover > ul {
position: relative;
}
/*li li {
display:none;
}*/
li li:hover > ul {
left: 0;
position: relative;
}
li li a {
background: #CCC;
}
.showingg {
display: block;
;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="nav1.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<nav class="showing">
<div id="handle">Menu</div>
<ul id="nav">
<li>Available stock
</li>
<li>
Purchase +
<ul>
<li>
Purchase Return +
<ul>
<li>Return1
</li>
</ul>
</li>
</ul>
</li>
<li>
Sale +
<ul>
<li>
Sale Return +
<ul>
<li>Return2
</li>
</ul>
</li>
</ul>
</li>
<li>Cash Recieve
</li>
<li>Cash Payment
</li>
<li>
New +
<ul>
<li>New Product
</li>
<li>New Supplier
</li>
<li>New Town
</li>
<li>New Customer
</li>
</ul>
</li>
<li>Opening Stock
</li>
<li>Gate Pass
</li>
<li>Sale History
</li>
</ul>
</nav>
</div>
</body>
</html>
Related
I am desperately trying to make sub-menu appears under menu-item below when I hover a mouse.
I created color-change and underline when menu-item is hovered using css but have no idea how to make sub-menu appears under the menu-item. I have no knowledge related jquery so I googled some jquery effect but did not work either.
Is there other way to make it appears without using jquery?
<style>
.menu {
margin-left: 220px;
}
.menu-item-text {
display: inline-block;
margin-top: 18px;
color: black;
font-weight: 550;
}
.menu-item-text:hover {
content: '';
color: red;
}
.menu-item-text:hover:after {
content:'';
display: block;
border-bottom: 2px solid rgb(15, 1, 1);
margin-top: 19px;
}
.sub-menu1 {
background: yellowgreen;
position: absolute;
display: block;
}
.sub-menu li {
white-space: nowrap;
display: inline;
}
.sub-menu a:before {
content: '☆';
top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
content: '★';
}
.navigation .sub-menu {
display: none;
}
.menu-act .menu-item-text {
color: red;
}
.sub-menu1 li, .sub-menu1 a {
display: inline-block;
}
</style>
<body>
<nav class="navigation">
<ul class="menu">
<li class='menu-item' tabindex='0'>
<span class="menu-item-text menu-act">About HTML</span>
<ul class='sub-menu'>
<li>
HTML Introduction
</li>
<li>
Reference Introduction
</li>
<li>
Examples
</li>
</ul>
</li>
</ul>
</nav>
</body>
You don't need JQuery to display a submenu on hover. You can do it with CSS.
.menu-item:hover .sub-menu {display: block;}
If there is more than one submenu then use id or different class names for them. So you can display the corresponding submenu under each menu.
<style>
.menu {
margin-left: 220px;
}
.menu-item-text {
display: inline-block;
margin-top: 18px;
color: black;
font-weight: 550;
}
.menu-item-text:hover {
content: '';
color: red;
}
.menu-item-text:hover:after {
content:'';
display: block;
border-bottom: 2px solid rgb(15, 1, 1);
margin-top: 19px;
}
.sub-menu1 {
background: yellowgreen;
position: absolute;
display: block;
}
.sub-menu li {
white-space: nowrap;
display: inline;
}
.sub-menu a:before {
content: '☆';
top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
content: '★';
}
.menu-item:hover .sub-menu {display: block;}
.navigation .sub-menu {
display: none;
}
.menu-act .menu-item-text {
color: red;
}
.sub-menu1 li, .sub-menu1 a {
display: inline-block;
}
</style>
<body>
<nav class="navigation">
<ul class="menu">
<li class='menu-item' tabindex='0'>
<span class="menu-item-text menu-act">About HTML</span>
<ul class='sub-menu'>
<li>
HTML Introduction
</li>
<li>
Reference Introduction
</li>
<li>
Examples
</li>
</ul>
</li>
</ul>
</nav>
</body>
With JQuery you can simulate this as follows:
$(".menu-item").on("mouseover", function(){ //This will display the submenu on mouse hover.
$(".sub-menu").show();
});
$(".menu-item").on("mouseout", function(){ //This will hide the submenu when mouse leaves the menu item.
$(".sub-menu").hide();
});
.menu {
margin-left: 220px;
}
.menu-item-text {
display: inline-block;
margin-top: 18px;
color: black;
font-weight: 550;
}
.menu-item-text:hover {
content: '';
color: red;
}
.menu-item-text:hover:after {
content:'';
display: block;
border-bottom: 2px solid rgb(15, 1, 1);
margin-top: 19px;
}
.sub-menu1 {
background: yellowgreen;
position: absolute;
display: block;
}
.sub-menu li {
white-space: nowrap;
display: inline;
}
.sub-menu a:before {
content: '☆';
top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
content: '★';
}
.navigation .sub-menu {
display: none;
}
.menu-act .menu-item-text {
color: red;
}
.sub-menu1 li, .sub-menu1 a {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<nav class="navigation">
<ul class="menu">
<li class='menu-item' tabindex='0'>
<span class="menu-item-text menu-act">About HTML</span>
<ul class='sub-menu'>
<li>
HTML Introduction
</li>
<li>
Reference Introduction
</li>
<li>
Examples
</li>
</ul>
</li>
</ul>
</nav>
</body>
You can use mouseover and mouseout or mouseleave events of jQuery.
You can also do this with CSS but you mention you want in jquery that's why I make it with Jquery.
I think you want like this:-
$(document).ready(function(){
$('.menu-item-text').mouseover(function(){
$(this).next('.sub-menu').show();
});
$('.menu-item-text').mouseout(function(){
$(this).next('.sub-menu').hide();
});
});
.menu {
margin-left: 220px;
}
.menu-item-text {
display: inline-block;
margin-top: 18px;
color: black;
font-weight: 550;
}
.menu-item-text:hover {
content: '';
color: red;
}
.menu-item-text:hover:after {
content:'';
display: block;
border-bottom: 2px solid rgb(15, 1, 1);
margin-top: 19px;
}
.sub-menu1 {
background: yellowgreen;
position: absolute;
display: block;
}
.sub-menu li {
white-space: nowrap;
display: inline;
}
.sub-menu a:before {
content: '☆';
top: 2px;
}
.sub-menu a:hover:before, .sub-menu a:focus:before {
content: '★';
}
.navigation .sub-menu {
display: none;
}
.menu-act .menu-item-text {
color: red;
}
.sub-menu1 li, .sub-menu1 a {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navigation">
<ul class="menu">
<li class='menu-item' tabindex='0'>
<span class="menu-item-text menu-act">About HTML</span>
<ul class='sub-menu'>
<li>
HTML Introduction
</li>
<li>
Reference Introduction
</li>
<li>
Examples
</li>
</ul>
</li>
</ul>
</nav>
I'm trying to figure out how to close sub menu drop downs, if a user selects another menu or clicks outside of the menu (clicks something else on the page). I've read and tried a few different ways, but haven't gotten anywhere. I Just confused myself as to what is the best or right approach. Using regular JavaScript only - trying to learn.
HTML
<div class="container">
<div class="inner-wrap">
<ul id="filters">
<li>one
<ul class="dropM">
<li>I belong to one</li>
</ul>
</li>
<li>two
<ul class="dropM">
<li>I belong to two</li>
</ul>
</li>
<li>three
<ul class="dropM">
<li>I belong to three</li>
</ul>
</li>
<li>four
<ul class="dropM">
<li>I belong to four</li>
</ul>
</li>
</ul>
</div>
CSS
html {
box-sizing: border-box;
background:#ffc600;
font-family:'helvetica neue';
font-size: 20px;
font-weight: bold;
}
body {
margin: 0 auto;
padding: 50px 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
div.container {padding: 10px; background: #bada55; text-align: center;}
div.inner-wrap {margin: 0 auto; position: relative; display: inline-block;}
ul#filters { list-style: none;}
ul#filters li {display: inline-block; position: relative;}
ul#filters li > ul.dropM {list-style: none; position: absolute; top: 30px; left: -40px; padding: 15px; border: 1px solid #ccc; background: #fff; display: block; min-width: 200px; display: none; z-index: 201;}
ul#filters li > ul.dropM.open {display: block;}
ul#filters {display: inline-block;}
ul#filters li a.filterBtn {text-decoration: none; padding: 10px 20px; background: #ccc; color: black;}
JS
const filterMenuBtn = document.querySelectorAll('a.filterBtn');
const dropMenu = document.querySelectorAll('ul.dropM');
function openDropMenu(e){
filterMenuBtn.forEach(cliks => {
//console.log(cliks);
if(cliks === this) {
this.nextElementSibling.classList.toggle('open');
//console.log('i clicked this one');
}
});
}
filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));
JSFiddle
Update your javascript to this
const filterMenuBtn = document.querySelectorAll('a.filterBtn');
const dropMenu = document.querySelectorAll('ul.dropM');
function openDropMenu(e) {
if (e.type == 'click'){
e.currentTarget.nextElementSibling.classList.toggle('open');
} else {
e.currentTarget.nextElementSibling.classList.remove('open');
}
}
filterMenuBtn.forEach(cliks => cliks.addEventListener('click', openDropMenu));
filterMenuBtn.forEach(cliks => cliks.addEventListener('blur', openDropMenu));
I wrote some code using different internet sources. I ran into a problem -
every object that's in the bottom part of the menu cannot be interacted with.
The menu interferes with everything below where the dropdown falls.
<style>
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
</style>
<html lang="he">
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
#nav_wrapper ul ul li{ text-align:left;}
you need to add this only: demo
You might be able to use vertical-align for the list elements & text-align for the links.
Just add a class to the <ul> tag of each dropdown and add text-align: left to it.
FIDDLE Here
html:
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">g</button>
</li>
<li id="item2">
<button onclick="myFunction2()">a </button>
</li>
<li id="item3">b </li>
<li id="item4">c </li>
<li id="item5">d </li>
<li id="item6">e </li>
<li id="item7">f </li>
</ul>
</div>
CSS:
lu, li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu {
width: 150px;
height: 350px;
}
.menu li {
position: relative;
top: 150px;
bottom: 0;
left: 725px;
right: 0;
margin: auto;
border-style: none;
}
.permahover li {
opacity: 1;
left: 10%;
}
.headlines li {
font-size: 1.5em;
color: #000000;
transition: all 0.5s;
cursor: pointer;
}
.headlines:hover li {
/* PARENT HOVER */
opacity: 0.4;
cursor: pointer;
/* Dim all */
}
.headlines li:hover {
/* SINGLE HOVER */
opacity: 1;
/* Max one */
color: #000000;
cursor: pointer;
}
In the current code when the user hover over an element, the other elements in the menu will reduce in opacity. How can i as well do the same procedure after clicking an element.. By clicking an element it'll keep its opacity however the unclicked elements will reduce in opacity, thus highlighting the selected element.
You will need javascript for this*. For example:
var $li = $('.headlines li').click(function() {
var state = !$(this).hasClass('active');
$(this).parent().toggleClass('active', state);
$li.removeClass('active');
$(this).toggleClass('active', state);
});
ul, li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu {
width:150px;
height: 350px;
}
.menu li {
position: relative;
right: 0;
margin: auto;
border-style:none;
}
.permahover li {
opacity: 1;
left: 10%;
}
.headlines li {
font-size:1.5em;
color:#000000;
transition: all 0.5s;
cursor: pointer;
}
.headlines:hover li,
.headlines.active li {
opacity:0.4;
cursor: pointer;
}
.headlines li:hover,
.headlines li.active {
opacity: 1;
color:#000000;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">g</button>
</li>
<li id="item2">
<button onclick="myFunction2()">a</button>
</li>
<li id="item3">b</li>
<li id="item4">c</li>
<li id="item5">d</li>
</ul>
</div>
* technically it's possible to do it with pure CSS, but the HTML structure will become complex and not that semantic.
this might be a noobish question but I tried many solutions found here and online and still cant figure out.
I have a main menu bar with each item as a li within a ul.
How can I make it displayed in the center of the browser of all times?
By the way, I need to keep the javascript that displays correspondant submenu when hovered a main menu item working.
Below is the html,
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nothing</title>
<link rel="stylesheet" type="text/css" href="final.css">
<script language="javascript" type="text/javascript" src="final.js"></script>
</head>
<body>
<div id="header">
<div id="logo">
<div class="verti">
<img src="../Images/logo.png" width="642" height="68" border="0" />
</div>
</div>
<div id="menu">
<div class="verti">
<ul>
<li id="m1" class='menulist' onmouseover='mov(1);' >Main</li>
<li id="m2" class='menulist' onmouseover='mov(2);' >Intro</li>
<li id="m3" class='menulist' onmouseover='mov(3);' >Info</li>
<li id="m4" class='menulist' onmouseover='mov(4);' >Details</li>
<li id="m5" class='menulist' onmouseover='mov(5);' >Contact</li>
<li id="m6" class='menulist' onmouseover='mov(6);' >Service</li>
<li id="m7" class='menulist' onmouseover='mov(7);' >News</li>
<li id="m8" class='menulist' onmouseover='mov(8);' >About</li>
<li id="m9" class='menulist' onmouseover='mov(9);' >Contact</li>
</ul>
</div>
</div>
<div id="submenu">
<div class="verti">
<ul>
<li id= "s3_1" class='s3' onmouseover='mov(3);'>Real Info</li>
<li id= "s3_2" class='s3' onmouseover='mov(3);'>Fake Info</li>
<li id= "s3_3" class='s3' onmouseover='mov(3);'>Disinfo</li>
</ul>
<ul>
<li id= "s4_1" class='s4' onmouseover='mov(4);'>Poor details</li>
<li id= "s4_2" class='s4' onmouseover='mov(4);'>Rich details</li>
<li id= "s4_3" class='s4' onmouseover='mov(4);'>None-details</li>
</ul>
</div>
</div>
</div><!--header-->
</body>
</html>
Below is the CSS,
#charset "utf-8";
/* CSS Document */
li {
text-decoration: none;
}
.verti {
}
#logo {
margin: 0 0 0 0;
}
#image {
border-radius: 10px;
}
#menu {
background-color: #65EBEB;
height: 50px;
border-radius: 5px;
margin: 0 0 0 0;
}
#menu ul {
width: 990px;
border-radius: 5px;
text-align: center;
height: 50px;
margin-left: -35px;
}
#menu ul li {
display: inline-block;
line-height: 50px;
list-style-type: none;
width: 90px;
font-weight: 600;
}
.currenttab a {
color:red;
font-weight: 1200;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
.menulist a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menulist a:active {
background-color: yellow;
}
#submenu {
height: 50px;
background-color: #F1F1F1;
border-radius: 5px;
margin-top:0;
}
#submenu ul {
position: absolute;
margin-top: 0;
width: 960px;
border-radius: 5px;
padding: 5px;
text-align: center;
}
#submenu ul li {
line-height: 40px;
list-style-type: none;
padding-left: 30px;
display: none;
font-weight: bold;
}
#submenu a {
text-decoration: none;
color: green;
font-size: 14px;
font-weight:500;
}
#submenu a:hover {
color: red;
font-size: 16px;
font-weight: bold;
}
Below is the js used for display submenu,
function mov(object){
//reset submenu display to none
displaynone();
//set selected menu styles
ssms(object);
//display submenu for selected menu
displaysub(object);
}
function displaynone(){
var n;
for (n = 0; n < 10; n++) {
var s = document.getElementsByClassName("s"+n);
for (k = 0; k < s.length; k++) {
s[k].style.display ="none";
}
}
}
function menurestore(){
for(m = 1; m<10; m++){
var ml = document.getElementById("m"+m);
ml.className = "menulist";
}
}
function ssms(n){
//reset unselected menu styles
menurestore();
var y = document.getElementById("m"+n);
y.className = "currenttab";
}
function displaysub(object){
var x = document.getElementsByClassName("s"+object);
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display ="inline";
}
}
Thank you so much for the help.. Been struggling for days on this thing.
Try adding this class to your <ul> tag:
.center-menu {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
}
Flexbox is new CSS properties that are not fully suported in all browsers, but is supported in a good amount of them.
To display sub-menu on hover with jQuery:
<!doctype html>
<html lang="en">
<head>
<title>Hover Menu</title>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
text-align: center;
}
.hover-menu {
position: relative;
}
.hover-menu li {
padding: 15px;
background-color: silver;
color: black;
border: 1px solid black;
width: 100px;
}
.sub-menu {
position: absolute;
visibility: hidden;
top: 0px;
left: 140px;
}
.hover-menu li:nth-child(3) .sub-menu {
top: 50px;
left: 140px;
}
.hover-menu li:nth-child(4) .sub-menu {
top: 100px;
left: 140px;
}
</style>
</head>
<body>
<ul class="hover-menu">
<li><span>Navigation</span></li>
<li>
Home
<ul class="sub-menu">
<li>Link</li>
<li>Another Link</li>
<li>Yet Another</li>
</ul>
</li>
<li>
About
<ul class="sub-menu">
<li>Link</li>
<li>Another Link</li>
<li>Yet Another</li>
</ul>
</li>
<li>
Contact
<ul class="sub-menu">
<li>Link</li>
<li>Another Link</li>
<li>Yet Another</li>
</ul>
</li>
</ul>
<script src="vendors/jquery-1.11.3.min.js"></script>
<script>
$('ul.hover-menu li').hover(function() {
$('ul:first',this).css('visibility', 'visible');
}, function(){
$('ul:first',this).css('visibility', 'hidden');
});
</script>
</body>
</html>