Creating a dropdown menu - javascript

I have a menu that contains a submenu which gets displayed below the main menu when a link inside the main menu is hovered over. What I want to do is add a second submenu inside the first submenu but make it a dropdown. I am not that great at css and I was wondering if anyone can help me with this. I haved followed some tutorials online and I was not able to get the results I was looking for. Here is the html and css I have so far.
<div id="navigation">
<ul id="mymenu">
<li>Home</li>
<li>Gallery</li>
<li>What We Do</li>
<li>Contact</li>
</ul>
</div>
<div id="sublinks">
<ul id="s1">
<li>General</li>
<li>Landon News</li>
<li>Trust Us</li>
</ul>
<ul id="s2">
<li>
Security Systems
<ul id="s2sys">
<li>Arlington HA</li>
<li>Enfield HA</li>
<li>Revere HA</li>
</ul>
</li>
<li>
WLAN Systems
<ul id="s2wlan">
<li>Beverly HA</li>
<li>Holyoke HA</li>
<li>Meriden HA</li>
<li>Revere HA</li>
</ul>
</li>
</ul>
<ul id="s3">
<li>Computers</li>
<li>Strategic Planning</li>
<li>Security Systems</li>
<li>WLAN, WiFi Broadband</li>
</ul>
<ul id="s4">
<li>Email</li>
<li>Address Info</li>
</ul>
</div>
Here is the javascript for the main menu which will display the first submenu
function showsubmenu(id){
submenu = document.getElementById('s'+id);
for(i=1;i<=4;i++){
if(i==id){
submenu.style.display="block";
} else {
document.getElementById('s'+i).style.display="none";
}
}
}
sfHover = function() {
var sfEls = document.getElementById("sublinks").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Here is the CSS
#navigation{
height:32px;
margin:0 auto;
width:auto;
}
#navigation ul{
height:32px;
line-height:32px;
}
#navigation ul li{
display:inline;
}
#navigation ul li a,
#navigation ul li a:visited {
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#1361A5;
font-weight:bold;
text-shadow:#ffffff 2px 2px 2px;
}
#navigation ul li a:hover{
color:#C3C2C1;
}
/* ----------- Sub Menu ----------- */
#sublinks{
width:auto;
margin:0 auto;
background:#C3C2C1;
height:30px;
font-size:11px;
border-radius:8px;
-moz-border-radius:8px; /* Firefox 3.6 and earlier */
-webkit-border-radius: 8px;
-webkit-box-shadow: 0 2px 3px rgba(136, 136, 136, 1);
-moz-box-shadow: 0 2px 3px rgba(136, 136, 136, 1);
box-shadow: 0 2px 3px rgba(136, 136, 136, 1);
behavior: url(http://localhost/landon/assets/pie/PIE.php);
position: relative;
}
#sublinks ul{
height:32px;
line-height:31px;
}
#sublinks ul li{
display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited {
padding:0 10px;
display:block;
text-decoration:none;
float:left;
color:#FFFFFF;
}
#sublinks ul li a:hover{
text-decoration:underline;
}
#sublinks li:hover ul{
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#sublinks li:hover li {
float: none;
}
#sublinks li:hover li a {
background-color: #C3C2C1;
border-bottom: 1px solid #fff;
color: #000;
left:50;
}
#sublinks li li a:hover {
background-color: #8db3ff;
}
/* ----------- Hide Sub menu ----------- */
#s2, #s3, #s2sys, #s2wlan{display:none;}
What I am trying to do is make the second submenu a dropdown from the first submenu and at the moment it displays within the same line and not as a dropdown. How can I do this?

http://jsfiddle.net/kVztG/1/
To make the sub-sub-menu a dropdown change the css below.
#sublinks li:hover li {
display:block;
position:relative;
top:30px;
}
The position:relative and top:30px stop the dropdowns from appearing ontop of the sub-menu, and display:block stops the li from display inline.

Try adding this css to your drop down ul list that is within your sub-menu.
position: absolute;
top: 30px;
Depending on the type of result your looking for, you might want to amend the top value, or have the dropdown vertical by adding a width
Demo: http://jsfiddle.net/4k2Tx/2/

Related

Why does my tab switch not work? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm having a difficult time figuring out why my tabbed id is not working or functioning like it should. On a click, its supposed to replace the text with something different (i.e. page under construction).
Here is what I have so far..
HTML
<!doctype html>
<html>
<head>
<title>Main Page</title> <!--main page title -->
<script type="text/javascript" scr="home_page.js"></script>
<link rel="stylesheet" type="text/css" href="home_page.css"/>
</head>
<body>
<h1> Express Shop </h1>
<div class="content">
<div class="navbar">
<ul>
<li>Home</li>
<li>Inventory</li>
<li>Directions</li>
<li>Contact Us</li>
</ul>
</div>
<div id="tab1" class="tab active">
<h3>Welcome to Express Shop!</h3>
<p>Your one stop shop for repairs! We work with various laptops, PCs, iPhones, iPads, tablets, smart phones and more!</p>
<p> We are also an authorized dealer for PagePlus Cellular and have many products in our inventory for sale.</p>
</div>
<div id="tab2" class="tab">
<h3>Inventory</h3>
<p>Page Under Construction<p>
</div>
<div id="tab3" class="tab">
<h3>Directions</h3>
<p>Page Under Construction</p>
</div>
<div id="tab4" class="tab">
<h3>Contact Us</h3>
<p>Page Under Construction</p>
</div>
</div>
</body>
</html>
CSS
h1 {
font:bold 65px/60px Helvetica, Arial, Sans-serif;
text-shadow:0px 2px 6px #333;
}
.content p {
margin:20px;
}
.tab { /*turn off display of all tabs(in-active) */
display:none;
}
.navbar {
position:relative;
margin:0px 0px 0px -40px;
/*border around tabs */
}
.navbar ul {
list-style:none;
}
.navbar ul li {
display:inline-block;
}
.navbar ul li:first-child a {
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}
.navbar ul li:last-child a {
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
}
.navbar ul li a {
text-decoration:none;
font:bold 14px Helvetica, Sans-Serif;
padding:10px;
margin-right:-7px;
/*border-radius:3px; */
background-color:#E0E0E0;
transition:all linear 0.15s;
}
.navbar ul li a:hover {
background-color:rgb(255, 173, 10);
}
/* needs to be fixed */
.navbar ul li a.active {
background-color:rgb(255, 173, 10);
}
.tab.active {
display:inherit;
clear:both;
margin-top:-7px;
border:1px solid black;
width:700px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
h3 {
text-transform:uppercase;
padding:10px 0px 0px 10px;
color:black
text-shawdow:#000 0px 0px 2px;
}
JavaScript
$(home_page.html).ready(function() {
$('navbar ul li a').click(function() {
var tab_id =$(this).attr('href');
$('navbar ul li a').removeClass('active');
$('tab').removeClass('active');
$(this).addClass('active');
$("#" + tab_id).addClass('active');
});
});
Problems:
You need to include jQuery library in your header, before your own script
$(document).ready - this makes your code run when the page is loaded
When you want to select a class, you need to add a . before it (just like CSS), for example you had $('navbar ul li a') which should be $('.navbar ul li a')
In your tab links, you only had href="#", you need to put the correct id of the tabs (e.g. #tab1), and since you already have # here, you don't need it again in $(tab_id)
I have fixed your code and you can try a working version below:
$(document).ready(function() {
$('.navbar ul li a').click(function() {
var tab_id = $(this).attr('href');
$('.navbar ul li a').removeClass('active');
$('.tab').removeClass('active');
$(this).addClass('active');
$(tab_id).addClass('active');
});
});
h1 {
font:bold 65px/60px Helvetica, Arial, Sans-serif;
text-shadow:0px 2px 6px #333;
}
.content p {
margin:20px;
}
.tab { /*turn off display of all tabs(in-active) */
display:none;
}
.navbar {
position:relative;
margin:0px 0px 0px -40px;
/*border around tabs */
}
.navbar ul {
list-style:none;
}
.navbar ul li {
display:inline-block;
}
.navbar ul li:first-child a {
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
}
.navbar ul li:last-child a {
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
}
.navbar ul li a {
text-decoration:none;
font:bold 14px Helvetica, Sans-Serif;
padding:10px;
margin-right:-7px;
/*border-radius:3px; */
background-color:#E0E0E0;
transition:all linear 0.15s;
}
.navbar ul li a:hover {
background-color:rgb(255, 173, 10);
}
/* needs to be fixed */
.navbar ul li a.active {
background-color:rgb(255, 173, 10);
}
.tab.active {
display:inherit;
clear:both;
margin-top:-7px;
border:1px solid black;
width:700px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
h3 {
text-transform:uppercase;
padding:10px 0px 0px 10px;
color:black
text-shawdow:#000 0px 0px 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Express Shop </h1>
<div class="content">
<div class="navbar">
<ul>
<li>Home</li>
<li>Inventory</li>
<li>Directions</li>
<li>Contact Us</li>
</ul>
</div>
<div id="tab1" class="tab active">
<h3>Welcome to Express Shop!</h3>
<p>Your one stop shop for repairs! We work with various laptops, PCs, iPhones, iPads, tablets, smart phones and more!</p>
<p> We are also an authorized dealer for PagePlus Cellular and have many products in our inventory for sale.</p>
</div>
<div id="tab2" class="tab">
<h3>Inventory</h3>
<p>Page Under Construction<p>
</div>
<div id="tab3" class="tab">
<h3>Directions</h3>
<p>Page Under Construction</p>
</div>
<div id="tab4" class="tab">
<h3>Contact Us</h3>
<p>Page Under Construction</p>
</div>
</div>

Highlight next menu item using jquery

Hi I am trying to implement a feature in my website where when i click on a menu item the highlight should be able to flow to the next menu item.From the below example if I click on people the menu should highlight people and then also highlight the next case in the menu which is tourist.. I am using CSS for hover but what I understand from other posts is that a:active doesn't work with CSS?
This is what I have so done so far:
HTML
<section id="nav">
<li><a class="nav" href="People.html">People</a></li>
<li><a class="nav" href="Tourist.html">Tourist</a></li>
<li><a class="nav" href="Joints.html">Joints</a></li>
<li><a class="nav" href="Project.html">Project</a></li>
<li><a class="nav" href="Products.html">Products</a></li>
<li><a class="nav" href="cafes.html">cafes</a></li>
</section>
jQuery
<script>
$(function() {
$('#nav').on('click','.nav', function ( e ) {
e.preventDefault();
$(this).parents('#nav').find('.active').removeClass('active').end().end().addClass('active');
$(activeTab).show();
});
});
</script>
CSS
#nav{
width:100%;
text-align:center;
min-width:1300px;
height:80px;
position:absolute;
top:0;
left:0;
background:#fff;
list-style:none;
border-bottom: 1px solid #000;
}
#nav li{
display:inline;
}
#nav .nav{
display:inline-block;
background-color:#000;
color:#FFF;
font-family: 'Oswald', sans-serif;
letter-spacing:1px;
font-size:16pt;
line-height:18pt;
font-weight:400;
text-decoration:none;
margin-right: 3px;
margin-left: 3px;
margin-top:35px;
padding:0px 3px 2px 3px;
}
#nav .nav:hover{
background:#FFFF00;
color:#000;
}
.active{
background:#FFFF00;
color:#000;
}
Please help me with this.I am stuck up on this
This should do the trick for you (if I understand the question correctly):
$('#nav').on('click','.nav', function ( e ) {
e.preventDefault();
// remove all "active" classes:
$('.active').removeClass('active');
// find the next menu item and append "active" class:
$(this).parent().next('li').find('.nav').addClass('active');
$(activeTab).show();
});
Add !important to .active styles (you need to override parent dependent styles, as you set them like: #nav .nav):
.active{
background:#FFFF00 !important;
color:#000 !important;
}
JSFiddle demo
if you want to highlight the next item in the menu, you simply need to retrieve the index of the menu item (index of the <li> in your case), and calculate the next one:
UPDATE:
added animation to snippet
$(function () {
$('#nav').on('click', '.nav', function (e) {
e.preventDefault();
var NextMenuID = ($(this).parent().index()+1)%$(this).parent().parent().children().length;
var NextItem =$('#nav .nav').eq(NextMenuID);
$('#nav .nav').removeClass("active");
var x1=$(this).offset().left;
var y1=$(this).offset().top;
var width1=$(this).width();
var height1=$(this).height();
var x2=NextItem.offset().left;
var y2=NextItem.offset().top;
var width2=NextItem.width();
var height2=NextItem.height();
var slidingDiv=$("<div/>");
slidingDiv.css({
"width":width1,
"height":height1,
"left":x1,
"top":y1,
"display":"block",
"position":"absolute",
"background":"#FFFF00",
"padding":"0px 3px 2px 3px"
}).appendTo($("body")).animate({
"width":width2,
"height":height2,
"left":x2,
"top":y2,
},function(){
NextItem.addClass("active");
slidingDiv.remove();
});
//$(activeTab).show();
});
});
#nav {
width:100%;
text-align:center;
height:80px;
position:absolute;
top:0;
left:0;
background:#fff;
list-style:none;
border-bottom: 1px solid #000;
}
#nav li {
display:inline;
}
#nav .nav {
display:inline-block;
background-color:#000;
color:#FFF;
font-family:'Oswald', sans-serif;
letter-spacing:1px;
font-size:16pt;
line-height:18pt;
font-weight:400;
text-decoration:none;
margin-right: 3px;
margin-left: 3px;
margin-top:35px;
padding:0px 3px 2px 3px;
}
#nav .nav:hover {
background:#FFFF00;
color:#000;
}
.active {
background:#FFFF00 !important;
color:#000 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="nav">
<li><a class="nav" href="People.html">People</a>
</li>
<li><a class="nav active" href="Tourist.html">Tourist</a>
</li>
<li><a class="nav" href="Joints.html">Joints</a>
</li>
<li><a class="nav" href="Project.html">Project</a>
</li>
<li><a class="nav" href="Products.html">Products</a>
</li>
<li><a class="nav" href="cafes.html">cafes</a>
</li>
</section>
If you have any questions about the example, feel free to ask.

Highlight active menu and submenu using JavaScript

I have mostly got this work, however I have 2 issues:
The Home menu link always remains active
When I select a sub-menu item, the sub-menu item shows as active, however I also require the parent to remain active.
See the live site here - http://www.lync.geek.nz/
JavaScript:
<script type='text/javascript'>
//<![CDATA[
function setActive() {
aObj = document.getElementById('nav').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
}
}
}
//]]>
</script>
HTML Menu:
<!-- start navmenu -->
<ul id='nav'>
<li><a href='/'>Home</a></li>
<li><a href='/p/tools.html'>Tools</a>
<ul>
<li><a href='/p/admin-tools.html'>Admin Tools</a></li>
<li><a href='/p/call-accounting.html'>Call Accounting/Reporting</a></li>
<li><a href='/p/lync-phone-edition-log-viewer.html'>Phone Edition Log Viewer</a></li>
<li><a href='/p/sonus-sbc-5kswe-log-viewer.html'>Sonus SBC 5k/SWe Log Viewer</a></li>
<li><a href='/p/customer-support-tool.html'>Customer Support Tool</a></li>
<li><a href='/p/powershell-scripts.html'>PowerShell Scripts</a></li>
<li><a href='/p/powershell-one-liners.html'>PowerShell One-Liners</a></li>
</ul>
</li>
<li><a href='/p/lync-updates.html'>Lync Updates</a>
<ul>
<li><a href='/p/lync-updates.html#Lync2013Server'>Lync 2013 Server</a></li>
<li><a href='/p/lync-updates.html#Lync2010Server'>Lync 2010 Server</a></li>
<li><a href='/p/lync-updates.html#Lync2013WinClient'>Lync 2013 Client</a></li>
<li><a href='/p/lync-updates.html#Lync2010WinClient'>Lync 2010 Client</a></li>
<li><a href='/p/lync-updates.html#LyncMacClient'>Lync for Mac</a></li>
<li><a href='/p/lync-updates.html#LyncStoreApp'>Lync Store App</a></li>
<li><a href='/p/lync-updates.html#LyncRoomSystem'>Lync Room System</a></li>
<li><a href='/p/lync-updates.html#LyncPhoneEdition'>Lync Phone Edition</a></li>
</ul>
</li>
<li><a href='#'>Training</a>
<ul>
<li><a href='/p/end-user-training.html'>End User</a></li>
<li><a href='/p/troubleshooting.html'>Troubleshooting</a></li>
<li><a href='/p/sip.html'>SIP</a></li>
</ul>
</li>
<li><a href='/p/deployment.html'>Deployment</a></li>
<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/contact.html'>Contact</a></li>
</ul>
<!-- end navmenu -->
CSS:
/*DROPDOWN MENU MOD*/
/* ----- CSS Nav Menu Styling ----- */
#nav {
margin: 0px 0 0 0px;
padding: 0px 0px 0px 0px;
width: 1148px; /* Set your width to fit your blog */
/*font: $(tabs.font); Template Designer - Change Font Type, Size, Etc */
/*color: $(tabs.text.color); Template Designer - Change Font Size */
}
ul#nav li a.active {
position: relative;
z-index: 1;
background: #dd7700 none repeat scroll bottom;
color: #ffffff;
-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
box-shadow: 0 0 0 rgba(0, 0, 0, .15);
}
#nav ul {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}
#nav li {
float: left;
padding: 0px;
}
#nav li a {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
/*font: $(tabs.font); Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}
#nav > ul > li > a {
/*color: $(tabs.text.color); Template Designer - Change Font Color */
}
#nav ul ul a {
/*color: $(tabs.text.color); Template Designer - Change Color */
}
#nav li > a:hover, #nav ul li:hover {
*/color: $(tabs.selected.text.color); Template Designer - Change Font Color on Hover */
/*background-color: $(tabs.selected.background.color); Template Designer - Change Font Background on Hover */
text-decoration: none;
}
#nav li ul {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 300px; /* Change Width Of DropDown Menu */
z-index:9999;
}
#nav li:hover ul {
display: block;
}
#nav li li {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 300px; /* Change Width Of DropDown Menu */
}
#nav li:hover li a {
/*background: $(tabs.selected.background.color); Template Designer - Change Background of Link on Hover */
}
#nav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}
#nav li ul a:hover, #nav li ul li:hover > a {
/*color: $(tabs.selected.text.color); Template Designer - Change Text Color on Hover */
/*background-color: $(tabs.selected.background.color); Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
/*DROPDOWN MENU MOD*/
Heres an example of what happens:
Any guidance would be much appreciated.
You might want to rethink your link hierarchy/architecture and restructure your links with folders:
<li><a href='/p/tools/'>Tools</a>
<ul>
<li><a href='/p/tools/admin-tools'>
and have your pages be "index.html" files in those folders,
(I am assuming a dynamic page is outside your limitations for now)
and for the home page: simply call the index.html there (or what ever it is called) in the link
The reason your home link is always active is that "/" is ALWAYS going to appear in the url. I think you want to use document.location.pathname, and test for equality instead.
For the second problem, why not just walk up the parent tree until you are no longer in a link? Here is an example to fix both problems:
if (document.location.pathname == aObj[i].href) {
var link = aObj;
while (link.tagName === 'a') {
link.className = 'active';
link = link.parentElement;
}
}
Just be sure to remove the active class up the chain in your onmouseout event handler as well.
Thanks to everyone for their input. I managed to get this working, and have fully documented the process on my blog, where you can also see the result.
http://www.lync.geek.nz/2015/02/highlight-current-active-menu-using-jquery-or-javascript.html

Keep parent menu item highlighted, after entering into the child menu web link

I want to implement a navigation menu on my website. I need to highlight a parent list item after click on its child menu item. This is Working, if it is a single file. I include it in all files. My problem of the below code is, when I click on a child menu item, its parent menu item is highlighted till the loading time. After loading completely, Highlighted color is disappearing. Clicking on the menu item which has no child, is also not highlighted.
Any help would be greatly received.
Thanks. My website link is www.theiab.org/IABPHP.
HTML:
<html>
<head>
<script>
$(document).ready(function () {
$('#menu-wplook-main-menu').find('li a').click(function () {
//e.preventDefault();
$('#menu-wplook-main-menu').find('li a').removeClass('active');
$(this).addClass('active');
$($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});
</script>
<style>
#menu-wplook-main-menu li a.active{
color:#e53b51;
}
</style>
</head>
<body>
<p class="site-title"><img src="images/logo/iab_logo.png" alt="Indian Association for the Blind" title="Indian Association for the Blind"></p>
<nav class="navigation"id="nav">
<ul id="menu-wplook-main-menu" class="parent" >
<li class="menu-item"><div id="whoWeAre">WHO WE ARE</div>
<ul class="sub-menu"id="sub-menu1">
<li class="sub-menu-item1"id="sub-menu-item1"><div id="subMenuItem1">ABOUT FOUNDER</div></li>
<li class="sub-menu-item2"id="sub-Menu-Item2"><div id="subMenuItem2">ABOUT IAB</div></li>
<!--<li class="menu-item ">TEAM IAB</li>-->
</ul>
</li>
<li class="menu-item">WHAT WE DO
<ul class="sub-menu"id="sub-menu2">
<li class="sub-menu-item3 ">EDUCATION</li>
<li class="sub-menu-item4">CAREER & SKILL TRAINING</li>
<li class="sub-menu-item5">RESIDENTIAL SERVICES</li>
<li class="sub-menu-item6">SUPPORT SERVICES</li>
<li class="sub-menu-item7">EMPLOYMENT</li>
</ul>
</li>
<li class="menu-item">AWARDS & RECOGNITION</li>
<li class="menu-item">NEWS & EVENTS</li>
<li class="menu-item">CONTACT</li>
</ul>
</nav>
</body>
</html>
CSS:
nav {
float:right;
padding:38px 0 0;
}
nav li {
position:relative;
display:inline-block;
}
nav ul li a {
color:#a0a0a0;
font-weight:bold;
}
nav li a:hover {
color:#e53b51;
text-decoration: none;
}
nav li:hover .sub-menu{
visibility:visible;
opacity: 1;
transition: all 1s ease;
}
ul.sub-menu {
visibility:hidden;
opacity:0;
transition: visibility 1s linear 0.5s,opacity 0.5s linear;
position:absolute;
top:27px !important;enter code here
left:0px;
z-index:5000;
list-style:none;
margin:0;
padding: 0 !important;
width: auto;
min-width:150px;
box-shadow:0 0px 8px rgba(0,0,0,0.2);
background:#fff;
}
ul.sub-menu li {
width:100%;
float:left;
border-bottom: 1px solid #ccc;
margin: 0 !important;
line-height:100%;
padding: 10px 0px !important;
}
ul.sub-menu li:last-child {
border-bottom: none;
}
nav ul.sub-menu li a {
padding:0px 12px;
height: auto;
font-size:13px !important;
display: block;
}
ul.sub-menu li:hover {
border-top:none !important;
background: #f9f9f9;
}
You need to change this:
nav li a:hover {
color:#e53b51;
text-decoration: none;
}
To this:
nav li:hover a {
color:#e53b51;
text-decoration: none;
}
That way when you hover over the list-item (li), the anchor (a) will be changed. The way you had it, you needed to hover over the ANCHOR ITSELF for the hover state to be activated. Now hovering over the list-item will activate the changes.

Vertical sliding / toggle menu

I'd like to use the vertical sliding/toggle menu, please see my code below, at the moment the menu toggles only when you click on the + sign, please see the code below.
I'm trying to work out a way when you click on the category name eg Posts and the sub menu would open (same functionality with the +) and the page would go to Posts page. And when you click on the + sign, the function and the page stay the same.
How can I target this task? Your help / suggestion is appreciated.
Thank you!
<html>
<head>
<style type="text/css">
body{background:#CCC;}
#container{margin:0 auto; background:white; border:1px solid #999; width:400px; padding:20px; -moz-border-radius:10px;-webkit-border-radius:10px; overflow:hidden;}
#menu {text-align:left;}
/*Toggle Area*/
#menu .toggle {float:right;width:9px; padding:5px; cursor:pointer; border-top:1px solid white; border-left:1px solid #E0E0E0; color:#999;}
#menu ul.navmenu li:first-child .toggle{border-width:0 0 0 1px;}
/*Menu Setup*/
#menu ul{padding:0; margin:0; width:150px;}
#menu ul ul{border:1px solid #CCC;overflow:hidden;}
#menu ul.navmenu li {margin:0; list-style:none;float:left;}
#menu ul.navmenu li li {float:none;}
/*Links*/
#menu ul.navmenu a, #menu ul.navmenu a:visited {text-decoration:none; padding:5px; display:block; color:#008FDD;}
#menu ul.navmenu ul.submenu a:hover{background:#FFF4D2; color:#333;}
/*Heading Outer div*/
#menu ul.navmenu .menutop{border:1px solid #CCC; border-width:0 1px; overflow:hidden; width:150px; background:#F9F9F9; }
/*Header Links*/
#menu ul.navmenu .menutop a{width:120px;float:left;margin:0 0 1px 0; border-top:1px solid white;}
/*Header Link Hover*/
#menu ul.navmenu .menutop a:hover{color:#333;}
/*Removes white border for the first header*/
#menu ul.navmenu li:first-child .menutop a {border-width:0px;}
/*Single Menu Width Fix*/
#menu ul.navmenu .menusingle a{width:140px;}
/*Border Radius and Special Border Width*/
#menu ul.navmenu li:first-child .menutop{border-width:1px 1px 0 1px; -moz-border-radius:5px 5px 0 0;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}
#menu ul.navmenu li:last-child .menutop{border-width:0px 1px 1px 1px; -moz-border-radius:0 0 5px 5px; -webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul.navmenu li:last-child ul.submenu{-moz-border-radius:0 0 5px 5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul.navmenu li:last-child .menutop-open{-moz-border-radius:0;-webkit-border-radius:0px; border-width:0 1px;}
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
hideMenus();
$('.toggle').click(function(){
var menu = $(this);
hideMenus();
if (menu.hasClass('toggle-open')) {
menuHide(menu);
}else{
menuShow(menu);
}
});
});
function hideMenus(){
$('.toggle').each(function(){
menuHide($(this));
});
}
function menuHide(menu){
menu.removeClass('toggle-open').addClass('toggle-closed').empty('').append('+').parents('li').children('ul').slideUp(250);
menu.parent('.menutop').removeClass('menutop-open').addClass('menutop-closed');
}
function menuShow(menu){
menu.parent('.menutop').removeClass('menutop-closed').addClass('menutop-open');
menu.removeClass('toggle-closed').addClass('toggle-open').empty('').append('–').parents('li').children('ul').slideDown(250);
}
</script>
</head>
<body>
<div id="container">
<div id="menu">
<ul class="navmenu">
<li><div class="menutop">Posts<div class="toggle">+</div></div>
<ul class="submenu">
<li>Add New</li>
<li>Tags</li>
</ul>
</li>
<li><div class="menutop">Pages<div class="toggle">+</div></div>
<ul class="submenu">
<li>Add New</li>
<li>Edit</li>
</ul>
</li>
<li><div class="menutop menusingle">Comments</div></li>
<li><div class="menutop">Users<div class="toggle">+</div></div>
<ul class="submenu">
<li>Manage</li>
<li>Add New</li>
<li>Profile</li>
</ul>
</li>
</ul>
</div></div>
</body>
</html>
This is code I have used to do exactly that, except I used arrow images instead of + and - but you should be able to modify it. Hope it helps!
Edit:
I've put the code below onto JSFiddle so you can try it out: http://jsfiddle.net/CrxAg/3/
HTML:
<div id="menu">
<div class="submenublock" id="submenu1"><h3>Category1</h3>
<ul>
<li>option1</li>
<li>option2</li>
</ul>
</div>
<div class="submenublock" id="submenu2"><h3>Category2</h3>
<ul>
<li>option1</li>
<li>option2</li>
</ul>
</div>
</div>
JS:
$(document).ready(function(){
$('div.submenublock > ul').hide();
$("div.submenublock > h3").css("background", "url(images/menuarrowdown.gif) no-repeat right bottom");
$('div.submenublock > h3').click(function() {
$(this).next().slideToggle('fast',function(){
//set arrow depending on whether menu is shown or hidden
if ($(this).is(':hidden')) {
$(this).prev().css("background", "url(images/menuarrowdown.gif) no-repeat right bottom");
} else {
$(this).prev().css("background", "url(images/menuarrowup.gif) no-repeat right bottom");
}
return false;
});
});
/* change appearance of h3 element on hover to make it look like a link */
$('div.submenublock > h3').hover(over, out);
function over(event) {
$(this).find("a").css("color", "#663");
$(this).css("cursor", "pointer");
}
function out(event) {
$(this).find("a").css("color", "");
$(this).css("cursor", "default");
}
/*end hover code*/
});

Categories