I'm using the following script to generate a horizontal drop down menu on a site. It works wonderfully in Firefox and Safari, but fails in IE8 (surprise surprise). The intended behavior is that when a main menu item with a submenu is hovered over in the navigation list, the corresponding submenu will appear and any existing submenus in the .submenu div will disappear. In IE8, though, only one of the menu items will display its corresponding submenu (and then only after the link to the left of it, a link without a submenu, has been hovered), and its doing so disables the CSS hover effect on the links. Here's a live example.
I'm not experienced enough in jQuery to know why I might be running into issues, so I'm asking the good folks at StackOverflow for help. Thanks!
(Edit: I'm also running ie7.js on this particular page-- I don't know if that will effect anything or not, but I thought it would be worth mentioning)
$(document).ready(function() {
$('.submenu ul').hide(); //hide all submenus
var msec = document.location.href; //get current url
var mshref = msec.split("/"); //trim URL to include only current section
$('.submenu ul[class~='+mshref[3]+']').show(); //show submenu belonginging to current section
$('.topmenu a').hover(function(){
var msection = $(this).attr("href");
var msechref = msection.split("/");
if($('.submenu ul[class~='+msechref[3]+']').length){ //if there's a submenu belonging to this section
$('.submenu ul').hide();//hide all submenus
$('.submenu ul[class~='+msechref[3]+']').show(); //show the submenu for the section being hovered over
}
else
{
$('.submenu ul').hide();//hide all submenus
$('.submenu ul[class~='+mshref[3]+']').show();//show submenu for current section
}
});
});
And here's the HTML.
<nav><!-- top nav -->
<div class="topmenu">
<ul class="section_list">
<li><a class="active" href="http://test/">Home</a></li>
<li>About</li>
<li>ministries</li>
<li>news</li>
<li>sermons</li>
<li>contact</li>
</ul>
</div>
<div class="submenu">
<ul class="category_list about">
<li>join us</li>
<li>our beliefs</li>
<li>our staff</li>
<li>services</li>
</ul>
<ul class="category_list ministries">
<li>adults</li>
<li>children</li>
<li>preschool</li>
<li>youth</li>
</ul>
</div>
</nav><!-- end of top nav -->
EDIT - Can you try this instead of yours:
$(document).ready(function() {
var root = 'http://www.qualprnt.com/clients/fbcw/', $submenu = $('.submenu ul');
$submenu.hide();
var current = location.href.replace(root, '').split('/')[0];
if(current != '') {
$submenu.filter('.' + current).show();
}
$('.topmenu a').mouseenter(function(){
var section = this.href.replace(root, '').split('/')[0];
$submenu.hide();
if(section != '') {
$submenu.filter('.' + section).show();
}
else {
if(current != '') {
$submenu.filter('.' + current).show();
}
}
return false;
});
});
With this solution, you have to change root variable after you move the site to it's original domain. Please let me know if it works.
I will not delete my old answer, maybe it'll be useful for someone else.
OLD ANSWER:
If you're willing to change your CSS and HTML a little then this solution might be better for you.
HTML:
<nav><!-- top nav -->
<div class="topmenu">
<ul class="section_list">
<li><a class="active" href="http://test/">Home</a></li>
<li>About
<ul class="category_list">
<li>join us</li>
<li>our beliefs</li>
<li>our staff</li>
<li>services</li>
</ul>
</li>
<li>ministries
<ul class="category_list">
<li>adults</li>
<li>children</li>
<li>preschool</li>
<li>youth</li>
</ul>
</li>
<li>news</li>
<li>sermons</li>
<li>contact</li>
</ul>
</div>
</nav><!-- end of top nav -->
Javascript:
$(document).ready(function() {
$('.section_list > li').hover(
function() {
var $this = $(this);
if($this.has('ul')) {
$this.find('ul').show();
}
},
function() {
var $this = $(this);
if($this.has('ul')) {
$this.find('ul').hide();
}
}
);
});
change your script tags:
<script>
to
<script type="text/javascript">
Related
In short, I have a 2 main links (Private Car and Commercial Vehicle) each with a specific class attached to their anchor tags. The same class names are used on the li tags of a second sublink ul to match them with to two top links. The idea is that each time a main link is clicked, the following happens:
The sublink ul slides up
All the li's inside are hidden
The li's with the corresponding main link class are shown
The sublink ul slides down showing only the correct li's
Unfortunately that is not the order that the functions fire in. What happens is this:
The sublink ul slides up
The sublink ul slides down
All list elements inside are hidden
The relevant list elements slide down
Any idea on how I can get the order to fire as I want it?
Here is the code
$('.insurer ul.toplinks a').click(function(e) {
e.preventDefault();
var sublinkCategory = $(this).attr('class'),
subLinksToShow = $(this).parent().parent().parent().find('li.' + sublinkCategory),
subLinksList = $(this).parent().parent().parent().find('ul.sublinks'),
allLinks = $(subLinksList).find('li');
// First time
if ($(subLinksList).is(":hidden")) {
$(subLinksToShow).slideDown();
$(subLinksList).slideDown();
// List visible but new links invisible
} else if ($(subLinksList).is(":visible") && $(subLinksToShow).is(":hidden")) {
$(subLinksList).slideUp(function() {
$(allLinks).hide(function() {
$(subLinksList).slideDown(function() {
$(subLinksToShow).slideDown();
});
});
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="toplinks">
<li>Private Car</li>
<li>Commercial Vehicle</li>
</ul>
<ul class="sublinks">
<li class="privatecar">Key Facts</li>
<li class="privatecar">Policy Wording</li>
<li class="commercialvehicle">Key Facts</li>
<li class="commercialvehicle">Policy Wording</li>
</ul>
Your code isn't working while we don't have the fully code.
This works, note the comments in the code to see what happens on the line under the comment.
$(function() {
// hide by default
$('.sublinks').hide();
$('.toplinks a').on('click', function(e) {
e.preventDefault();
// get the classname
var cl = $(this).attr('class');
// slide up
$('.sublinks').slideUp("slow", function() {
//on callback (= after slide up is done)
// show all links
$('.sublinks li').show();
// hide the ones not having the right class
$('.sublinks li:not(.'+cl+')').hide();
// slide down again
$('.sublinks').slideDown("slow");
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="toplinks">
<li>Private Car</li>
<li>Commercial Vehicle</li>
</ul>
<ul class="sublinks">
<li class="privatecar">private Key Facts</li>
<li class="privatecar">private Policy Wording</li>
<li class="commercialvehicle">commercial Key Facts</li>
<li class="commercialvehicle">commercial Policy Wording</li>
</ul>
I have a simple multilevel menu and a script which works to highlight the menu item irrespective of being parent menu or child menu.
In below example when I am on child page then it will only change the colour of child page, while I also want to change the colour or it parent item.
I tried few thing but it is not working as intended.
Here's a codepen of what I have so far.
In case that doesn't work, here's a code snippet:
jQuery(document).ready(function() {
var url = window.location.href;
$('#cssmenu a[href="' + url + '"]').addClass('active-menu');
// Will also work for relative and absolute hrefs
$('#cssmenu a').filter(function() {
return this.href == url;
$(this).parents("li a").addClass('active-menu');
}).addClass('active-menu');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
<div id="menu-button"></div>
<ul>
<li>About Us
</li>
<li class="has-sub">
<span class="submenu-button"></span>Gallery
<ul>
<li>Photo Gallery
</li>
<li>Video Gallery
</li>
<li>Instagram Gallery
</li>
</ul>
</li>
<li>News
</li>
<li>Contact
</li>
</ul>
</div>
UPDATE
Here's my new code, but this works but keeps keeps other links highlighted as well:
$('#cssmenu a').filter(function() {
$(this).parents("li.has-sub").find('a:first').addClass('active-menu');
return this.href == url;
}).addClass('active-menu');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cssmenu">
<div id="menu-button"></div>
<ul>
<li>About Us
</li>
<li class="has-sub">
<span class="submenu-button"></span>Gallery
<ul>
<li>Photo Gallery
</li>
<li>Video Gallery
</li>
<li>Instagram Gallery
</li>
</ul>
</li>
<li>News
</li>
<li>Contact
</li>
</ul>
</div>
I guess, this is what you were after.
var $menu = $("#cssmenu");
//Get the anchor based on the page URL
var $current = $menu.find('a').filter(function() {
return location.href.indexOf(this.href) > -1;
//Or (whatever works)
//return location.href === this.href;
});
//Add it's parent's anchor
$current = $current.add($current.closest("li.has-sub").find(' > a'));
//Set the desired class
$current.addClass('active-menu');
Here is a demo along the same lines.
I am trying to achieve a simple drop-down menu with the following HTML structure. This structure is mandatory (I think) as explained in the illustrations below.
<nav role="navigation">
<ul id="main-menu" class="nav top-nav clearfix">
<li id="menu-item-1" class="menu-item">Menu 1</li>
<li id="menu-item-2" class="menu-item">Menu 2</li>
<li id="menu-item-3" class="menu-item">Menu 3</li>
</ul>
<ul id="sub-menu-1" class="sub-menu nav clearfix">
<li class="menu-item">Sub Menu 1.1</li>
<li class="menu-item">Sub Menu 1.2</li>
<li class="menu-item"><a href="#">Sub Menu 1.3/a></li>
</ul>
<ul id="sub-menu-2" class="sub-menu nav clearfix">
<li class="menu-item">Sub Menu 2.1</li>
<li class="menu-item">Sub Menu 2.2</li>
<li class="menu-item"><a href="#">Sub Menu 2.3/a></li>
</ul>
</nav>
To get a better idea of what I am trying to achieve I've made the following illustrations:
Simple menu with items arranged with inline blocks. As you can see, the menu scales to 100% of the container and has all the items arranged in center.
When hovering over a menu item which has a submenu. In the illustration that's Menu 1 which has Sub Menu 1 and it needs to display it on mouse hover, like a simple <ul><li><ul></ul></li></ul> would do. As you can see the submenu has to scale to 100% of the container and has all the items arranged in center.
I think the best approach is with javascript (not sure you can do this with only CSS), but I am kind off stuck. The sub menu appears on main menu item hover, but as soon as I hover out into the sub menu in order to navigate, the sub menu disappears. Anyway, this is the javascript:
$('nav #main-menu .menu-item a').hover(
function() {
var id = $(this).parent().attr('id');
id = id.substr(id.length - 1);
submenu = $('#sub-menu-' + id);
submenu.show();
},
function() {
var id = $(this).parent().attr('id');
id = id.substr(id.length - 1);
submenu = $('#sub-menu-' + id);
submenu.hide();
}
);
I am pretty sure that there is a better way to do this.
I've also set up a FIDDLE for better understanding.
//show sub menu when we hover over an item
$('nav #main-menu > .menu-item')
.on('mouseenter', function() {
$('.sub-menu').hide();
var id = $(this).attr('id');
id = id.substr(id.length - 1);
$('#sub-menu-' + id).show();
});
//hide submenu when the mouse goes away
$('nav').on('mouseleave', function() { $('.sub-menu').hide(); });
Modified your fiddle here: http://jsfiddle.net/3z8MR/10/
Edit
Add this line to conform to your specs in the comments
$('.sub-menu').on('mouseleave', function() { $(this).hide(); });
I have problem with vertical menu type accordion.
<div class="nav-section-container-large" data-set="nav-section" role="navigation">
<div class="nav-section">
<span class="nav-section-heading delta">In this section:</span>
<ul class="nav-section-level-2">
<li>Investment advantage</li>
<li>Statistics </li>
<ul class="nav-section-level-3">
<li>Clean technology</li>
<li>Food and beverage</li>
<li>Fund investment</li>
<li>High-value manufacturing</li>
<li>Information and communications technology</li>
<li>Infrastructure</li>
<li>Life sciences</li>
<li>Petroleum and minerals</li>
<li>Resource manufacturing</li>
</ul>
<li>Investment regulations</li>
<li>How can we help</li>
<li class="is-selected">Sectors of opportunity
<ul class="nav-section-level-3">
<li>Clean technology</li>
<li>Food and beverage</li>
<li class="is-selected">Fund investment</li>
<li>High-value manufacturing</li>
<li>Information and communications technology</li>
<li>Infrastructure</li>
<li>Life sciences</li>
<li>Petroleum and minerals</li>
<li>Resource manufacturing</li>
</ul>
</li>
</ul>
</div>
</div>
and
<script type="text/javascript">
$(function(){
$(document).on('click', ".nav-section-level-2 li", function(e){
e.preventDefault();
$(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
if ($(this).hasClass('is-selected') && $('.nav-section-level-3 li').hasClass('is-selected') )
$('.nav-section-level-2 ul').slideToggle('slow', function() { $(this).toggleClass('is-selected'); });
});
$(document).on('click', ".nav-section-level-3 li", function(e){
e.preventDefault();
$(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
});
});
</script>
algorithm vertical menu is working, but very bad. collapsed and expanded not working correctly!
How can I find resolve for my problem?
Please, ready resolves (type JQuery UI) not to offer.
Thank you very much.
I am not sure if I got it right. But here is one solution:
Modified example
$(function(){
$(".nav-section-level>li").on('click',function(e){
var ulElement = $(this).find('ul');
var isSameElement = $(ulElement).hasClass("open");
if( $("ul.open") !== undefined){
$("ul.open").slideToggle('slow');
$("ul.open").removeClass("open");
}
if(!isSameElement){
$(ulElement).slideToggle('slow');
$(ulElement).addClass("open");
}
});
});
First of all your html is little messy clean it up. Second you do not need to add any classes or anything to your li. Simple slidetoggle on click. Which will show hide your child ul.
I'm trying to figure out one thing, I have a one page website and want hide sub-menus under portfolio when other menu links cliked http://jsfiddle.net/kuuwj/15/
HTML
<ul id="navbar">
<li>Home</li>
<li>Portfolio
<div class="portfolio-apps">
<section id="website">
<span class="button">AAAAAAAAAAAAAAAAAAAAAA</span>
</section>
<section id="gterminal">
<span class="button">BBBBBBBBBBBBBBBBBBBBBB</span>
</section>
<section>
<span class="button">CCCCCCCCCCCCCCCCCCCCCC</span>
</section>
</div>
</li>
<li>About Me</li>
<li>Contact</li>
</ul>
JS
$(document).ready(function () {
var portf_apps = $('.portfolio-apps');
portf_apps.hide();
$('#nav-portfolio').click(function() {
portf_apps.show();
});
});
Change your Javascript to this:
$('#navbar > li > a').click(function(){
portf_apps.hide();
});
$('#nav-portfolio').unbind('click').click(function() {
portf_apps.show();
});
Bind another click event to the other navbar elements before the portfolio showing one:
$("#navbar a").on('click', function () {
$(".portfolio-apps").hide();
});
var portf_apps = $('.portfolio-apps');
...
This will cause the portf_apps method to trigger afterwards which will show its children even if it's clicked. I suggest updating this to work with parent-child relationships generally, though.
http://jsfiddle.net/jWujm/