I'm trying to figure out how to make this fade effect only happen when I hover over the parent LI's but it seems to fade in and out when I hover over the items in the dropdown too?
Any ideas???
I've tried a heap of examples on here, but I can't seem to figure this out for the life of me, and it's really starting to bug me!
Thanks heaps guys!
<style type="text/css">
/*style the main menu*/
.myMenu {
margin:0;
padding:0;
}
.myMenu li {
list-style:none;
float:left;
font:12px Arial, Helvetica, sans-serif #111;
}
.myMenu li a:link {
display:block;
text-decoration:none;
background-color:#09F;
padding: 0.5em 2em;
margin:0;
border-right: 1px solid #fff;
color:#111;
}
.myMenu li a:hover {
background-color:#0CF;
}
/*style the sub menu*/
.myMenu li ul {
position:absolute;
display: none;
border-top:1px solid #fff;
margin:0;
padding:0;
}
.myMenu li ul li {
display:inline;
float:none;
}
.myMenu li ul li a:link, .myMenu li ul li a:visited {
background-color:#09F;
width:auto;
}
.myMenu li ul li a:hover {
background-color:#0CF;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.myMenu li').on('mouseover', openSubMenu);
$('.myMenu li').on('mouseout', closeSubMenu);
function openSubMenu() {
$(this).find('ul').fadeIn()
};
function closeSubMenu() {
$(this).find('ul').fadeOut();
};
});
</script>
</head>
<body>
<ul class="myMenu">
<li>menu item 1</li>
<li>menu item 2
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>
<li>menu item 3
<ul>
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>
<li>menu item 4</li>
<li>menu item 5</li>
</ul>
</body>
</html>
Use this selector:
$('.myMenu > li').on('mouseover', openSubMenu);
instead of:
$('.myMenu li').on('mouseover', openSubMenu);
(obviously, apply to the same selector in other places)
Although, I like to use:
$('.myMenu').children('li').on('mouseover', openSubMenu);
It only selects the children <li> elements from the .myMenu element.
Also, it's necessary that the mouseenter and mouseleave events be used instead, because of weird bubbling issues.
DEMO: http://jsfiddle.net/MdfHB/
References:
http://api.jquery.com/child-selector/
http://api.jquery.com/children/
http://api.jquery.com/mouseenter/
http://api.jquery.com/mouseleave/
Like this: http://jsfiddle.net/dtbaf/1/
$('.myMenu > li').on('mouseenter', openSubMenu);
$('.myMenu > li').on('mouseleave', closeSubMenu);
Which selects only the immediate child lis of myMenu class.
Also use .mouseenter() and .mouseleave() events..
Related
I'm searching for a solution how to open and close the accordeon by hoovering over the parent links? I know i could add an hover-method but it always closes the accordeon when I remove the cursor. I should only close a menu when I'm hovering an a other item.
Would be great if someone could give me a hint!
$(document).ready(function () {
$('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
if($(".active").parent().parent().is('#nav')){
$(".active").next().slideToggle();
}else{
$(".active").parents('ul').siblings('a').click();
}
});
#nav {
float: left;
width: 280px;
}
#nav li a {
display: inline-block;
padding: 10px 15px;
text-decoration: none;
color: #000;
list-style:none;
}
#nav li a:hover, #nav li a.active {
}
#nav li ul {
display: none; // used to hide sub-menus
list-style:none;
}
#nav li ul li a {
padding: 10px 25px;
}
ul{
list-style:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
<li><a href="#" >Item 1</a>
<ul>
<li>Sub-Item 1 a</li>
<li>Sub-Item 1 b</li>
<li>Sub-Item 1 c</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub-Item 2 a</li>
<li>Sub-Item 2 b</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Sub-Item 3 a</li>
<li>Sub-Item 3 b</li>
<li>Sub-Item 3 c</li>
<li>Sub-Item 3 d</li>
</ul>
</li>
<li>Item 4
<ul>
<li>Sub-Item 4 a</li>
<li>Sub-Item 4 b</li>
<li>Sub-Item 4 c</li>
</ul>
</li>
</ul>
Here the same thing in jsfiddle:
https://jsfiddle.net/8y60hre0/8/
$(document).ready(function () {
$('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}else{
$('#nav li a').removeClass('active');
$(this).addClass('active');
$(this).next().slideToggle();
}
});
$('#nav > li > a').hover(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
if($(".active").parent().parent().is('#nav')){
$(".active").next().slideToggle();
}else{
$(".active").parents('ul').siblings('a').click();
}
});
I am new to jquery and have a vertical menu to be worked upon.The submenus of the menu are too much in number so the menu gets too deep when opened; so I need to slide out the submenus left instead of down when clicked upon.
the jquery code for the vertical menu is as follows:
jQuery(document).ready(function(){
$(".goo-collapsible > li > a").on("click", function(e){
if(!$(this).hasClass("active")) {
// hide any open menus and remove all other classes
$(".goo-collapsible li ul").slideUp(350);
$(".goo-collapsible li a").removeClass("active");
// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("active");
}else if($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).next("ul").slideUp(350);
}
});
});
I want to replace the slideUp() and slideDown() function with some other alternative without editting the other part of the code.
I would be too grateful to the supporters :)
You can refer below code. Tried to set correct CSS but still it have some bugs but functionality is there what you are looking for.
$(".goo-collapsible > li > a").on("click", function(e){
if(!$(this).hasClass("active")) {
// hide any open menus and remove all other classes
//$(".goo-collapsible li ul").slideUp(350);
$(".goo-collapsible li ul").hide();
$(".goo-collapsible li a").removeClass("active");
// open our new menu and add the open class
//$(this).next("ul").slideDown(350);
$(this).next("ul").show().animate({"left":"140px"}, "slow");
$(this).addClass("active");
}else if($(this).hasClass("active")) {
$(this).removeClass("active");
//$(this).next("ul").slideUp(350);
$(this).next("ul").animate({"left":"0px"}, "slow",function(){$(this).hide();});
}
});
.goo-collapsible{
width:120px;
border: solid 1px black;
}
.goo-collapsible > li {
background:cyan;
z-index:10;
opacity:1;
}
.goo-collapsible > li > a {
padding: 6px 9.5px;
}
ul, ol, li {
list-style: outside none none;
margin: 0;
padding: 0;
}
.dropdown-menu{
display:none;
left:0px;
position: absolute;
z-index:5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul class="goo-collapsible">
<li>Main Category
<ul class="dropdown-menu">
<li>Sub Cat 1</li>
<li>Sub Cat 2</li>
<li>Sub Cat 3</li>
</ul>
</li>
<li>
About us
<ul class="dropdown-menu">
<li>History</li>
<li>The team</li>
<li>Our address</li>
</ul>
</li>
</ul>
HTML code
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3
<ul>
<li>link 3.1</li>
<li>link 3.2
<ul>
<li>link 3.2.1</li>
<li>link 3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
li:hover{color: blue;font-weight:bold;}
li:hover li {color: red;font-weight:normal;}
li:hover li:hover{color: blue;font-weight:bold;}
This is my code , but when I print the text within the anchor tag (link 3.2.1) the CSS is not working and the color change that I try to implement for the link element is not working . How can I make it work in the same way , even if the text is inside the anchor tag? I wish to change the HTML code as follows
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3
<ul>
<li>link 3.1</li>
<li>link 3.2
<ul>
<li>link 3.2.1</li>
<li>link 3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
Remove the inline style from anchor and try with this css
li a{ color:red;}
li:hover, li:hover a{color: blue;font-weight:bold;}
li:hover ul a{color: red;font-weight:bold;}
li:hover ul li:hover > a{color: blue;font-weight:bold;}
updated jsFiddle File
Just add following css and remove inline css
a{ color:red;}
li:hover{color: blue;font-weight:bold;}
li:hover li {color: red;font-weight:normal;}
li:hover li:hover{color: blue;font-weight:bold;}
li:hover li:hover a:hover{color: blue;font-weight:bold;}
Updated demo http://jsfiddle.net/wcs1mhg6/2/
First you have to define color for a tag.
Add class for first ul
<ul class="list">
...
</ul>
for example
.list li a{
color:#000;
}
.list li a:hover
{
color:blue;
}
.list li:hover > ul li a
{
color:red;
}
.list li ul li a:hover
{
color:blue;
}
Look this http://jsfiddle.net/3wc7181c/
Try this you will get what you want
li a:hover{color: blue !important;font-weight:bold;}
li a:hover li {color: red;font-weight:normal;}
li a:hover li:hover,
li li li a:hover{color: blue !important;font-weight:bold;}
I think this is what you want?
li:hover{color: blue;font-weight:bold;}
li:hover li {color: red;font-weight:normal;}
li:hover li:hover li,
li:hover li:hover li a{color: blue !important;font-weight:bold;}
Demo
i try to realize how to do a vertical drop-down menu like on this site: http://haririsportsandmedicals.de/
It should "drop-down" when the onClick event happens and not at mousover.
Has anyone a code sample for doing something like this?
Would be very great, thanks.
Take a look at this. I think its pretty close to what you are seeking.
Demo: http://designshack.net/tutorialexamples/verticalnav/index.html
Tutorial/Guide: http://designshack.net/articles/css/verticalaccordionav/
Try this.
HTML
<div>
<ul>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Sub menu 1</li>
<li>Sub menu 2</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
<div>
CSS
*{
padding: 0px;
margin: 0px;
}
li{
list-style: none;
}
li a{
text-decoration: none;
height: 26px;
display: inline-block;
}
li ul{
display: none;
}
li li a{
margin-left: 10px;
}
jQuery
$(document).ready(function(){
$('li').click(function(){
$(this).children('ul').toggle();
});
});
Demo
JSFiddle # http://jsfiddle.net/UqyAq/
html -
<nav>
<ul>
<li>Button 1</li>
<li>Button 2
<ul>
<li>Sub-Button 1</li>
<li>Sub-Button 2</li>
<li>Sub-Button 3</li>
</ul>
</li>
<li>Button 3</li>
<li>Button 4</li>
<li>Button 5</li>
</ul>
</nav>
css -
* {
margin: 0;
padding: 0;
}
nav {
height: 100%; width: 18%;
position: absolute;
}
nav ul {
list-style-type: none;
font-family: 'Universal Accreditation', Serif;
font-size: 18pt;
letter-spacing: 1px;
font-variant: small-caps;
color: black;
}
nav ul ul {
display: none;
}
nav ul li {
display: block;
}
nav ul li:hover ul {
display: block;
}
Basically, you are looking at a simple un-ordered list drop down menu. I am trying to figure out what I need to use to create an easing effect on the drop down of the second tier. Hovering over 'Button 2' will bring up the sub-menu.
Notice how its a one jump movement. How would I slow it down? Maybe look like the sub-menu is sliding out from under 'Button 2'?
Should I use javascript or css?
Use this code..
HTML:
<ul id="menu">
<li>Link 1
<ul class="submenu">
<li>Sub Link 1.1
<ul class="submenu">
<li> Sub Link 1.1.1</li>
<li> Sub Link 1.1.2</li>
</ul>
</li>
<li>Sub Link 1.2</li>
<li>Sub Link 1.3</li>
</ul>
</li>
<li>Link 2
<ul class="submenu">
<li>Sub Link 2.1
<ul class="submenu">
<li> Sub Link 2.1.1</li>
<li> Sub Link 2.1.2</li>
</ul>
</li>
<li>Sub Link 2.2</li>
</ul>
</li>
</ul>
CSS:
.submenu
{
display: none;
}
#menu li ul{
margin-left:15px;
}
JQUERY:
$(document).ready(function () {
$('#menu > li').hover(function () { $(this).find("ul:first").show(); },
function () { $(this).find("ul:first").hide(); }
);
$('#menu li li').hover(function () {
$('ul:first', this).each(function () {
var p = $(this).parent();
$(this).css('top', p.position().top)
.css('left', p.position().left + p.width())
.show();
});},
function () { $('ul:first', this).hide(); }
);
});