Javascript adaption to current page - javascript

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>

Related

Resize submenu when page overflow happens

My submenu Category, overflow the page when resized to a small screen. How do I make the submenu to go to the left everytime this happens?
Here is what's happening
And here is how I want to be
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
border: 1px solid black;
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
<li>Menu 8
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
</nav>
I searched for getBoundingClientRect but I don't know how to implement it. I also tried this plugin but didn't help. https://github.com/gijsroge/offscreen.js/
How can i do this with pure javascript ?
Help much appreciated...

All I had to do was to apply a media query,
#media screen and (max-width:1022px) {
#primary_nav_wrap ul ul ul {
left: -101%;
}
}
problem solved.
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
border: 1px solid black;
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
#media screen and (max-width:1022px) {
#primary_nav_wrap ul ul ul {
left: -101%;
}
}
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Menu 7</li>
<li>Menu 8
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
</nav>

Hover action on Acordeon menu

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

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

Categories

Resources