I have the following menu:
<div id="menuItem">Item1</div>
<div id="subMenu">
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
Animated like this:
$('#menuItem').mouseenter(function() {
$('#subMenu').slideDown(400);
}).mouseleave(function() {
$('#subMenu').hide(400);
});
Unfortunately, as the mouse leave the submenu, the submenu dissapears. How do I make the submenu only disapears when the mouse leave the menuitem OR the submenu list ? I would like to be able to hover the mouse on the submenu. Notice that there is a gap bewteen the two menus.
jsFiddle here
make the sub-menu actually "inside" the menu-item you are attaching the event to, this way the in/out event only happen when the user actually leaves the menu area
like this:
css
#menuItem {
cursor: pointer;
width: 100px;
}
#menuItem .title {
background-color: orange;
}
#subMenu {
background-color: grey;
margin-top: 5px;
cursor: pointer;
display:none;
width: 80px;
}
html
<div id="menuItem">
<div class="title">Item1</div>
<div id="subMenu">
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
</div>
js
$('#menuItem').mouseenter(function() {
$('#subMenu').slideDown(400);
}).mouseleave(function() {
$('#subMenu').hide(400);
});
friendly note:
you might want to use some form of .stop(true, true) prior to animating the menu, or else moving a cursor back and forth rapidly over the menu will cause the animations to "stack" and it will just feel strange to the user. see discussion here: Where to put clearQueue in jQuery code
so it would look like this:
$('#menuItem').hover(function() {
$('#subMenu').stop(true, true).slideDown(200);
}, function() {
$('#subMenu').stop(true, true).slideUp(200);
});
Try this:
<div id="menuItem">Item1
<div id="subMenu">
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
</div>
This works in my browser (firefox)
Assuming you wanted to keep the exact same html structure, you could use the following code:
$('#menuItem').mouseenter(function() {
$('#subMenu').slideDown(400);
}).next('#subMenu').mouseleave(function() {
$('#subMenu').hide(400);
});
Notice that I've told jQuery to hide the #subMenu only when the mouse has left the #subMenu.
It is always good to have the Menu and Sub Menu inside the same container so you don't need to have a separate mouse handler when navigating sub menu.
DEMO
HTML:
<div id="subMenu">
<div id="menuItem">Item1</div>
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
JS:
$('#subMenu').mouseenter(function() {
$('#subMenu ul').slideDown(400);
isInsideSubMenu = true;
}).mouseleave(function() {
$('#subMenu ul').hide(400);
});
CSS:
#subMenu ul { display:none;}
Alternatively if you don't want to have the submenu inside menuitem (which could mess with your CSS, you can wrap everything in a parent div like:
HTML:
<div id="all">
<div id="menuItem">Item1</div>
<div id="subMenu">
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3</li>
</ul>
</div>
</div>
jQuery:
$('#all').mouseenter(function() {
$('#subMenu').slideDown(400);
}).mouseleave(function() {
$('#subMenu').hide(400);
});
Related
I'm using Foundation 6 for a one-page website. And I'm using a Top Bar to take users to different sections of the website. So when visiting the website on mobile, when I click a link from the collapsed Top Bar, I want the Top Bar to hide after taking the user to a certain section of the website.
Here's my HTML:
<div data-sticky-container>
<div data-sticky data-sticky-on="small" data-options="marginTop:0.9;" style="width: 100%">
<div class="top-bar">
<div class="top-bar-title">
<span data-responsive-toggle="responsive-menu" data-hide-for="medium">
<span class="menu-icon dark" data-toggle></span>
</span>
</div>
<div id="responsive-menu">
<div class="top-bar-section">
<ul class="menu" data-magellan>
<li class="title"><a class="title-link" href="#home">HOME</a></li>
<li class="title"><a class="title-link" href="#events">EVENTS</a></li>
<li class="title"><a class="title-link" href="#about">ABOUT</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
I could have achieved this functionality by using this (I think):
$(function () {
$('.title-link').on('click', function () {
$("#responsive-menu").css({display: none});
});
});
But the problem is when I click the menu icon, Foundation adds and inline style of display: block; and I can't seem to change it through to JS.
Is there a way to override the inline styles, or should I use a different layout? Thanks for the help!
.css() overrides inline style. Just change this line :
$("#responsive-menu").css({display: none});
To :
$("#responsive-menu").css({"display": "none"});
Similar topic for more info : How to override inline css through javascript?
Try this one:
JS:
$(function () {
$('.title-link').on('click', function () {
$("#responsive-menu").toggleClass('myStyle');
});
});
CSS:
.myStyle {
display: block!important;
}
or
.myStyle {
display: none!important;
}
depend what you want to do.
I trying to write a responsive menu. It's actually works but I can't get the on clik effect in CSS. For this moment I'm using a hover. How to make that when the screen width is lower than 750px I have to click on menu from pic. number 2 (ul) to show menu from pic. number 3 (li) ? This is a one page site so when I clik on some element from drop down menu it's should hide menu agin (li).
HTML:
<header>
<nav id="menu">
<ul>
<li class="li">WITAJ</li>
<li class="li">O MNIE</li>
<li class="li">DOŚWIADCZENIE</li>
<li class="li">CO ROBIĘ?</li>
<li class="li">KONTAKT</li>
<li>MOJE PRACE</li
></ul>
</nav>
</header>
CSS:
#media screen and (max-width: 750px) {
header nav#menu ul:hover > li{
display:block !important;
}
header nav#menu ul li{
display:none !important;
}
}
You cannot achieve a click effect in CSS. It is common to use JavaScript for that.
This is an easy jQuery solution:
$(function() {
var menuVisible = false;
$('#menuBtn').click(function() {
if (menuVisible) {
$('#myMenu').css({'display':'none'});
menuVisible = false;
return;
}
$('#myMenu').css({'display':'block'});
menuVisible = true;
});
$('#myMenu').click(function() {
$(this).css({'display':'none'});
menuVisible = false;
});
});
It also hides the menu, after the user clicked on an entry.
In CSS, you have to force the menu to be visible or not by using media queries. Here an example: sfplex
This is the HTML structure of this example:
<div id="menuBtn">click me</div>
<nav id="myMenu">
<ul>
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>
<li>entry 4</li>
</ul>
</nav>
See the working example in jsFiddle.
How about something like this:
$('#menu').on('click', function(){
$('#menu ul').css("display", "block");
});
$('#menu a').on('click', function(){
$('#menu ul').css("display", "none");
});
What about using JavaScript for this purpose like this:
$(document).ready(function(){
$("#floor").click(function(){
$("#floor_panel").slideToggle("slow");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="floor">FLOOR ▾ </div>
<div id="floor_panel">
<form name="floor" action="{{ url_for('select_work', url='Floor') }}" method="post">
{{ floor.name }}
<div id="choose"><input type="submit" value="Choose"></div>
</form>
</div>
</div>
It displays panel floor and by pressing it - panel floor_panel will slide.
I'm pretty new to the javaScript and it would be very helpful for me if somebody could be so glad to give me some directions how to perform that. I'm creating website in Joomla 3 and I need to stylize the menu in a way that when a child menu item is active the parent item should change the background colour. I included the .js link into the head of the index.php file of my template. But I'm struggling second day with the desired script.
Here is my HTML:
<ul class="gf-menu l1">
<li class="item128 parent">
<a class="item" href"services">Services<span class="border-fixer"></span>::after</a>
<div class="dropdown columns-1">
<div class="column col1">
<ul class="l2">
<li class ="item1"><a class="item" href="submenu-01">Submenu1</a></li>
<li class ="item2"><a class="item" href="submenu-02">Submenu2</a></li>
<li class ="item3"><a class="item" href="submenu-03">Submenu3</a></li>
</ul>
</div>
</div>
</li>
</ul>
And that's it my CSS for it:
.gf-menu .dropdown{
border: 1px solid transparent;
border-radius:0;
background-color:#a9a9a9;
padding:10% 0;
width:100%;
text-shadow:none;
font-size:85%;
}
.gf-menu.l1 li.item1.active.last {background-color:#abcf39;}
.gf-menu.l1 li.item2.active.last {background-color:#f39512;}
.gf-menu.l1 li.item3.active.last {background-color:#f16e68;}
If you click on the <li> element and want to affect the parent you can use the .parent() method to target the parent element. The question is which one do you want to target. If it's the div which contains the <ul> you will have to access the parent of a parent. For example if the <li> has a class item as you stated in your question, you can do
$('.item').on('click', function(){
var clickedLiElement = $(this);
var parentHoldingUl = clickedLiElement.parent().parent();
//now you can do whatever you want with both of them, for example
clickedLiElement.addClass('active');
parentHoldingUl.css('background-color', 'green');
});
Update based on comments:
A slightly shorter version, which does what you specified in the comments
$('.item').on('click', function(){
$(this).css('background-color', '#5512F3');
$(this).parent().parent().css('background-color', '#5512F3');
$(this).siblings().css('background-color', '#AB99D5');
});
This should turn the clicked LI element and it's parent DIV dark blue and the clicked elemnent's siblings light blue.
currently I'm trying like if I click on the tab it will change color instead of the standard color I set.How do I go about doing it because I'm using the toggle() function.
Currently I'm stuck at here.
$("li").click(function(){
$(this).css('background-color',"#6F0")
})
http://jsfiddle.net/eMLTB/112
Hide all .tabContent elements on page load and show them on click of li.
Write:
JS:
$("li").click(function () {
$($(this).find("a").attr("href")).toggle();
$(this).toggleClass("active");
});
CSS:
.active {
background-color:#6F0;
}
.tabContent {
display:none;
}
DEMO here.
Check the line of script where i placed a comment, I think after adding this solves your problem.
<div id="container">
<nav id="tabs">
<ul id ="ta" class="nav">
<li id="a">0</li>
<li id="b">5</li>
<li id="c">10</li>
</ul>
<div class="tabContent" id="tabs-1" >
<h2>Testing1</h2>
</div>
<div class="tabContent" id="tabs-2">
<h2>Testing2</h2>
</div>
<div class="tabContent" id="tabs-3">
<h2>Testing3</h2>
</div>
</nav>
And in your Script
var i;
$("li").each(
function(){
$(this).click(
function(){
i = $(this).find("a").attr("href");
$(i).toggle();
}
);
}
);
$("li").click(function(){
$('li').css('background-color',"#fff");//------>I set it #fff , you Can Put here your standard color code
$(this).css('background-color',"#6F0")
})
First, put the class attribute for <li> tag, example :
<ul id ="ta" class="nav">
<li id="a" class="navi">0</li>
<li id="b" class="navi">5</li>
<li id="c" class="navi">10</li>
</ul>
next, make your code like this :
$("li").click(function(){
$(".navi").css('background-color', "");
$(this).css('background-color', "#6F0");
});
I would suggest using the .toogleClass() method.
It is similar like .toogle() but better for CSS manipulation.
First create class in your CSS that will represent your color and then toogle that class.
http://api.jquery.com/toggleClass/
Whenever I hover over the second button in the menu, a "submenu" appears. When it appears, it partially covers the images in a div "container".
The styling of the submenu is such that it is semi-transparent so the images inside the div "container" also appear in the background of the menu, which doesnt look that good.
I know that the simple solution would be to change the location of the div but then the images would not be centered so that is not an option. I was wondering if it is possible that whenever I hover over the buttons that have a submenu, the div "container" hide and appear again when I move my mouse away from the menu. The div "container" should not hide when hovering over first Home button since it does not have a submenu and images should remain hidden as long as the menu is open. Is it possible in javascript or jQuery or CSS3??
HTML Code:
<div id="menu">
<ul class="menu" id="tempMenu">
<li class="Home">Home</li>
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
<ul class="submenu">
<li>
<a id="one" href="">One</a>
</li></br>
<li>
<a id="two" href="">two</a>
</li>
<li>
<a id="three" href="">three</a>
</li>
<li>
<a id="four" href="">four</a>
</li>
<li>
<a id="five" href="">five</a>
</li>
<li>
<a id="six" href="">six</a>
</li>
<li>
<a id="seven" href="">seven</a>
</li>
<li>
<a id="eight" href="">eight</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div id="container">
<div id="box1" class="box">Image1<img src="images/image1.png"></div>
<div id="box2" class="box">Image2<img src="images/image2.png"></div>
</div>
CSS Code:
ul.menu .submenu{
display: none;
position: absolute;
}
ul.menu li:hover .submenu{
display: block;
}
$('.submenu').hover(function() {
$('#container').hide()
}, function() {
$('#container').show()
});
You basically want to detect on the hover event whenever the current menu item (one of the .menu > a elements) contains a submenu (.submenu).
What about :
$('.menu > a').hover(function(){
if ($(this).find('.submenu').length != 0) {
$('#container').hide();
}
}, function(){
$('#container').show();
});
Also, some of your html closing tags have issues, you should ensure that they are all closing in a correct order to prevent unexpected glitches.
firstly give that div 2 class names like-class1,class2
in Css :
.class1{
display: none;
position: absolute;
}
.class2{
display : block;
}
in jquery :
//this would track mouse pointer in/out events
$("#menu").hover( function(event){ $("#div").attr("class","class1"); },
function(event){ $("#div").attr("class","class1"); } );
You forgot to close this
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
to
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a></li><div>
for the Jquery i think this will help
$('.submenu').mouseenter(function() {
$('#container').hide()
}).mouseleave(function(){
$('#container').show()
});