What I basically has a side bar navigation with a couple of links. I want to be able to highlight the appropriate link according to the page I am on.
for some reasons, my code doesn't seem to be working.
here's the html file:
<div class='sidebar'>
<div class='title'>
Sonder
</div>
<ul class='nav'>
<li><a class='active' href='members.php?view = <?=$user?>'>Home</a></li>
<li><a href='members.php' >Members</a></li>
<li><a href='friends.php' >Friends</a></li>
<li><a href='messages.php'>Messages</a></li>
<li><a href='profile.php'>Edit Profile</a></li>
<li><a href='logout.php'>Logout</a></li>
</ul>
</div>
here's a part of the css:
.nav li a {
position: relative;
display: block;
padding: 15px 15px 15px 50px;
font-size: 12px;
color: #eee;
border-bottom: 1px solid #222;
cursor: pointer;
}
.nav li a:before {
font: 14px fontawesome;
position: absolute;
top: 14px;
left: 20px;
}
.nav li:nth-child(1) a:before {
content: '\f015';
}
.nav li:nth-child(2) a:before {
content: '\f0c2';
}
.nav li:nth-child(3) a:before {
content: '\f183';
left: 23px;
}
.nav li:nth-child(4) a:before {
content: '\f003';
}
.nav li:nth-child(5) a:before {
content: '\f013';
}
.nav li:nth-child(6) a:before {
content: '\f023';
left: 22px;
}
.nav li a:hover {
background: #444;
}
.nav li a.active {
box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
background: #444;
}
here's the javascript code:
$(document).ready(function() {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('active');
}
});
}
There are a couple of issues in your code.
The path JS variable is having a preceding forward slash, i.e. /members.php or /friends.php. For this reason, the path.substring(0, href.length) part is returning like /members.ph which doesn't match with any hrefs in the page.
The active class that highlights the menu, is on the anchor tag element, not in the li tag element as per the CSS you wrote, but with the JS you tried to add the active class to the li.
Here is a complete snippet that worked:
HTML:
<div class='sidebar'>
<div class='title'>Sonder</div>
<ul class='nav'>
<li><a class='active' href='members.php?view=<?=!empty($user)?:0?>'>Home</a></li>
<li><a href='members.php' >Members</a></li>
<li><a href='friends.php' >Friends</a></li>
<li><a href='messages.php'>Messages</a></li>
<li><a href='profile.php'>Edit Profile</a></li>
<li><a href='logout.php'>Logout</a></li>
</ul>
</div>
CSS:
.nav li a {
position: relative;
display: block;
padding: 15px 15px 15px 50px;
font-size: 12px;
color: #eee;
border-bottom: 1px solid #222;
cursor: pointer;
}
.nav li a:before {
font: 14px fontawesome;
position: absolute;
top: 14px;
left: 20px;
}
.nav li:nth-child(1) a:before {
content: '\f015';
}
.nav li:nth-child(2) a:before {
content: '\f0c2';
}
.nav li:nth-child(3) a:before {
content: '\f183';
left: 23px;
}
.nav li:nth-child(4) a:before {
content: '\f003';
}
.nav li:nth-child(5) a:before {
content: '\f013';
}
.nav li:nth-child(6) a:before {
content: '\f023';
left: 22px;
}
.nav li a:hover {
background: #444;
}
.nav li a.active {
box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
background: #444;
}
Script Block:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(1, path.length) === href) {
$(".nav a").removeClass('active');
$(this).addClass('active');
return;
}
});
}
</script>
This should work properly.
I moved your code around a bit and made the jquery work, not sure how well it will work in the snippet so here's a fiddle https://jsfiddle.net/link2twenty/wysh0j6q/
$('document').ready(function() {
setNavigation();
});
function setNavigation() {
var path = window.location.href;
path = (path.substring(path.lastIndexOf('/') + 1));
$(".nav .menu").each(function() {
var href = $(this).attr('href');
if (path === href) {
$(this).addClass('active');
}
})
}
body {
margin: 0;
}
li {
list-style: none;
}
.nav li a {
position: relative;
display: block;
padding: 15px 15px 15px 50px;
font-size: 12px;
color: #eee;
background: #333;
border-bottom: 1px solid #222;
cursor: pointer;
}
.nav li a:before {
font: 14px fontawesome;
position: absolute;
top: 14px;
left: 20px;
}
.nav li:nth-child(1) a:before {
content: '\f015';
}
.nav li:nth-child(2) a:before {
content: '\f0c2';
}
.nav li:nth-child(3) a:before {
content: '\f183';
left: 23px;
}
.nav li:nth-child(4) a:before {
content: '\f003';
}
.nav li:nth-child(5) a:before {
content: '\f013';
}
.nav li:nth-child(6) a:before {
content: '\f023';
left: 22px;
}
.nav li a:hover {
background: #444;
}
.nav li a.active {
box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
background: #444;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.4.js'></script>
<div class='sidebar'>
<div class='title'>
Sonder
</div>
<div class='nav'>
<li><a class='menu' href='#'>Home</a></li>
<li><a class='menu' href='#'>Members</a></li>
<li><a class='menu' href='#'>Friends</a></li>
<li><a class='menu' href='#'>Messages</a></li>
<li><a class='menu' href='js'>Edit Profile</a></li>
<li><a class='menu' href='#'>Logout</a></li>
</div>
</div>
Your CSS rules are executed on order, your active class overrides the hover.
Change position and it should work
.nav li a.active {
box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
background: #444;
}
.nav li a:hover {
background: #444;
}
Or add a specific active:hover rule
Change css rule to
.nav li.active a{}
Related
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 3 years ago.
How to change + to - when menu parent menu item is clicked. i was looking to target ::after element using jquery but i cant find way to target pseudo element using jquery
I want to change below css to when perent menu is clicked
.ir-nav-w > ul li::after {
/* padding-left: 10px; */
text-transform: uppercase;
content: "-";
position: absolute;
left: 15px;
top: 4px;
line-height: 30px;
font-size: 20px;
z-index: 0;
}
Fiddle code
$(".nav-w > ul > li > a").click(function() {
$(this).next().slideToggle();
});
//open active list
$('.nav-w ul li').children().has('.active-menu').css('display', 'block');
// compare url with nav url to show active url
$(function() {
//var url = window.location.href;
var url = window.location.pathname;
var pgurl = window.location.href.substr(
window.location.href.lastIndexOf("/") + 1
);
$(".nav-w ul li a").each(function() {
if ($(this).attr("href") == url || $(this).attr("href") == "") {
$(this).addClass("active-menu");
}
});
console.log("url : " + window.location.pathname);
});
.nav-w a {
color: black;
padding: 10px 15px;
padding-left: 35px;
text-decoration: none;
display: block;
border-bottom: 1px solid #f1f1f1;
font-size: 12px;
font-weight: 600;
/* color: #178B43 !important; */
color: #757575;
}
/* ul inside content area*/
.nav-w ul {
margin-left: 0px;
list-style-type: none;
margin-bottom: 0px;
}
.nav-w ul li {
/*padding-left: 10px;*/
text-transform: uppercase;
position: relative;
width: 100%;
}
/* ol inside content area*/
.nav-w>ul {
padding-left: 0px;
padding-right: 0px;
}
.nav-w ul>li ul {
padding-left: 0px;
padding-right: 0px;
display: none;
}
.active-menu {
color: red !important;
}
.nav-w>ul li::after {
text-transform: uppercase;
content: "+";
position: absolute;
left: 15px;
top: 4px;
line-height: 30px;
font-size: 20px;
z-index: 0;
}
.nav-w>ul li ul li::after {
text-transform: uppercase;
content: "";
position: absolute;
left: 0px;
top: 5px;
line-height: 32px;
font-size: 20px;
z-index: 0;
}
.nav-w ul li ul li a {
padding-left: 45px;
}
.nav-w a:hover {
background: #f5f5f5;
border-left: 2px solid #178B43;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-w">
<ul class="">
<li>Share Information
<ul class="" style="display: none;">
<li>Share Overview</li>
<li>Share Graph </li>
<li>Investement Calculator</li>
<li>Historical Share Prices</li>
</ul>
</li>
<li>Financial Information
<ul class="" style="display: none;">
<li>Earning Releases</li>
<li>Financial Statements</li>
<li><a href="/investor-relations/financial-information/presentation">Presentation
</a></li>
<li><a href="/investor-relations/financial-information/quarterly-key-figures">Quarterly Key Figures
</a></li>
<li><a href="/investor-relations/financial-information/annual-key-figures">Annual Key Figures
</a></li>
</ul>
</li>
</ul>
</div>
The way I would do it is to add a class to the parent menu after it is clicked, such as open.
And then in your css you could add a special modifier:
.nav-w > ul li.open::after {
content: "-"
}
And when it is click again, remove the class open.
You can't manipulate :after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. But you can add a new class with a new ::after specified.
Add this to your code:
// JS
const $listItems = $('.ir-nav-w > ul li');
$listItems.onClick(
$listItems.removeClass('closed');
this.addClass('closed')
);
// CSS
.ir-nav-w > ul li.closed::after {
content: "+";
}
Trick is to add css:
.nav-w > ul li.selected::after {
content: "-";
}
and toggle selected class on click:
$(".nav-w > ul > li > a").click(function () {
$(this).parent().toggleClass("selected");
$(this).next().slideToggle();
});
$(".nav-w > ul > li > a").click(function () {
$(this).parent().toggleClass("selected");
$(this).next().slideToggle();
});
//open active list
$('.nav-w ul li').children().has('.active-menu').css('display', 'block');
.nav-w a {
color: black;
padding: 10px 15px;
padding-left: 35px;
text-decoration: none;
display: block;
border-bottom: 1px solid #f1f1f1;
font-size: 12px;
font-weight: 600;
/* color: #178B43 !important; */
color: #757575;
}
/* ul inside content area*/
.nav-w ul{
margin-left: 0px;
list-style-type:none;
margin-bottom:0px;
}
.nav-w ul li{
/*padding-left: 10px;*/
text-transform:uppercase;
position:relative;
width:100%;
}
/* ol inside content area*/
.nav-w > ul {
padding-left: 0px;
padding-right: 0px;
}
.nav-w ul > li ul {
padding-left: 0px;
padding-right: 0px;
display:none;
}
.active-menu {
color: red !important;
}
.nav-w > ul li::after {
text-transform: uppercase;
content: "+";
position: absolute;
left: 15px;
top: 4px;
line-height: 30px;
font-size: 20px;
z-index: 0;
}
.nav-w > ul li.selected::after {
content: "-";
}
.nav-w > ul li ul li::after {
text-transform: uppercase;
content: "";
position: absolute;
left: 0px;
top: 5px;
line-height: 32px;
font-size: 20px;
z-index: 0;
}
.nav-w ul li ul li a {
padding-left:45px;
}
.nav-w a:hover {
background: #f5f5f5;
border-left: 2px solid #178B43;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-w">
<ul class="">
<li>Share Information
<ul class="" style="display: none;">
<li>Share Overview</li>
<li>Share Graph </li>
<li><a href="/investor-relations/share-nformations/investor-calculator/" >Investement Calculator</a></li>
<li>Historical Share Prices</li>
</ul>
</li>
<li>Financial Information
<ul class="" style="display: none;">
<li>Earning Releases</li>
<li>Financial Statements</li>
<li><a href="/investor-relations/financial-information/presentation">Presentation
</a></li>
<li><a href="/investor-relations/financial-information/quarterly-key-figures">Quarterly Key Figures
</a></li>
<li><a href="/investor-relations/financial-information/annual-key-figures">Annual Key Figures
</a></li>
</ul>
</li>
</ul>
</div>
It's not actually possible to target :after, because it isn't part of the DOM and can't be accessed through JavaScript code. This isn't a jQuery limitation.
You could just set a class on the element itself, and change the :after rule when the class is set, i.e.:
.nav-w > ul li.active::after
{
content: "-"
}
Add active class to the anchors' parent:
$(".nav-w > ul > li a").click(function () {
$(this).next().slideToggle();
$(this).parent().toggleClass('active');
});
And replace ::after on the active class:
.nav-w > ul li.active::after {
content: '-'
}
You can do with :after prop.
You can do something like this
.li-item::after{
content: "+";
}
.li-item-minus::after{
content: "-" !important;
}
While in jQuery - you can toggle class .li-item-minus on click of each list item
jQuery(".naw-v ul li").on("click", function(){
jQuery(this).toggleClass("li-item-minus");
});
Which means - on click of this li element, you toggleClass li-item-minus which has different content form main one.
I have a horizontal responsive menu that works great, here is link to the page with it
I tried to make a new one with dropdown menus but can't get it to work. Instead of having a dropdown appear on hover, it shows the menus automatically in the line below. Here is link to codepen showing the errors http://codepen.io/mlegg10/pen/akLaVA
$(document).ready(function() {
$('nav').prepend('<div id="responsive-nav" style="display:none">Menu</div>');
$('#responsive-nav').on('click', function() {
$('nav ul').slideToggle()
});
$(window).resize(function() {
if ($(window).innerWidth() < 768) {
$('nav ul li').css('display', 'block');
$('nav ul').hide()
$('#responsive-nav').show()
} else {
$('nav ul li').css('display', 'inline-block');
$('nav ul').show()
$('#responsive-nav').hide()
}
});
$(window).resize();
});
$(document).on('scroll', function() {
if ($(document).scrollTop() > 100) {
$('#nav').addClass('fixed')
} else {
$('#nav').removeClass('fixed')
}
});
body {
margin: 0;
font-family: Georgia;
}
#menu-bar {
width: 100%;
height: auto;
margin: 50px auto 0;
background-color: #ff4500;
text-align: center;
}
#header h1 {
padding: 15px 0;
margin: 0;
}
#nav {
background-color: #036;
text-align: center;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0
}
#nav ul li {
display: inline-block;
padding: 5px 0;
margin: 0;
}
#nav.fixed {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
nav ul li a {
padding: 0 5px;
text-decoration: none;
color: #fff;
}
nav ul li:hover {
background-color: #ff0000;
}
#responsive-nav {
cursor: pointer;
color: #fff;
font-family: Georgia;
font-weight: bold;
padding: 5px 0;
}
#content {
width: 90%;
margin: 0 auto 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #ddd;
padding: 5px;
}
#drop-nav li ul li {
border-top: 0px;
#drop-nav li ul li {
border-top: 0px;
}
ul li a {
display: block;
background: #036;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #f00;
}
**this part is in the head tags:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://responsive-nav.com/demo/responsive-nav.js"></script>**
<header id="menu-bar">
<nav id="nav">
<ul>
<li>Home
</li>
<li>Accomodations
</li>
<li>Amenities
</li>
<li>Rates
</li>
<li>Links
<ul>
<li>Dropwdown 1
</li>
<li>Dropdown 2
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
Your javascript code has lots of unclosed line endings - you are missing the semicolons quiet often.
Additionally, jQuery will apply nav ul to all elements it finds. Meaning if there is a second occurrence, which is the case in your case, it will be applied to that too.
Instead: you should give your level 0 menu a clean, identifiable class, which you can preciesly target:
<!-- Your new HTML Markup -->
<nav class="mother-of-all-dropdown-lists">
and then in your jQuery:
$('.mother-of-all-dropdown-lists').slideToggle();
Sorry, that I keep writing, there are jQuery selectors wrong as well:
The id / hashtag is missing, so..:
$('nav ul li').css('display','inline-block');
$('nav ul').show()
should be:
$('#nav ul li').css('display','inline-block');
$('#nav ul').show();
I've created myself a accordion menu, but I've got a problem. When I click for the first time on 'li' element slideUp doesn't work.
$(document).ready(function() {
$('#menu ul li a').click(function(e) {
e.preventDefault();
if ($(this).parent().hasClass('active')) {
if ($(this).next().is(':visible')) {
$(this).next().slideUp();
$(this).parent().removeClass('active');
} else {
$(this).next().slideDown();
}
} else {
$('#menu ul li').each(function() {
$(this).removeClass('active');
});
$('#menu ul li ul').slideUp();
$(this).next().slideDown();
$(this).parent().addClass('active');
}
});
});
#menu,
#menu ul,
#menu li,
#menu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#menu a {
line-height: 1.3;
}
#menu > ul > li {
margin: 0;
}
#menu > ul > li:last-child {
margin: 0;
}
#menu > ul > li > a {
font-size: 15px;
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
padding: 5px;
}
#menu > ul > li > a > span {
display: block;
padding: 6px 10px;
font-weight: bold;
}
#menu > ul > li > a:hover {
text-decoration: none;
background: #0074a2 url('../img/icons/menuActive.png') no-repeat 101%;
}
#menu > ul > li.active {
border-bottom: none;
}
#menu > ul > li.active > a {
background: #0074a2 url('../img/icons/menuActive.png') no-repeat 101%;
color: #fff;
text-shadow: 0 1px 1px #000;
}
/* Sub menu */
#menu ul ul {
padding: 5px 12px;
display: none;
background: #333333;
}
#menu ul ul li {
padding: 3px 0;
}
#menu ul ul a {
display: block;
color: #fff;
font-size: 13px;
font-weight: bold;
padding: 10px 0;
}
#menu ul ul a:hover {
color: #0074a2;
}
#menu ul li.active ul {
display: block;
}
#menu ul li img {
float: left;
margin: -2px 4px 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<ul>
<li class='has-sub active'><a href='#'><span>AAA</span></a>
<ul>
<li><a href='#'><span>AAA_1</span></a></li>
<li><a href='#'><span>AAA_2</span></a></li>
<li><a href='#'><span>AAA_3</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>BBB</span></a>
<ul>
<li><a href='#'><span>BBB_1</span></a></li>
<li><a href='#'><span>BBB_2</span></a></li>
</ul>
</li>
<li class='has-sub last'><a href='#'><span>CCC</span></a>
<ul>
<li><a href='#'><span>CCC_1</span></a></li>
<li><a href='#'><span>CCC_2</span></a></li>
<li><a href='#'><span>CCC_3</span></a></li>
<li><a href='#'><span>CCC_4</span></a></li>
</ul>
</li>
</ul>
</div>
Here is my simple code typed in jsfiddle.
jsfiddle
Could anyone tell me where is an error and how to solve it ?
Thanks !
The state of the html goes like this:
1. From start: <ul>
2. After you click once: <ul style="display: none;">
3. After you click it again: <ul style="display: block;">
Now I'm not that great when it comes to css, but if you keep track of the dynamic css which goes on when you press it, then you'll know what attributes you are missing on your styling.
The problem is active class has been removed before finishing slideUp animation. Use setTimeout function like following.
setTimeout(function(){
$(this).parent().removeClass('active')
}, 0);
You can increase time if you need.
Update:
I think your selector should be.
$('#menu > ul > li > a')
instead of
$('#menu ul li a')
I want to add side menus to the sub-menus like PRODUCT 1, PRODUCT 2 etc. that appear on the side on hover over them. How do I do that on the following code?
This is the code that I have so far.
CSS:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 600, 300);
#charset"UTF-8";
/* Base Styles */
#cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family:'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 300px;
margin-left: 90px;
background: #A3FFFF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 3px;
padding: 3px;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#cssmenu > ul > li {
margin: 0 0 3px 0;
}
#cssmenu > ul > li:last-child {
margin: 0;
}
#cssmenu > ul > li > a {
font-size: 15px;
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
background: #A3FFFF;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient (linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
border: 1px solid #000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#cssmenu > ul > li > a > span {
display: block;
border: 1px solid #666666;
padding: 6px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: bold;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
font-weight: bold;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
background: #47A3FF;
background: -moz-linear-gradient(#47A3FF 0%, #47A3FF 100%);
background: -webkit-gradient (linear, left top, left bottom, color-stop(0%, #47A3FF), color-stop(100%, #47A3FF));
background: -webkit-linear-gradient(#47A3FF 0%, #47A3FF 100%);
background: linear-gradient(#47A3FF 0%, #47A3FF 100%);
color: #fff;
text-shadow: 0 1px 1px #fff;
border: 1px solid #47A3FF;
}
#cssmenu > ul > li.active > a span {
border: 1px solid #47A3FF;
}
#cssmenu > ul > li.has-sub > a span {
background: url(images/icon_plus.png) 98% center no-repeat;
}
#cssmenu > ul > li.has -sub.active > a span {
background: url(images/icon_minus.png) 98% center no-repeat;
}
/* Sub menu */
#cssmenu ul ul {
padding: 5px 12px;
display: none;
}
#cssmenu ul ul li {
padding: 3px 0;
}
#cssmenu ul ul a {
display: block;
color: #191975;
font-size: 13px;
font-weight: bold;
}
#cssmenu ul ul a:hover {
color: cornflowerblue;
font-weight:bold;
}
JS:
(function ($) {
$(document).ready(function () {
$('#cssmenu > ul > li > a').click(function () {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if ($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
});
})(jQuery);
HTML:
<div id='cssmenu'>
<ul>
<li class='has-sub'>
<a href='#'><span>CENTRAL COMPLIANCE</span></a>
<ul>
<li><a href='#'><span>PRODUCT 1</span></a></li>
<hr>
<li><a href='#'><span>PRODUCT 2</span></a></li>
<hr>
<li><a href='#'><span>PRODUCT 3</span></a></li>
<hr>
<li><a href='#'><span>PRODUCT 4</span></a></li>
<hr>
<li><a href='#'><span>GEPOC</span></a></li>
<hr>
<li><a href='#'><span>Global Registration</span></a></li>
<hr>
<li><a href='#'><span>MBL</span></a></li>
<hr>
<li><a href='#'><span>Account Affirmations</span></a></li>
<hr>
<li class='last'><a href='#'><span>Outside Affiliations</span></a></li>
</ul>
</li>
<li class='has-sub'>
<a href='#'><span>CONTROL ROOM</span></a>
<ul>
<li><a href='#'><span>CDS</span></a></li>
<hr>
<li><a href='#'><span>UK Registration</span></a></li>
<hr>
<li class='last'><a href='#'><span>Compliance Portal</span></a></li>
</ul>
</li>
<li class='has-sub'>
<a href='#'><span>LARGE HOLDINGS</span></a>
<ul>
<li class='last'><a href='#'><span>LHO</span></a></li>
</ul>
</li>
<li class='has-sub'>
<a href='#'><span>ORCHESTRIA</span></a>
<ul>
<li class='last'><a href='#'><span>Orchestria</span></a></li>
</ul>
</li>
</ul>
</div>
Please help me edit this code. Thanks.
The css attribute :hover should work well. Begin with a div that has a display of none. Then on hover of product 1, for example, change to display block.
.side-menu {
display:none;
}
.product1:hover > .side-menu {
display:block;
}
It is important to note that this only works if the menu item that is to be hidden and shown is a child of the the item you are hovering over. That shouldn't be an issue for you.
Edit for Clarification:
In your HTML add the ul that will hold your side menu. Assign a class to the ul. This is how you create a nested list. Also add a class to the li product 1 so that we can select it.
<li>Product1</li>
<ul class="side-menu">
<li>first sub menu item</ul>
</ul>
</li>
Now your css. It will be the same as what I wrote above because I used the same class names. What happens is when the page loads the side menu will be hidden because the display is set to none. When you :hover over the html element with a class of 'product1' it changes the display attribute of the side menu from none to block.
You will still need to position the new menu item appropriately.
I have used JavaScript to create 3 clickable drop-down menu button in a webpage. when I click one button, script is works well. I can see the following menu is displayed. When I another button, the following menu is displayed. however, the previous menu is still there.
Here is my script. Hope someone can help me. Thank you!
<script type="text/javascript" >
$(document).ready(function() {
$(".account").click(function() {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id', '0');
} else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function() {
return false
});
//Mouse click on my account link
$(".account").mouseup(function() {
return false
});
//Document Click
$(document).mouseup(function() {
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>
// CSS
.dropdown
{
color:#000;
margin: 0px 22px 0 0;
width: 300px;
height: 30px;
text-align:center;
}
.submenu
{
background:#FFF ;
position: absolute;
top: 118px;
left: 515px;
z-index: 100;
width: 250px;
display: none;
border-radius: 6px;
border: outset 2px #0066FF;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05);
}
.dropdown li a
{
color:#555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
margin-top:-5px;
}
.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account
{
font-size: 18px;
line-height: 10px;
color: #000;
border: ridge 2px #0066FF;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 0px;
height: 20px;
width: 300px;
margin: 0px 0 0 0px;
text-align:center;
text-decoration: none;
background: url(images-new/arrow.png) 275px 9px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
// html
<div class="dropdown">
<a class="account" >My Account</a>
<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li >Settings</li>
<li >Send Feedback</li>
</ul>
</div>
</div>
My personal recommendation is to do this with with a combination of JS & CSS.
You should use an active class to hide and show your elements:
//JS
$('.menu a').on('click', function({
$('.menu a').removeClass('active');
$(this).addClass('active');
});
// CSS
.active .submenu {
display: block;
}