I have already got a nav menu at the top of my page, but now I am trying to expand a sub menu when I hover over one of these options. My first idea was to simply have a "div" section of the code like such
<div id= "expanded_menu"> <!-- sub menu option --> </div>
and show/hide it based on whether it's nav option was hovered over, but then I realized that the submenu would disappear as soon as I took my mouse off of it's corresponding nav menu button. Does anyone know a way to hover over an option, have that bring up a menu, and then be able to access the submenu without it disappearing?
The usual way to do this is with nested lists...
<ul id="main-menu">
<li>
First menu item
<ul class="sub-menu">
<li>Sub menu item</li>
...
</ul>
</li>
<li>Second menu item</li>
...
</ul>
And use the following CSS.
.sub-menu { display: none; }
#main-menu li:hover .submenu { display: block; }
As long as the sub-menu is nested in the parent menu item's div, your method should work. So your HTML structure would be:
<div class="main_menu_item">MainItem
<div class="sub_menu_item">Item1</div>
<div class="sub_menu_item">Item2</div>
</div>
Then you're still hovering on the main item when hovering on the sub-items.
However, I personally would implement this all in CSS -- search for "CSS menus" and you'll find a ton of resources.
Related
I have a simple 2 level dropdown nav in bootsrap with the code below:
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav pull-left">
<li>Főoldal</li>
<li class="dropdown">
Iskolánk
<ul class="dropdown-menu">
<li>Alapadatok</li>
<li>Még egy teszt menü</li>
<li>Osztályok</li>
<li>Teszt menüpont valami</li>
</ul>
</li>
<li class="dropdown">
Információk
<ul class="dropdown-menu">
<li>Teszt, infók menüpontba</li>
</ul>
</li>
<li>Árlista</li>
<li>Hírek</li>
<li>Képgaléria</li>
<li>Dokumentumok</li>
<li>Kapcsolatfelvétel</li>
</ul>
</div>
I added this css to the style file, because i want to show the submenu on hover, not clicking a nav item.
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
When i click the "iskolánk" nav item, and move the cursor to the submenu, the "Iskolánk" nav item will get a white background, that shows me, that this is the active item, and also shows the submenu.
If i dont click the "Iskolánk" nav item, only just hover it, the submenu shows up, but if i move the cursor to the submenu, the "Iskolánk" nav item looses the white background, and it doesnt show that that is the active nav item.
How can i do that? I want to show the submenus always on hover, and not by clicking the parent. The bootstrap css and js file is from the bootstrap website, i dont change anything in them.
The problem is when you are moving to the submenu, cursor leaves the menu (parent) so the CSS hover does not work on it. So to solve this you can write a simple jquery code which keeps the hover effect on the parent(menu) when you are moving to the submenu. but remember, when you are leaving that submenu, you have to remove that effect from the parent.
Add this code snippet to your HTML file.
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown-menu').hover(function(){
$(this).parent().css({background:'#eee'});
})
$('.dropdown-menu').mouseleave(function(){
$(this).parent().css({background:'#fff'});
})
})
</script>
I wanted to create a responsive menu using purely HTML and CSS but an issue I've stumbled upon is that my website uses anchor links for the navigation, not external page links. Because they are anchor links, when one is selected the menu overlay is still there.
How can I use Javascript to add the display: none style to the menu when a navigation link is selected? This will need to be able to be overridden again if the user reopens the navigation.
Here's the basic HTML for my navigation:
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" role="button">
<nav>
<ul>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
CSS:
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ nav {
display: block;
}
One way of doing it easily is with jquery (if you aren't using jquery i STRONGLY suggest you start), just add id="menuID" to your menu:
Click me!
I'm using Foundation v6.2.0 in my project. I am having some difficulties with getting the top bar to work as desired on small screens. On small screens I want the top level of the navigation to act as a direct link (rather than a trigger to show the sub-menu) and instead move that functionality to the caret (little down arrow) on the right of the top level item, so it now triggers the display of the sub-navigation.
$(document).foundation();
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="title-bar" data-responsive-toggle="top-bar-menu" data-hide-for="medium">
<div class="title-bar-left">
</span>
</div>
<div class="title-bar-right hide-for-small">
</div>
</nav>
<nav class="top-bar main-nav" id="top-bar-menu">
<div class="row main-nav">
<div class="top-bar-left">
<ul class="vertical medium-horizontal menu menu-items" data-closing-time="0" data-responsive-menu="accordion medium-dropdown">
<li>Item 1</li>
<li>Item 2
<ul class="menu vertical">
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li
</ul>
</div>
<div class="top-bar-right search-bar">
</div>
</div>
</nav>
If you want (say) Item 2 to act as an <a href="go_here"> link when clicked (rather than a trigger to display Item 2A and Item 2B); I don't think there is a standard way to do this in Foundation. However you can get round it with additional links that are hidden for larger screens or JavaScript/jQuery + CSS + HTML changes:
Additional links
This option doesn't leave you needing to add hacks or additional CSS to hide unwanted menu furniture or override the way foundation menus work. What this does is add a new link that is only visible on small screens whilst leaving the original link untouched to continue acting as a trigger.
<li>Item 2
<ul>
<li class="show-for-small-only">
Item 2 "home"
</li>
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
JSfiddle: https://jsfiddle.net/sons9wzr/2/
This is more usable but requires an additional click to expose the sub menu. It would also be possible to do this with JavaScript/jQuery dynamically.
JavaScript/jQuery + CSS + HTML
If the aim is to only have the relevant links for mobile and an expanded menu for desktop, you can hide the sub navigation using a similar added class as in the first example above, add the JavaScript and then hide the redundant carets with CSS.
So your HTML becomes something like:
<li><a class="forced" href="http://foundation.zurb.com/">Item 2</a>
<ul class="show-for-large-only">
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
Then use JavaScript (jQuery as it is required by Foundation anyway) to force the click on certain nav items (by adding class="forced" to each <a> you want to force to go to a new location in the HTML above).
An example of JavaScript for small screens only:
//check for screen size = small
if(Foundation.utils.is_small_only()) {
$('nav').on('click','a.forced', function (e) {
e.preventDefault;
window.location.href = $(this).attr('href');
});
}
(More information on the Media Query JS utility)
This will still leave the caret on the menu item though which may be confusing for users so you can remove it (from ALL sub-nav items) with this:
.is-accordion-submenu-parent > a::after {
display: none;
}
This should give you the desired effect, though it may require additional maintenance when you update Foundation.
Example in Codepen (without code for small-screens only): http://codepen.io/tymothytym/pen/eZGEER
Edit:
OK, so based on this comment:
I want to be able to expand the menu in the mobile view by clicking on the icon at the right of the parent element as well as to be able to click on the parents element itself.
I have created a new solution. This is very much a hack, and not a wonderful solution. I would recommend either finding an alternative navigation set up or working within the framework that Foundation offers.
New HTML (forced class moved to <li> & <span> added)
<li class="forced">
<span data-item="Item 2" class="show-for-small-only"></span>
Item 2
<ul class="menu vertical">
<li>Item 2A</li>
<li>Item 2B</li>
</ul>
</li>
New CSS
This splits up the contents of the <li> and positions the new sub-element
.is-accordion-submenu-parent > a::after {
display: none;
}
#media only screen and (max-width: 40em) {
li.forced span {
content: 'Item 2';
display: inline-block;
padding: .7rem 1rem;
line-height: 1;
width: 70%;
color: #2199e8;
cursor: pointer;
}
.menu > li.forced > a {
padding: .7rem 1rem;
line-height: 1;
float: right;
}
}
New JavaScript
This changes the text of the link (you'd need to do this for small screens only as shown above... above) makes the new <span> a link, inserts text into it by way of a data attribute & changes the original link text to a caret (to preserve as much original functionality as possible).
$(document).foundation();
$('nav').on('click','.forced span', function () {
window.location.href = $(this).siblings('a').attr('href');
});
$('.forced > a').html("▼");
$('.forced > span').text($('.forced > span').data("item"));
Example here: http://codepen.io/tymothytym/pen/GZOqvO
I think this is likely to have usability issues and maintenance issues so use with caution.
Menu with sub-menus that you can expand and highlight the chosen KPI.
<li ng-repeat="(key, value) in kpis | groupBy: 'Type'" ng-class="{'active-menu-item': menu.active, 'open': menu.open}">
<a ng-click="menu.open = !menu.open">
<span ng-class="kpiInitializer.IconFromKpiType(key)"></span>{{kpiInitializer.TextFromKpiType(key)}}
</a>
<ul class="navbarColorOnClick submenu">
<li ng-repeat="kpi in value" ui-sref-active="active">
<a ui-sref="kpi.overview({kpiChoice: '{{kpi.Id}}'})">{{kpi.Name}} </a>
</li>
</ul>
</li>
As you can se I have a sub-menu that can expand. ng-click="menu.open = !menu.open. It works fine but now I have a problem.
I want this submenu to expand when I click on a button in a controller that have nothing to do with this view. The right submenu should fall down. In this solution, it highlights the right property but the sub-menu dosen't expand so you cant see the highlighted choice.
Recently I had a similar issue with bootstrap, it was caused by nested li - ul - li tags. You will probably need to change it to div - ul - li.
I have been using flaunt.js ( Original Source, but have modified the initial css and html.
I have removed the class styles from ul and li so it uses just list tags.
But for some reason when I go into mobile.. it shows the 3 line menu button on my local page, but when I click it... things don't work as they do on the source.
I can't see the the menu properly.. I can't see the arrow to show there are drop down.
If someone could assist
thanks
<nav class="nav">
<ul>
<li>
Home
<ul>
<li >
Submenu item 1
</li>
<li >
Submenu item 2
</li>
<li >
Submenu item 3
</li>
<li >
Submenu item 4
</li>
</ul>
</li>
<li>
About
</li>
<li>
Services
<ul>
<li >
Submenu item 1
</li>
<li >
Submenu item 2
</li>
<li >
Submenu item 3
</li>
<li >
Submenu item 4
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li >
Testimonials
</li>
<li>
Contact
</li>
</ul>
</nav>
Fiddle
You've removed necessary HTML and haven't compensated for that in the JS
Original JS:
// Append the mobile icon nav
$('.nav').append($('<div class="nav-mobile"></div>'));
// Add a <span> to every .nav-item that has a <ul> inside
$('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
Your modified JS:
// Append the mobile icon nav
$('.nav').append($('<div class="nav-mobile"></div>'));
// Add a <span> to every .nav-item that has a <ul> inside
$('.nav').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
See how your selector targets the .nav on both lines? This is adding the span in a place the rest of the script isn't expecting. In your JS to change the selector back to .nav-item and add the .nav-item class back to the root level <li>s.
You will also need to change:
// Dynamic binding to on 'click'
$('ul').on('click', '.nav-click', function(){
To:
// Dynamic binding to on 'click'
$('.nav-list').on('click', '.nav-click', function(){
There is more than one <ul> in your markup, so your blanket binding the click to <ul> is disrupting things too.
EDIT: Modified HTML, CSS, and JS: http://jsfiddle.net/xtt3j/. I'm not sure why you're so keen on doing everything without any classes. I'm all about reducing markup but I feel like this is going to be a harder to maintain (or to just wrap your head around). And finally, the arrow won't display in any of these Fiddles because it is an image.
I have modified your example code on http://jsfiddle.net/WdN8J/10/. In Chrome, there is initial padding offset so I put -webkit-padding-start: 0px. The conflict is that your dropdown nav has absolute position:
.nav ul > li > ul {
display:none;
position:absolute;
left:0;
width:180px;
}
So I added the following line in the click action:
$('.nav ul > li > ul').css({'position':'relative', 'width':'100%'});