I want to make an onclick expand multiple menu in my website
Before I follow this thread: this with little bit modify I get:
<ul>
<rg><li id="auctions">Menu</li></rg>
<br></br>
<lf>
<li class="submenu">Left</li>
</lf>
<rg>
<li class="submenu">Right</li>
</rg>
</ul>
But it only shows a menu, then I create a duplicate like this:
<ul>
<rg><li id="auctions">Menu</li></rg>
<br></br>
<lf>
<li class="submenu">Left</li>
</lf>
<rg>
<li class="submenu">Right</li>
</rg>
</ul><ul>
<rg><li id="auctions2">Menu</li></rg>
<br></br>
<lf>
<li class="submenu2">Left</li>
</lf>
<rg>
<li class="submenu2">Right</li>
</rg>
</ul>
And JS and CSS like this:
<script>
$(function() {
$('#auctions').click(function(){
$('.submenu').slideToggle();
});
});
$(function() {
$('#auctions2').click(function(){
$('.submenu2').slideToggle();
});
});
</script>
<style>
.submenu{display:none;}
.submenu2{display:none;}
rg {float:right}
lf {float:left}
</style>
Its work but doesn't run inline. Then I useul {display:inline-block}
Yes, the menu running inline, but it's broken and float doesn't work properly. Can it's fixed? or can I make multiple menu in same <ul>?
make rg and lf as classes and change the html accordingly to get your desired style.
But I recommend, you should consider studying about ul and li tags and its properties before using it
$(function() {
$('#auctions').click(function() {
$('.submenu').slideToggle();
});
});
$(function() {
$('#auctions2').click(function() {
$('.submenu2').slideToggle();
});
});
ul {
display: block;
margin:0;
padding:0;
width:100%;
}
li {
list-style: none;
}
li.main {
width:100%;
text-align:right;
}
.submenu {
display: none;
}
.submenu2 {
display: none;
}
.rg {
float: right;
}
.lf {
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<ul>
<li id="auctions" class="main rg">Menu</li>
<li>
<ul>
<li class="submenu lf">Left</li>
<li class="submenu rg">Right</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li id="auctions2" class="main rg">Menu</li>
<li>
<ul>
<li class="submenu2 lf">Left</li>
<li class="submenu2 rg">Right</li>
</ul>
</li>
</ul>
</li>
</ul>
Related
I wanted to slideToggle menu items with toggleclass, .opened class should be added and removed for menu items. This is working for me when I toggle different menu item but for same menu item when I click this, .opened class won't get removed here is my code
Html menu tag
<ul id="menu-main-menu">
<li class="menu-item"><a href="link_url">text<a>
<ul class="sub-menu">
<li class="menu-item">
<ul class="sub-menu">
<li class="menu-item"><a href="link_url">second sub item<a></li>
</ul>
</li>
<li class="menu-item"><a href="link_url">first sub item<a></li>
<li class="menu-item"><a href="link_url">first sub item<a></li>
</ul>
</li>
<li class="menu-item"><a href="link_url">text<a></li>
</ul>
jquery code
$('.menu-item').on('click', function(e) {
$('.menu-item').removeClass('opened')
$(this).toggleClass('opened');
if ($('.sub-menu', this).length >=1) {
e.preventDefault();
}
$(this).children('ul').slideToggle('fast');
$(this).siblings('li').find('ul').hide('slow')
e.stopPropagation();
});
I am not sure what I am doing wrong. Can you please help me for this?
Thanks
There is a basic mistake in your code.
Close Anchor tags, you have an opening anchor tag on both the ends.
then use the logic to get your result, see the example, If need anything else, please let me know
Add sub items Achor or li text, that depends on your requirement, but for UX you should add some text so users can get that there is still some more content to see.
$('.menu-item').click(function(e){
$(this).siblings().find('> .sub-menu').slideUp();
$(this).find('> .sub-menu').slideToggle();
$(this).siblings().removeClass('opened');
$(this).toggleClass('opened');
e.stopPropagation();
});
.sub-menu {
display: none;
}
.menu-item a{
display: inline-block;
margin-bottom: 10px;
}
.menu-item {
margin-bottom: 10px;
}
.menu-item.hasSubmenu {
border-bottom: 1px solid;
}
.menu-item a {
background-color: red;
color: white;
}
.hasSubmenu {
position: relative;
}
.hasSubmenu:after {
position: absolute;
right: 10px;
top: 0px;
content: "+";
display: block;
font-size: 20px;
font-weight: bold;
}
.hasSubmenu.opened:after {
content: "-";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-main-menu">
<li class="menu-item hasSubmenu">
text
<ul class="sub-menu">
<li class="menu-item hasSubmenu">
First level
<ul class="sub-menu">
<li class="menu-item">second sub item</li>
<li class="menu-item">second sub item</li>
</ul>
</li>
<li class="menu-item">first sub item</li>
<li class="menu-item">first sub item</li>
</ul>
</li>
<li class="menu-item hasSubmenu">
text
<ul class="sub-menu">
<li class="menu-item hasSubmenu">
First level
<ul class="sub-menu">
<li class="menu-item">second sub item</li>
</ul>
</li>
<li class="menu-item">first sub item</li>
<li class="menu-item">first sub item</li>
</ul>
</li>
</ul>
$('.menu-item').on('click', function(e) {
$(this).toggleClass('opened');
$('.menu-item').not($(this)).removeClass('opened');
if ($('.sub-menu', this).length >= 1) {
e.preventDefault();
}
$(this).children('ul').slideToggle('fast');
$(this).siblings('li').find('ul').hide('slow')
e.stopPropagation();
});
Change the order of removing classes, then skip the current element.
I am working on a app using Jquery I want to add class and remove class conditionally. In code below there is menu and submenu.
If the user clicks #two or #three (to open submenu), the submenu class is added to the ul tag containing #two and #three and the menu class is removed.
If the user clicks #three or #four (on li tag), the menu class is added to the ul tag containing #three and #four and the submenu class is removed from the ul containing #one and #two
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
if (!$(".left_pannel ul li ul").hasClass('submenu')) {
alert("test");
$(".left_pannel ul li").removeClass("iconadd");
} else {
$(".left_pannel ul li").addClass("iconadd");
}
});
</script>
<body>
<div class="left_pannel">
<ul>
<li>Matches
<ul id="one" class="submenu" style="display: none;">
<li>Add Matches(m)</li>
<li>Add Cricket(m)</li>
</ul>
</li>
<li>Quize Master
<ul id="two" class="submenu" style="display: none;">
<li>Add Matches(m)</li>
<li>Add Cricket(m)</li>
</ul>
</li>
<li id="#three">Excel Update</li>
<li id="#four">Application version</li>
</ul>
</div>
</body>
On click button find class that is subMenu , If class is there change class that is iconadd or not than remove iconadd
$(document).ready(function()
{
$(".left_pannel ul li ul").on("click",function()
{
if ($(this).hasClass('submenu'))
{
$(".left_pannel ul li").addClass("iconadd");
}
else
{
$(".left_pannel ul li").removeClass("iconadd");
}
});
});
Thanks,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".left_pannel ul li ul").click(function(){
if ($(this).hasClass('submenu')) {
$(".left_pannel ul li").addClass("iconadd");
} else {
$(".left_pannel ul li").removeClass("iconadd");
}
});
});
</script>
<body>
<div class="left_pannel">
<ul>
<li>Matches
<ul id="one" class="submenu" style="display: none;">
<li>Add Matches(m)</li>
<li>Add Cricket(m)</li>
</ul>
</li>
<li>Quize Master
<ul id="two" class="submenu" style="display: none;">
<li>Add Matches(m)</li>
<li>Add Cricket(m)</li>
</ul>
</li>
<li id="#three">Excel Update</li>
<li id="#four">Application version</li>
</ul>
</div>
</body>
try this code
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'm pretty new at trying to understand javascript and I've been pooling over multiple examples trying to figure out what I'm doing wrong, but cant get this working properly. At one point I had working with onmouseover/mouseout but it only worked on 1 of the menus.
I'm sure it is something simple I have overlooked, but any help would be appreciated.
http://jsfiddle.net/N3TyT/
jQuery(document).ready(function($) {
$('#top-menu').hover(
function () {
$('#submenu').show(active);
},
function () {
$('#submenu').hide(non-active);
}
);
});
<ul id="menu" class="nav-menu">
<li>Home</li>
<li id="top-menu">About Us
</li>
<ul id="submenu" class="sub-menu non-active">
<li>US</li>
<li>Our Style</li>
<li>The Experience</li>
</ul>
<li id="top-menu">Galleries
</li>
<ul id="submenu" class="sub-menu non-active">
<li>Weddings</li>
<li>Engagements</li>
<li>Featured Weddings</li>
</ul>
<li id="top-menu">The Details
</li>
<ul id="submenu" class="sub-menu non-active">
<li>Investment</li>
<li>Press and Awards</li>
<li>Testimonials</li>
</ul>
<li>FAQ</li>
<li>Contact</li>
<li>The Blog</li>
</ul>
.nav-menu {
list-style-type:none;
text-align:center;
text-transform:uppercase;
font-weight:bold;
font: 24px'Playfair Display', Georgia, serif;
}
.navmenu ul li {
margin:30px;
}
.non-active {
display:none;
}
.active {
display:inline;
}
It doesn't answer your specific question but the same behavior can be easily achieved with css. This way you don't depend on javascript being turned on for standard menu access.
ul.menu li ul {
display: none;
}
ul.menu li:hover ul {
display: block;
position: relative;
}
<ul class="menu">
<li>Home</li>
<li>
Galleries
<ul>
<li>Gallery #1</li>
<li>Gallery #2</li>
</ul>
</li>
<li>
Albums
<ul>
<li>Album #1</li>
<li>Album #2</li>
</ul>
</li>
</ul>
View on jsFiddle
You are using hide and show wrong.
http://api.jquery.com/show/
http://api.jquery.com/hide/
http://jsfiddle.net/eXKV9/
$('#top-menu').hover(
function () {
$('#submenu').show();
},
function () {
$('#submenu').hide();
}
);
id must be unique. If you have multiple elements with the same id, jquery will not retrieve all the elements when you do $('#top-menu'), it'll only find the first element that matches the selector.
We're going to need to change the HTML a bit. IDs are used only once on a page. Classes are similar, but can be applied to any number of elements. We also want to nest our sub-menu's under the top-menu. That way the association is more clear.
<li class="top-menu">About Us
<ul class="sub-menu non-active">
<li>Ashley + David</li>
<li>Our Style</li>
<li>The Experience</li>
</ul>
</li>
We want to specify the nested sub-menu to show or hide. $(this) refers to the top-menu that was hovered over.
$('.top-menu').hover(
function () {
$(this).find('.sub-menu').show("slow");
},
function () {
$(this).find('.sub-menu').hide("slow");
}
);
demo
I updated your work. Is this what are trying to establish?
$('#top-menu').mouseover(function(){
$('#submenu').addClass('active');
});
$('#top-menu').mouseout(function(){
$('#submenu').removeClass('active');
});
JSFiddle Demo
Menu does not display in line. Not sure how to call the CSS code. Also I want the alert to tell me which menu item was clicked.
<script type="text/javascript">
function get_list() {
$("#tabs").click(function(){
$(this).click(function(){
alert(this);
});
});
</script>
<style type="text/css">
#navbarID li {
display: inline;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li>Type 1</li>
<li>Type 2</li>
<li>Type 3</li>
</ul>
</div>
</body>
</html>
the html should be something like this.
<ul id='tabs'>
<li><a href='type1.html'>Type 1</a></li>
<li><a href='type2.html'>Type 2</a></li>
<li><a href='type3.html'>Type 3</a></li>
<li><a href='type4.html'>Type 4</a></li>
</ul>
the css part could be this:
ul#tabs { list-style: none; }
ul#tabs li { display: inline; }
the onclick that you want on jQuery is like this:
$('ul#tabs li a').click(function(){ alert('i was clicked!'); return false; });
alert($(this).html()); will tell you what the contents of that nav item are.
Maybe you should use <span> instead of <div> for inline.