I'm trying to make a navigation dropdown with jQuery that looks like this:
<ul id="home" >
<li class="navtab">TABANME</li>
<li class="homesub">Some link</li>
<li class="homesub">Some link</li>
<li class="homesub">Some link</li>
</ul>
The <li> .navtab is visible at all times - the sub-menu items start out hidden. I've attached the .hover() to the <ul> element (#home), but when the cursor enters the sub-menu <li> elements, the mouseout for #home fires, and the sub-menu items hide.
I know this has to do with event bubbling and mouseover/mouseout, but I can't figure out the logic of how to keep the menu open while the cursor is over the entire <ul>. The jQuery I currently have is:
$('#thome').hover(
function(){
tabShowSubnav($(this).attr('id'))
},
function(){
tabHideSubnav($(this).attr('id'))
});
function tabShowSubnav(menu){
var tb = '#' + menu;
var sb = '.' + menu.slice(1) + 'sub';
$(tb).css('height','239px');
$(sb).show();
}
Any suggestions?
Do yourself a huge favour and change how you structure your menu markup to:
<ul id="home" >
<li class="navtab">
TABANME
<ul class="submenu">
<li>Some link</li>
<li>Some link</li>
<li>Some link</li>
</ul>
</li>
</ul>
And put the hover event on li.navtab to make the submenu visible. You'll find this much easier to do. For example, the CSS:
ul.submenu { display: none; }
with:
$(function() {
$("li.navtab").hover(function() {
$(this).children("ul.submenu").show();
}, function() {
$(this).children("ul.submenu").hide();
});
});
and you're most of the way there.
That all being said, I'd highly suggest using an existing jQuery menu plugin. There are lots of these about. I've had relatively good experience with superfish. There's little point reinventing this particular wheel.
Related
I am quite new to everything about html/js/css. Right now i need a list so i decided to use a list that u can slidetoggle. I looked it up and found how to recreate that effect (the code below):
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer ul li").filter(":has(ul)");
linkClick.click(function () {
$(this).find('ul li').slideToggle(200);
});
(if you are wondering about the 2 ul and li, it is because i want that list in another list, but that doesn t change the question so i didn t include it in my explanation)
Since i am quite new to this topic, i only understand like 70% of what is happening. But for my project i need to work with the elements of the list(the ones which were hidden and after sliding down visible). I want to do stuff that requires clicking them like highlight on click, but now i encounter the problem, that the code i posted makes the slide effect being triggered not only by the headline, but also by the elements. So i cannot click elements without minimizing the list with the same click (obviously the elements are hidden again then). I hope you guys can explain me how to make the function only be triggered by the head object and not by the whole list element(head and the expanded list).
Look the slide effect is being triggered not only by the headline but also by the elements that are because the concept of event bubbling which basically means in case of click event if you clicked a child element the event is bubbled by default to the parent elements tree till the document level firing any registered event handler. so when you click the element you click the headline too, so you need to add another child element and handle the click on it something like this:-
<div class="tableContainer">
<ul>
<li> <span>menu 1</span>
<ul>
<li>link 1</li>
</ul>
</li>
<li><span> menu 2</span>
<ul>
<li>link 2</li>
</ul>
</li>
<li><span> menu 3</span>
<ul>
<li>link 3</li>
</ul>
</li>
<li> <span>menu 4</span>
<ul>
<li>link 4</li>
</ul>
</li>
</ul>
</div>
$(function() {
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer span");
console.log(linkClick.length);
linkClick.click(function() {
console.log('clicked');
$(this).siblings('ul').slideToggle(200);
});
});
Full Working Example Here
Hope this answers your question.
I have a drop down superfish menu in my responsive site and while I have the menu changing to a mobile friendly sidr slide menu for most mobile devices the client would still like to have the orginal dropdown menu showing when a tablet is in landscape orientation.
This obviously creates the usual hover issue with touch devices especially since we have the top li (of a drop down) also providing a href.
My thoughts were that for those particular top level li's we'd add a class on which we could then run some javascript to replace the usual url link with a # when a mobile device is detected. That would make the top li a touch item instead of a hover link item.
Anyway below is what I have constructed to date and I had though this would work but so far I can't seem to get it to replace the original url with the #
<script>
$(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
if (agentID) {
$('#sf-menu.sf-menu li.idevice a').attr('href', '#');
}
});
</script>
I'm guessing I'm missing something really obvious but I've got to that point where I've exhausted my knowledge level - I'm not really a coder, more an enthusiastic tinkerer :).
Below is a snippet of the menu code for reference.
<div id="mateen">
<ul id="sf-menu" class="sf-menu">
<li class="menu-item">Home</li>
<li class="idevice">Advantages
<ul>
<li >Mateenbar Advantages</li>
<li >Superior Performance</li>
<li >Research and Testing</li>
<li >Frequently Asked Questions</li>
<li >Middle East</li>
</ul>
</li>
<li class="idevice">Products & Specifications
<ul>
<li >MateenBar</li>
<li >MateenDowel</li>
<li >MateenBolt</li>
</ul></li>
<li class="idevice">Applications & Projects
<ul>
<li >Corrosion & Marine</li>
<li >Roads & Transportation</li>
<li >Tunnelling & Cutting</li>
<li >Electro-magnetic</li>
<li >Projects</li>
</ul>
</li>
<li >Downloads</li>
<li class="idevice">Contacts
<ul>
<li >Locations</li>
<li >About Pultron</li>
</ul>
</li>
</ul>
</div>
Any advice or help accepted at this point - hope I've provided enough relevant information.
Thanks
The problem is with the selector. Change the following statement
$('#sf-menu.sf-menu li.idevice a').attr('href', '#');
to
$('#sf-menu > li > a').attr("href","#")
For your reference:
https://css-tricks.com/child-and-sibling-selectors/
I'm creating a website for a project and i'm not allowed to use frameworks (so no bootstrap but jquery is allowed.), earlier i had a problem where the navigation bar when collapsed (screen width under 800px) has all the individual links expanded, rather than being in individual categories.
I've now fixed that but i've now got this problem where the menu's wont stay open / the arrows when clicked just take you to the subcategories heading. This makes the site unusable for mobiles essentially as no one will think to long click a tab to open each one.
I've uploaded this website to
here
The Html nav bar
<nav role="navigation" id="cssmenu">
<ul>
<li>Home</li>
<li class="has-sub">Courses
<ul>
<li>Digital Media</li>
<li>Web Development</li>
<li>Journalism</li>
<li class="last">Information & Communications</li>
</ul>
</li>
<li class="has-sub">Facilities
<ul>
<li>Societies</li>
<li>Jobs and Placements</li>
<li class="last">Library</li>
</ul>
</li>
<li class="has-sub active">Manchester & Student Life
<ul>
<li>Travel</li>
<li>Attractions</li>
<li class="last">Nightlife</li>
</ul>
</li>
<li class="has-sub">Student Help
<ul>
<li>Finance</li>
<li>Student Union</li>
<li class="last">Assistance</li>
</ul>
</li>
<li class="last">Contact</li>
</ul>
</nav>
The Jquery script
( function( $ ) {
$( document ).ready(function() {
// Cache the elements we'll need
var menu = $('#cssmenu');
var menuList = menu.find('ul:first');
var listItems = menu.find('li').not('#responsive-tab');
// Create responsive trigger
menuList.prepend('<li id="responsive-tab">Digi-Co</li>');
// Toggle menu visibility
menu.on('click', '#responsive-tab', function(){
listItems.slideToggle('fast');
listItems.addClass('collapsed');
});
});
} )( jQuery );
The css can also be found
here
Any help will be appreciated
Thank you.
I'm trying to make a drop down menu for the mobile version of a website and can't seem to figure out what I'm doing wrong. I have the initial position where I want it (fixed in the upper right corner of the screen) but it does nothing when you click on the Menu tab.
Here's my JSFiddle
<div id="mobile-nav-wrapper">
<ul id="mobile-nav">
<li>Main Menu</li>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Register</li>
<li>FAQs</li>
<li>Facebook</li>
</ul>
<li>This Page</li>
<ul>
<li>Some Text</li>
<li>Who?</li>
</ul>
</ul>
<span id="mobile-nav-button" onclick="pullmenu('#mobile-nav-wrapper')">Menu</span
</div>
Your JavaScript function isn't a global. You have configured JSFiddle to wrap it in an onload handler. It isn't accessible outside the scope of that function.
Don't use intrinsic event attributes, they depend on globals. Bind your event handlers with JS instead.
span isn't an interactive element. It doesn't appear in the focus order so has serious accessibility implications when you depend on people interacting with it. Use a button instead. Apply CSS if you don't like the way it looks.
<button type="button" id="mobile-nav-button">Menu</button>
<script>
document.getElementById('mobile-nav-button').addEventListener('click', function (evt) {
pullmenu('#mobile-nav-wrapper');
});
function pullmenu(etc) { etc }
</script>
JavaScript
<script>
function pullmenu(menu) {
var x = document.getElementById(menu).style;
if (x.top == "-15em") {x.top="0";}
else {x.top="-15em";}
}
</script>
HTML :
<span id="mobile-nav-button" onclick="pullmenu('mobile-nav-wrapper')">Menu</span>
Example
I'm currently setting up a menu including sub menu, built on Wordpress categories. Basically, I'm retrieving all the top level categories, and then build a submenu on each, with all the posts from that parent category.
So the structure looks like this :
<ul class="menuCat">
<li> lifestyle
<ul class="show-hide">
<li>Article #7</li>
<li>Article #5</li>
<li>Article #3</li>
</ul>
</li>
<li> musique
<ul class="show-hide">
<li>Article #8</li>
<li>Article #7</li>
<li>Article #2</li>
<li>Article #1</li>
<li>Article #3</li>
</ul>
</li>
</ul>
<div id="content">...
The sub menus are set to display:none. When a category gets clicked, the submenu ul appears (using jQuery toggle) under the main menu. I'm running it locally so I can't give you a live example, but the way it works is the same as when you hit the "categories" link here : http://wpshower.com/demo/?theme=imbalance.
My problem is that with this structure and for what I want to visually achieve (c.f previous url), I don't see any other option that putting the submenu block in an absolute position. But if I do so, I need to push the rest of the content down, when a menu is triggered. What I've tried so far, is to set a margin-top based on the height of the currently viewed submenu. Unfortunately, neither height or outerHeight could help me...
Any ideas ?
Thanks!
Can you go into more detail about why you need to position absolute? Looks to me like you could achieve what you want by having all your submenus statically positioned below the top level menu, using jQuery to ensure only one is shown at a time.
By having them statically positioned the submenu will push the content below it down when it expands, and as long as all but one submenu is always set to display: none; you won't even know it's there.
For this to work however, you'll need to change the structure of your html though. The submenu items will need to be in a div below the top level menu list, not within it.
<ul class="menuCat">
<li> lifestyle
</li>
<li> musique
</li>
</ul>
<div id="submenu-container">
<ul class="show-hide lifestyle">
<li>Article #7</li>
<li>Article #5</li>
<li>Article #3</li>
</ul>
<ul class="show-hide musique">
<li>Article #8</li>
<li>Article #7</li>
<li>Article #2</li>
<li>Article #1</li>
<li>Article #3</li>
</ul>
</div>
<div id="content"></div>
$(function () {
$('.menuCat > li').click(function (e) {
var target = $('.show-hide.' + e.target.title);
$('.show-hide').not(target).hide();
target.toggle();
});
});
ul.menuCat li {
display:inline-block;
vertical-align: top;
}
ul.show-hide {
display: none;
background-color:lightgrey;
}
#content {
height: 200px;
width: 100%;
background-color: red;
}
For an example see this demo: http://jsfiddle.net/ijoukov/PCgxR/
Some news, I think I can't modify the HTML structure because the submenus are built in the same time as the parent list-item, within the 'start_el' wordpress function. That function gets called for each category link in the menu.