Develop Reference

Javascript adaption to current page

I made a java script menu. Everything is working like a charm exept the open sections should adapt automaticly. When there is the class "active" in a specific li element this menu element should be open.
Now always the first li element is open, also when the class changes it is still open.
Can you help me solving this issue?
Demonstration:
https://jsfiddle.net/fj8fywuy/
Thank you in advance!
$(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');
$('#nav li a').parent().removeClass('active');
$(this).addClass('active');
$(this).parent().addClass('active'); // li tag inside active class
}
});
if($(".active").parent().parent().is('#nav')){
$(".active").next().slideToggle();
}else{
$(".active").parents('ul').siblings('a').click();
}
$('#nav > li > a:first').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;
}
#nav li.sub {
padding-left: 35px;
}
ul{
list-style:none;
}
.active
{
background:#c2c2c2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
<li class="active">Item 1
<ul>
<li><a href="#" >Sub-Item 1 a</a></li>
<li>Sub-Item 1 b</li>
<li>Sub-Item 1 c</li>
<li class="sub"><a href="#" >Sub-sub-Item 1 a</a></li>
<li class="sub"><a href="#" >Sub-sub-Item 2 a</a></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>

you have little issue in js i have fixed it and seems everything works fine now.
I have just replaced
$('#nav > li > a:first').click();
with
$('#nav li.active a').click();
so this will find active li and open it at start.
$(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');
$('#nav li a').parent().removeClass('active');
$(this).addClass('active');
$(this).parent().addClass('active'); // li tag inside active class
}
});
if($(".active").parent().parent().is('#nav')){
$(".active").next().slideToggle();
}else{
$(".active").parents('ul').siblings('a').click();
}
$('#nav li.active 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;
}
#nav li.sub {
padding-left: 35px;
}
ul{
list-style:none;
}
.active
{
background:#c2c2c2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
<li>Item 1
<ul>
<li><a href="#" >Sub-Item 1 a</a></li>
<li>Sub-Item 1 b</li>
<li>Sub-Item 1 c</li>
<li class="sub"><a href="#" >Sub-sub-Item 1 a</a></li>
<li class="sub"><a href="#" >Sub-sub-Item 2 a</a></li>
</ul>
</li>
<li class="active">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>

Change vertical slider to horizontal

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>

Change the color of <li> parents on hover

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

jQuery select only the parent li in a dropdown menu

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..

How can I make my vertical drop down menu with an ease effect?

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(); }
);
});