I have looked for jQuery plugins but can't find any that do exactly what I want.
The nav is in two parts, the main nav:
<div id="nav">
<a href="" ><img src="/shell/img/nav/home_nm.gif" /></a><a href="" ><img src="/shell/img/nav/about_nm.gif" /></a><img src="/shell/img/nav/apply_nm.gif" /><img src="/shell/img/nav/contact_nm.gif" /><img src="/shell/img/nav/information_nm.gif" /><img src="/shell/img/nav/working_nm.gif" /><img src="/shell/img/nav/moveable_nm.gif" />
</div>
And then a sub nav:
<div id="sub_nav" >
<ul id="sub_home"><li>Courses on Offer</li><li>Work Placements</li><li>Blog</li></ul>
<ul id="sub_about"><li>Funding and Donations</li><li>Testimonials</li><li>Staff and Board</li></ul>
</div>
All I want to do is have sub_home or sub_about appear when home or about on the main nan is rolled over.
It is import that the sub nav is always positioned to the left, on the jquery plugins it tends to make a drop down under the button, so not hard left.
Can a plugin be recommended that will easilh achieve this as something must exist.
Don't use a plugin! It is very very very easy!
You can see the following snippets in action in this jsfillde.
Maybe it would help you to rearrange your html to a more semantic structure like this:
<nav>
<ul>
<li>
<a href=#>Menu 1</a>
<ul>
<li><a href=#>Submenu 1.1</a></li>
<li><a href=#>Submenu 1.2</a></li>
<li><a href=#>Submenu 1.3</a></li>
</ul>
</li>
<li>
<a href=#>Menu 2</a>
<ul>
<li><a href=#>Submenu 2.1</a></li>
<li><a href=#>Submenu 2.2</a></li>
<li><a href=#>Submenu 2.3</a></li>
</ul>
</li>
<li>
<a href=#>Menu 3</a>
<ul>
<li><a href=#>Submenu 3.1</a></li>
<li><a href=#>Submenu 3.2</a></li>
<li><a href=#>Submenu 3.3</a></li>
</ul>
</li>
</ul>
</nav>
Just hide your submenus initially using CSS like this:
nav > ul > li > ul {
display: none;
}
nav > ul > li:hover > ul {
display: block;
}
Related
I am working on a mobile menu for this site:
http://giamberardino.com/_beta/team.html
When I click on "Showcase" it's toggle the slide of the entire menu as well as .mbl-dropdown. I would like it to just toggle the slide of .mbl-dropdown when .mbl-showcase is clicked on.
Where am I going wrong??
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
$(".mobile_menu_button").bind('click', function() {
$('.mobile_menu').slideToggle();
});
$(".mbl-showcase").bind('click', function() {
$('.mbl-dropdown').slideToggle();
$('.mobile_menu').stop().slideToggle();
});
First, You have to make it clear in your mind:
you have to hide the dropdown menu NOT the whole navbar , so you need to give the .mbl-dropdown a display:none.
then you just want to make the jquery code like that :
$(".mbl-showcase").on('click', function() {
$('.mbl-dropdown').slideToggle();
});
.mbl-dropdown{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
that means if you click on the element with class .mbl-showcase wich is "Showcase" the dropdown will show if it is hidden and it will be hidden if it is shown and that what does toggle mean.
make sure you check again the toggle property http://api.jquery.com/toggle/
I hope I helped you
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
.mbl-showcase ul{
display:none;
}
$("#menuItems li").on('click', function() {
$(this).find(".mbl-dropdown").slideToggle()
});
Fiddler https://jsfiddle.net/zeqy9zfo/
If I have this html code:
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
As you see there are two <li> elements with the inactive class.
I tried to do this and I have
$("#tabs").children();
But how can I search the specific <li> without class inactive?
Thanks for any help
$('#tabs li a').not('.inactive').css('color','red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
</ul>
Use method .not()
Description: Remove elements from the set of matched elements.
Use :not() and :has() pseudo-class selectors.
$("#tabs").children(':has(>:not(.inactive))');
// or with a single selector
$("#tabs > :has(>:not(.inactive))");
console.log($("#tabs").children(':has(>:not(.inactive))').length);
// or with a single selector
console.log($("#tabs > :has(>:not(.inactive))").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
UPDATE 1 : Or without using jQuery :has() instead using parent() method.
$("#tabs > li > :not(.inactive)").parent()
console.log($("#tabs>li>:not(.inactive)").parent().length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
UPDATE 2 : If you just want to select the a tag then :not() is enough to get it with a single selector string.
$("#tabs > li > :not(.inactive)")
$("#tabs>li>:not(.inactive)").css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="tabs">
<li><a id="tabb1" href="#tab1" data-translate="pagtab5" onclick="CaricaVisualizzaTab(1)">Tightening Torques</a>
</li>
<li><a id="tabb2" href="#tab2" data-translate="pagtab6" onclick="CaricaVisualizzaTab(2)" class="inactive">Specifications</a>
</li>
<li><a id="tabb3" href="#tab3" data-translate="pagtab7" onclick="CaricaVisualizzaTab(3)" class="inactive">Technical Data</a>
</li>
You can use .not() function
$("#tabs").find('a').not('.inactive');
You can use following code
$('ul#list li:not([class])')
in your case [class] will be inactive
By using javascript we can complete this way:-
var liWithoutHtml = document.getElementById('tabs').querySelector("li>a:not(.completed):not(.selected)");
alert(liWithoutHtml.innerHTML)
Jsfiddle link
In Foundation 6 by default, dropdown menus appear on the same level as the parent like so:
Is there a way to make it so that the menu appears on the same level as the first menu? This is the desired outcome:
I have looked through the documentation and cannot seem to find a way to do it. Thanks in advance!
This is a snippet of the default code from Foundation site
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a>Item 1</a>
<ul class="menu">
<li>Item 1A Loooong
</li>
<li>
<a href='#'> Item 1 sub</a>
<ul class='menu'>
<li><a href='#'>Item 1 subA</a>
</li>
<li><a href='#'>Item 1 subB</a>
</li>
<li>
<a href='#'> Item 1 sub</a>
<ul class='menu'>
<li><a href='#'>Item 1 subA</a>
</li>
<li><a href='#'>Item 1 subB</a>
</li>
</ul>
</li>
<li>
<a href='#'> Item 1 sub</a>
<ul class='menu'>
<li><a href='#'>Item 1 subA</a>
</li>
</ul>
</li>
</ul>
</li>
<li>Item 1B
</li>
</ul>
</li>
<li>
Item 2
<ul class="menu">
<li>Item 2A
</li>
<li>Item 2B
</li>
</ul>
</li>
<li>Item 3
</li>
<li><a href='#'>Item 4</a>
</li>
</ul>
Here is a fiddle of the default: http://jsfiddle.net/65017wc2/
Here is a possible fix to do this :
.dropdown.menu {
top: 0!important;
}
.dropdown.menu {
position: relative;
}
.dropdown.menu li {
position: static !important;
}
.dropdown.menu ul {
margin-top: -1px;
}
I overwrite the relative position of li elements to the native static position and made the main ul relative, so all the dropdown menus are relative to the main ul menu.
See this fiddle
I'm trying to solve an overflow problem in my slyding dropdown menu.
For slyding I'm using the als-js framework. The problem is, if I set the overflow:hidden attribute my dropdown menu is not visibly anymore.
If I just set the overflow-x:hidden I'm getting a scrollbar.
<div class="als-container" id="cssmenu"> <span class="als-prev"><img src="back.png" alt="back" title="previous" /></span>
<div class="als-viewport">
<ul class="als-wrapper">
<li class='als-item active'><a href='index.html'>Home</a>
<ul>
<li class='final'><a href='#'>Test 1</a>
</li>
<li class='final'><a href='#'>Test 2</a>
</li>
</ul>
<li class=' als-item has-sub '><a href='#'>Products</a>
<ul>
<li class='final'><a href='#'>Product 1</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
<li class='final'><a href='#'>Product 2</a>
</li>
</ul>
</li>
<li class="als-item"><a href='#'>About</a>
</li>
<li class='als-item active'><a href='index.html'>Admin</a>
</li>
<li class='als-item active'><a href='index.html'>Route</a>
</li>
</ul>
</div>
jQUery:
$(document).ready(function () {
$("#cssmenu").als({
visible_items: 4,
scrolling_items: 2,
orientation: "horizontal",
circular: "yes",
autoscroll: "no"
});
});
Here is the link to my fiddle.
http://jsfiddle.net/9zapu02q/11/
Perhaps somebody could help me to find a solution.
SOLUTION
Your div.als-viewport must have a greater height... but you asl script is setting the div height, so you need to use " IMPORTANT " to override the value.
.als-viewport {
height: 300px !IMPORTANT;
...
}
I have a horizontal list menu and another horizontal list sub menu for each menu item.
Now when the page loads for the first time, first top menu with its sub menu and other top menus should show up and stay on if I mouse away or until i hover over other top menu item. As i hover over the other menus, their corresponding sub menus should show up.
Can someone show me how to do it using javascript or jquery or css only?
<div id="mytabs1" class="basictab">
<ul>
<li class="basictab1" id="li1"><a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a></li>
<li class="basictab1" id="li2"><a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a></li>
<li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
</ul>
</div>
<DIV class="tabcontainer">
<div id="sc1" class="tabcontent">
<ul>
<li><a id="link1-1" href="http://test.com">Link 1a</a></li>
<li><a id="link1-2" href="http://test.com">Link 1b</a></li>
</ul>
</div>
<div id="sc2" class="tabcontent">
<ul>
<li><a id="link2-1" href="http://test.com">Link 2a</a></li>
<li><a id="link2-2" href="http://test.com">Link 2b</a></li>
</ul>
</div>
<div id="sc3" class="tabcontent">
<ul>
<li><a id="link3-1" href="http://test.com">Link 3a</a></li>
<li><a id="link3-2" href="http://test.com">Link 3b</a></li>
</ul>
</div>
</DIV>
here's an example to point you in the right direction.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
ul, li
{
display: block;
}
.sublinks
{
display: none;
}
</style>
</head>
<body>
<div id="mytabs1" class="basictab">
<ul>
<li class="basictab1" id="li1">
<a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a>
<ul class="sublinks">
<li><a id="link1-1" href="http://test.com">Link 1a</a></li>
<li><a id="link1-2" href="http://test.com">Link 1b</a></li>
</ul>
</li>
<li class="basictab1" id="li2">
<a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a>
<ul class="sublinks">
<li><a id="link2-1" href="http://test.com">Link 2a</a></li>
<li><a id="link2-2" href="http://test.com">Link 2b</a></li>
</ul>
</li>
<li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
</ul>
</div>
<script>
$('.basictab1').hover(function()
{
$(this).find('ul').toggle();
});
</script>
</body>
</html>