I need some help with both JS and CSS. I am using JS to hide and show subsections from one specific navigation bar on the website. First problem is, that I would like the JS code to specifically only work for that navigation bar and not the many others on the same site. Below is the JS code:
$('a').click(function(){
$('section').hide();
$($(this).attr('href')).show();
});
And below is the HTML code. I was wondering if I could somehow use the "navigation" class to select only this navigation bar in the JS code?
<ul class="navigation">
<li class="link">Tab1</li>
<li class="link">Tab2</li>
<li class="link">Tab3</li>
</ul>
Next problem has to do with the CSS. I would like to have the #content1, Tab1 be default when the site loads - and would like to have the text in it set to a color that is different from the rest (red or whatever). When tab2 is selected I would like that to change color while tab1 switches to black like the others etc. However I can't get the :active method to work in CSS (I guess because the JS really doesn't set it active.) Can anybody help me with that? Below is my CSS code (not all is relevant).
section {
display: none;
}
section:first-of-type {
display:block;
}
.navigation {
list-style: none;
}
li {
display: inline-block;
}
.nav2 {
display: inline-block;
width: 100px;
margin-right: 25px;
margin-bottom: 25px;
padding: 5px 5px 5px 5px;
background-color: #ffffff;
border: 1px;
border-style: solid;
border-color: #000000;
text-align: center;
text-decoration: none;
color: #000000;
}
Thank you very much in advance!
Create a CSS class that will be in charge of styling the active element. For this example we will use the class .active. It's important to notice that this is not a Pseudo-Class.
We will use a simple HTML markup for the tabs:
<ul class="tabs">
<li>
my tab
</li>
</ul>
Here follows a minimalist example of a tab style:
.tabs a { // represents the tabs
border: 1px solid #000;
}
.tabs a.active { // represents the active tabs
background: #f00;
}
Next step is creating a script to handle the clicks on the tabs. We want the script to remove the class .active from every other tabs and assign it to the tab that just got clicked. For that we can create an script that looks like:
$('.tabs').on('click', 'a', function () {
var $this = $(this), $ul = $this.parents('ul');
$ul.find('a').removeClass('active');
$this.addClass('active');
});
Example
$('.tabs').on('click', 'a', function() {
var $this = $(this),
$ul = $this.parents('ul');
$ul.find('a').removeClass('active');
$this.addClass('active');
});
body {
margin: 25px;
}
ul.tabs {
margin: 0 0 30px 0;
padding: 0;
list-style: none;
}
ul.tabs li {
display: inline-block;
}
ul.tabs li a {
margin: 0 2px;
padding: 5px 10px;
box-shadow: 0 0 4px rgba(0, 0, 0, .4);
text-decoration: none;
background: #eee;
color: #888;
text-transform: uppercase;
border-radius: 4px;
}
ul.tabs li a:hover {
box-shadow: 0 0 4px rgba(0, 0, 0, .4), 0 0 8px rgba(0, 0, 0, .8);
}
ul.tabs li a.active {
background: #aaa;
color: #fff;
}
<ul class="tabs">
<li>
tab 1
</li>
<li>
<a class="active" href="javascript:void(0)">tab 2</a>
</li>
<li>
tab 3
</li>
<li>
tab 4
</li>
<li>
tab 5
</li>
</ul>
<ul class="tabs">
<li>
tab 1
</li>
<li>
<a class="active" href="javascript:void(0)">tab 2</a>
</li>
<li>
tab 3
</li>
<li>
tab 4
</li>
<li>
tab 5
</li>
</ul>
<ul class="tabs">
<li>
tab 1
</li>
<li>
<a class="active" href="javascript:void(0)">tab 2</a>
</li>
<li>
tab 3
</li>
<li>
tab 4
</li>
<li>
tab 5
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Ok so lets cover css first
If you want link be active by default just modify it to
<ul class="navigation">
<li class="link">Tab1</li>
<li class="link">Tab2</li>
<li class="link">Tab3</li>
and then style it with css
.active { your css }
And then you can handle rest via JS , use .find to select element only in navigation and .addClass and .removeClass to change a to active
$(".navigation a").click(function() {
$(".navigation").find('a').removeClass('active');
$(this).addClass('active');
});
jQuery selection strings use the same syntax as CSS. Therefore to select only anchor tags that are children of navigation, you can use descendent selectors.
$('.navigation a')
And for your CSS issue, no need to use the :active selector. Simply add or remove classes to your target element.
$('.navigation a').click(function () {
// make tabs default color
$('.navigation a').removeclass('fancy-colors')
// make clicked tab fancy
$(this).addClass('fancy-colors')
})
Check out the jQuery toggleclass docs http://api.jquery.com/toggleclass/
Setting default on page load simply means adding your class in the markup.
<a class="fancy-colors">
Related
I have a navigation given by an nested ul list like this
<ul id='mainNav'>
<li> Some Stuff!
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
<li> Hover here to login!
<ul >
<li>
<div class='login'>
<p>Login</p>
<input type='password'>
<button>Okay</button>
</div>
</li>
</ul>
</ul>
and I use jQuery to show the menu on hover
$('ul#mainNav > li').hover(function() {
$(this).addClass("showMenu");
},
function(){
$(this).removeClass("showMenu");
}
);
This works fine, except for the input box for the login. In the moment where one moves the mouse pointer from the input box to a browser proposal entry, jQuery thinks that one left the li element and removes the class showMenu so that the submenu disappears.
So when I hover over the li element the login form opens
And as soon as I hover over the browser proposal the li element dissapears except for the browser proposal
I also created a jFiddle.
How can I tell jQuery to keep hovering if I move over the browser proposal from the input element?
As a solution You can remove the class .showMenu if event.target is not input
Also blur the input when the dropdown becomes hidden
$('ul#mainNav > li').hover(function(e) {
$(this).addClass("showMenu");
},
function(e) {
if (!$(e.target).is('input')) {
$(this).removeClass("showMenu");
$('input').blur();
}
});
#mainNav>li {
border: 3px solid #08C;
background-color: #FFF;
display: inline-block;
}
#mainNav li {
margin: 0;
padding: 0;
}
#mainNav,
#mainNav ul {
list-style: none;
margin: 0;
padding: 0;
}
#mainNav li>ul {
position: absolute;
display: none;
z-index: 1;
min-width: 200px;
padding: 0px;
margin: 0px;
text-align: left;
background-color: #FFF;
box-sizing: border-box;
}
#mainNav li.showMenu>ul {
display: block
}
.login {
border: 3px solid #08C;
padding: 20px;
margin: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method>
<ul id='mainNav'>
<li> Hover here to login!
<ul>
<li>
<div class='login'>
<p>Login</p>
<input type='password'>
<button>
Okay
</button>
</div>
</li>
</ul>
</ul>
</form>
https://jsfiddle.net/dzt87zbk/
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
i tried to implement a jquery slide down menu in my wordpress blog.
Sadly it is not working at all. I will show the submenu when i click on the parent menu point. Here is my html code:
<ul id="menu-sidebarmenue" class="menu">
<li id="menu-item-37" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-37">Parentmenu
<ul class="sub-menu">
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34">Submenu 1</li>
</ul>
</ul>
my Css:
ul{
margin:0;
padding:0;
list-style-type: none;
}
li{
margin:0;
padding:0;
list-style-type: none;
}
.menu-item {
width: 225px;
display: inline-block;
color: black;
text-decoration: none;
font-size: 11px;
font-weight: normal;
padding: 5px 0;
cursor: pointer;
border-top: black dotted 1px;
}
.sub-menu {
float: left;
display: inline-block;
color: black;
padding: 10px 0px 15px 5px;
text-decoration: none;
font-size: 11px;
font-weight: normal;
}
and my Javascript:
$(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.menu-item-has-children').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.menu-item-has-children').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.sub-menu').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');
//OPEN THE SLIDE
$(this).next().slideDown('normal');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$('.menu-item-has-children').mouseover(function() {
$(this).addClass('over');
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass('over');
});
/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
/********************************************************************************************************************
CLOSES ALL S ON PAGE LOAD
********************************************************************************************************************/
$('.sub-menu').hide();
});
can anyone help me with my code?
Would be very nice. Thank you a lot!
EDIT::
Hi, i got the problem now when i have more than one dropdown menu and i click on one, that all other open as well. can you help me how i can fix this that just .this object slides down?
That's because the jQuery you are using is referencing to HTML elements that you do not use.
In your HTML, there are no classes on or off.
Also, you only have one slide, so the functions for closing slides do not work correctly.
If you just want to toggle the .slideDown() and .slideUp() animations on the submenu, you can do this:
$(document).ready(function() {
$('.sub-menu').hide();
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.menu-item-has-children').click(function() {
$('.sub-menu').slideToggle('normal');
});
});
This works for a simple sliding animation. See what I mean in this demo:
DEMO
I'm required to build a menu with 5 options, upon clicking a certain one a new sub menu is to appear. I have absolutely no idea how to do this.
/**Navigation */
nav {
border: 1px solid red;
float: left;
margin-right: 35px;
min-height: 280px;
}
nav li {
text-decoration: none;
font-weight: normal;
color: red;
list-style: none;
}
/**Content */
#section {
background-color: ;
border: 1px solid;
font: normal 12px Helvetica, Arial, sans-serif;
margin-left: 180px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
<div class="clearfix"></div>
<nav>
<ul>
<li> Home </li>
<li> Portfolio </li>
<ul>
<li>Commercial </li>
<li>Residential </li>
<li>Heritage </li>
<li>Rennovations </li>
</ul>
<li> Services </li>
<li> About Us </li>
<li> Contact Us </li>
</ul>
</nav>
In addition to the already mentioned checkbox hack, you could also use a button as menu items, and use the :focus state to display the dropdown menu. A benefit over this is that the menu will close if you click outside of it. Some HTML elements do not naturally receive focus upon clicks; for those, you can add the "tabindex" attribute to allow them to gain focus.
ul {
list-style: none;
}
.menu > li {
float: left;
}
.menu button {
border: 0;
background: transparent;
cursor: pointer;
}
.menu button:hover,
.menu button:focus {
outline: 0;
text-decoration: underline;
}
.submenu {
display: none;
position: absolute;
padding: 10px;
}
.menu button:focus + .submenu,
.submenu:hover {
display: block;
}
<ul class="menu">
<li>
<button>Home</button>
<ul class="submenu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li><button>More</button></li>
<li><button>Info</button></li>
</ul>
CSS does not have a click handler. For this reason it is impossible to do with standard CSS. You could use something called the checkbox hack, but in my humble opinion, it's a bit clunky and would be awkward to work with inside a navigation menu like your use-case requires. For this reason I would suggest jQuery or Javascript... Here is a rather simple solution using jQuery.
Basically, we hide the sub-nav from the start using display: none; Then, using jQuery, when ".parent" is clicked we toggle a class ".visible" to the sub-nav element (the nested UL) with display: block; which makes it appear. When clicked again, it disappears as the class is removed.
Note that for this to work, every nested <UL> which is a "sub-nav" MUST have the .sub-nav class, and it's parent element (the <LI>) MUST have the .parent class. Also, since this uses jQuery, you will need to hook up a jQuery library to your site. You can do this by hosting it yourself and linking it like you normally would, or you can link it from google's library service (recommended).
JSFiddle Demo
$(document).ready(function() {
$('.parent').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
<li>Home</li>
<li class="parent">About
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li>Contact</li>
</ul>
Of course I am late but:
You can trigger a css click using a hack!!
Work with an checkbox!!
Sample:
ul{
display: none;
}
#checkbox{
opacity: 0;
}
#checkbox:checked + ul {
display: block;
}
<div class="container">
<label for="checkbox">Dropdown menu</label>
<input id="checkbox" type="checkbox" />
<ul>
<li>Dropdown link 1</li>
<li>Dropdown link 2</li>
</ul>
</div>
You can use transitions to animate the show an hide effect :)
This is just a very simple example!!
Mention: this is a CSS3 hack if you need borwser support for old browsers this is not working.
In fact, there is a possibility to get this working with pure CSS and browser element behaviour, using the checkbox hack, however at the time of writing this, it is pushing what SHOULD be done with CSS vs what COULD be done with CSS. Also It can cause some pretty terrible semantic code (after all there is a reason it is usually stated as the checkbox HACK).
Having said that, you could use it if you only have requirements for modern browsers, giving limited functionality to others and I have myself used this in production code, on an isolated chrome only project and it is pretty fun to play with.
Here is a link to read more on it:
http://css-tricks.com/the-checkbox-hack/
But again to stress, like others have on here already, that functional behaviour should really be done via JavaScript. Unless you actually want a hover based menu solution then that is a different question all together!
You will need to do this using javascript and registering a click event handler to perform your action.
If you're new to everything then you should look for some javascript tutorials (don't use W3Schools, look elsewhere) and then look at some jQuery tutorials as jQuery simplifies tasks like these.
There are many frameworks that you can use with good looking menus for your needs, not to mention they support all devices (tablets, phones and PCs).
For example in the twitter bootstrap framework there is exactly what you need, check this tutorial:
Twitter bootstrap - Navs
Read the whole Nav section, at the end they talk about Nav with dropdown for more options.
The menu of the tutorial itself is built with the Twitter bootstrap framework.
a pure css solution to your problem looks like this
Demo: http://jsfiddle.net/HyGZf/1/
you need input and label and you have to remove the href on portfolio if you only want to use css
you can add transition: all 1s ease-in-out; to the submenu if you want it to be animate
/**Navigation */
nav{
border: 1px solid red ;
float: left;
margin-right:35px;
min-height:280px;
}
nav li{
text-decoration:none;
font-weight:normal;
color:red;
list-style:none;
display:block;
width:100%;
}
/**Content */
#section{
background-color: ;
border: 1px solid;
font: normal 12px Helvetica, Arial, sans-serif;
margin-left:180px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
#Portfolio:checked +ul ul#submenu{
height:80px;
}
#submenu{
overflow:hidden;
height:0px;
margin:0;
}
a[accesskey="2"]{
color:blue;
cursor:pointer;
text-decoration:underline;
}
the markup
<div class="clearfix"></div>
<nav>
<input id="Portfolio" type="checkbox" name="menu" hidden>
<ul>
<li> Home </li>
<li><label for="Portfolio"><a accesskey="2"> Portfolio </a></label> </li>
<ul id=submenu type="list">
<li>Commercial </li>
<li>Residential </li>
<li>Heritage </li>
<li>Rennovations </li>
</ul>
<li> Services </li>
<li> About Us </li>
<li> Contact Us </li>
</ul>
</nav>
$('#open').on('click', function(e) {
simple_showpopup("popup", e);
});
function simple_showpopup(id, evt) {
var _pnl = $("#" + id);
_pnl.show();
_pnl.css({
"left": evt.pageX - ($("#" + id).width() / 2),
"top": (evt.pageY + 10)
});
$(document).on("mouseup", function(e) {
var popup = $("#" + id);
if (!popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide();
$(this).off(e);
}
});
}
$("#popup").hide();
.defa-context-panel {
border: 1px solid black;
position: absolute;
min-width: 200px;
min-height: 150px;
background-color: #f8f8f8;
border: solid 1px #f2f2f2;
border-radius: 10px;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Open <span id="open" style="text-decoration:underline;color:blue;cursor:pointer">Click here</span>
<div id="popup" class="defa-context-panel">Content
<div>DIV inside</div>
</div>
I do not know a lot of JS. Although I already did my own search, but I could not find out answers. So I am asking here and hope you can help me out.
I am trying to create a navigation menu based on div tag (like http://www.adobe.com/), and using jQuery to make a function for "appear/disapper when hover".
Simple Div Structure:
<div id='menu'>
<div> Level 1 a
<div> Level 2 a </div>
<div> Level 2 b </div>
</div>
<div> Level 1 b
<div> Level 2 c </div>
<div> Level 2 d </div>
</div>
</div>
I understand that it will need to use $('#menu').hover() function. My question is, if only use one id "menu", how or what kind of function I can use to determine which actual menu list is being hovered??
Like:
$("#menu").hover( // Div Menu is being hovered
function () {
// $el = Determine which menu inside of Div Menu is actually being hovered
// $el.show();
},
function () {
$el..hide();
}
);
Or maybe my structure is completely wrong, Should use another method to do this? Please help.
$("#menu").hover( // Div Menu is being hovered
function (event) {
$el = $(event.target);
$el.show();
},
function (event) {
$el = $(event.target);
$el.hide();
}
);
Actually, there is no hover event. There are many different mouse events in two different models, and they are different in getting triggered from inner elements. Luckily, jQuery's hover method (actually mouseenter and mouseleave) abstracts over this and fires the handlers only when the parent element is hovered.
This means you have to bind the handler to every single element in the menu tree:
$("#menu div").hover(
function (event) {
console.log(event);
$(this).children().show();
},
function (event) {
$(this).children().hide();
}
);
Demo at jsfiddle.net
Yes you could use the code you wrote for determining when you hover a div. Then you trigger a function for displaying the dropdown menu. When you define the css of the navigation bar you should set the part that doesn't have to be visible at the beginning to display:hidden; in the div, so it's hidden. Then through jquery you inject code into the css for changing the property display. I give you an example. Let's assume you create a div called "hidden" and set this in the css among other possible styles:
#hidden {
display:hidden
}
Then you want the part with id "hidden" to appear when you hover the mouse.
You can use:
$("#hidden").hover.css('display', 'block')
so the hidden part will appear.
Anyway you can create a dropdown menu even simply by using css only without jquery.
Here i give you an example:
Let's say you have this markup in the html file
<ul id="nav">
<li>
Home
</li>
<li>
About
<ul>
<li>The product</li>
<li>Meet the team</li>
</ul>
</li>
<li>
Services
<ul>
<li>Sevice one</li>
<li>Sevice two</li>
<li>Sevice three</li>
<li>Sevice four</li>
</ul>
</li>
<li>
Product
<ul>
<li>Small product (one)</li>
<li>Small product (two)</li>
<li>Small product (three)</li>
<li>Small product (four)</li>
<li>Big product (five)</li>
<li>Big product (six)</li>
<li>Big product (seven)</li>
<li>Big product (eight)</li>
<li>Enourmous product (nine)</li>
<li>Enourmous product (ten)</li>
<li>Enourmous product (eleven)</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Out-of-hours</li>
<li>Directions</li>
</ul>
</li>
</ul>
As you can see here the markup is simply a series of nested "ul". No verbose IDs/classes, no divs, just rich, semantic code.
The #nav ul contains a series of li, and any that require a dropdown then contain another ul. Notice the dropdown ul have no classes on them—this is because we use the cascade to style these, keeping our markup even cleaner.
Now the CSS:
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
/* Clear floats */
float:left;
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333;
}
So by using a nested unordered list and some css you can make an effective dropdown menu. That is the best solution according to me. Because the easier way you can make a thing the better it is.
For more details and a full explaination and demo of the dropdown menu, go to: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
Of course you can set the colors and style as you prefer.
If you want a flyout vertical menu like that on Amazon check this example. It's simple, just html and css, no jquery. It looks alike.
HTML:
<ul class="nav">
<li>
<a href="#">
<strong>MP3s & Cloud Player</strong> 18 million songs, play anywhere
</a>
</li>
<li>
<a href="#">
<strong>MP3s & Cloud Player</strong> 18 million songs, play anywhere
</a>
<ul>
<li>
<a href="#">
<strong>Your Cloud Drive</strong> Anythign digital, securely stored, available anywhere
</a>
</li>
<li>
<a href="#">
<strong>Learn more about cloud</strong> </a>
</li>
</ul>
<span class="cover"></span>
</li>
<li>
<a href="#">
<strong>Kindle</strong>
</a>
</li>
</ul>
CSS:
ul.nav{
font-size: 10px;
font-family: Verdana, Helvetica;
width: 200px;
background: #edf7ff;
}
ul.nav li{
padding: 5px 4px;
border: 1px solid #85abc9;
margin-bottom: -1px;
position: relative;
background: url(http://www.qualitymetric.com/Portals/0/images/orange_arrow.png) no- repeat 185px center;
}
ul.nav > li:hover{
background: #fff;
border: 1px solid #999;
z-index:1;
box-shadow: 0px 1px 0px #999;
-moz-box-shadow: 0px 1px 0px #999;
}
ul.nav > li:hover > span{
width: 5px;
height: 100%;
background: #fff;
position: absolute;
top: 0px;
bottom: 0px;
right: 15px;
z-index: 10;
}
ul.nav li a{
color: #666;
text-decoration: none;
}
ul.nav li a strong{
font-size: 11px;
color: #333;
font-weight: bold;
display: block;
}
/* dropdown */
ul.nav li ul{
width: 200px;
padding-left: 12px;
background: #fff;
border: 1px solid #999;
position: absolute;
border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: 1px 1px 0px #999;
-moz-box-shadow: 1px 1px 0px #999;
top: -1px;
left: 180px;
z-index: 9;
display: none;
}
ul.nav li:hover > ul{
display: block;
}
ul.nav li ul li{
border: none;
padding-left: 12px;
background: url(http://www.qualitymetric.com/Portals/0/images/orange_arrow.png) no- repeat 0px 6px;
}
ul.nav li ul li a strong{
font-weight: normal;
color: #034995;
}
Look at the code and demo here: http://jsfiddle.net/blackpla9ue/KHLgm/8/
You can edit and add things as you prefer.