Edit: I am also okay with doing it through CSS if that is possible. Also, note that a:active will not work because a:active only changes the element / link for a brief moment while it is active, it does not change it until another link in the navigation bar is clicked.
I'm trying to write a code where, in the navigation bar, if a link is clicked and while the link links to the current page, the link color in the navigation bar should be different (should change to red from white). So far, here is my html.
<nav class="menuL">
<ul id="menu">
<li><span></span>biography</li>
<li><span></span>portfolio</li>
<ul id="submenu">
<li class="subclass" id="first">Wine</li>
<li class="subclass" id="second">Landscape</li>
<li class="subclass" id="third">Divers</li>
</ul>
</ul>
</nav>
<nav class="menuR">
<ul id="menu2">
<li><span></span>galleries</li>
<li><span></span>contact</li>
</ul>
</nav>
Here is the Javascript.
$(document).ready(function() {
$('nav a').click(function() {
$(this).closest('nav').find('.activeAnchor').removeClass('activeAnchor');
$(this).addClass('activeAnchor');
});
});
and here is my CSS to go with the Javascript.
a.activeAnchor {
color:red;
}
As the title mentions, this only effects the submenu. When I hover over portmenu (portfolio) and if I click a submenu item, then the submenu link I clicked changes to red and if I click another submenu item, it changes, so that works. However, if I click a non submenu item (a normal navigation bar li), it doesn't change. Any idea on why it is only effecting the submenu? Also, if I click one of the submenu items, I want portmenu (portfolio) to be highlighted instead of the submenu item, I'm not too good in Javascript so if someone can help me out with that, that would be great!
This line:
$(this).closest('nav').find('.activeAnchor').removeClass('activeAnchor');
...will only remove the 'activeAnchor' class from elements within the same <nav> element as the item just clicked, but your top-level menus are divided into two <nav> elements. You could do this instead:
$('.activeAnchor').removeClass('activeAnchor');
...to remove the active class from any element that had it.
Demo: http://jsfiddle.net/B8EPS/
Or just limit it to ones with some <nav> element anywhere on the page:
$('nav .activeAnchor').removeClass('activeAnchor');
(Or whatever other combination actually matches the html structure you are using.)
Related
I have a menu arranged like this:
<ul class="parent-menu">
<li class="menu-item">
<a class="menu-item-link" href="#">Link</a>
<ul class="sub-menu">
<!-- sub menu list items -->
</ul>
</li>
<!-- more parent menu list items -->
</ul>
The .sub-menu elements are hidden by default.
I'm using the following jQuery to show/hide the submenus perfectly fine:
$('.menu-item > a').hover(function() {
$(this).find('.sub-menu').toggle();
})
Of course, they disappear as soon as the mouse leaves the .menu-item > a element. I can't figure out a way to "handoff" the second half of the .toggle() event to work as basically a .mouseleave() on the entire .sub-menu element.
So when a user hovers on a parent menu item, they are presented with a sub menu, and should be able to hover at their leisure and select a sub menu item.
How would I go about this?
Figured it out actually. I was overcomplicating things by using .hover() and found that I could simply use mouseenter() and mouseleave() separately, but using the latter on the parent element of both the main menu item and its submenu. So when your mouse enters the parent menu item link, it shows its sub menu (I have multiple, so I had to use $(this) and find() or siblings() instead of hardcoding it). And when the mouse leaves the parent of both (so either the main link or the sub menu itself) it becomes hidden, as it should be.
Here's the code:
$('.menu-item > a').mouseenter(function() {
$(this).siblings('.sub-menu').show();
});
$('.menu-item').mouseleave(function() {
$(this).find('.sub-menu').hide();
});
display = false;
$('.sub-menu').toggle( display );
$('.parent-menu').mouseenter(function() {
$('.sub-menu').toggle("slow");
});
$('.parent-menu').mouseleave(function() {
$('.sub-menu').toggle("slow");
});
Not sure if you wanted each one to separately or together. This will open them all.
I have a dropdownmenu working as shown on jsfiddle example here
How can I get the dropdownmenu to be hidden on mouseout? I have added:
onmouseout="hidediv()";
to the div that contains the drop down menu - but, when you click the link that makes the drop down menu appear - as you move your mouse over the drop down menu it disappears - sometimes. Other times it hangs around as you mouseover the first item in the list, but when you move over the second item in the list - the menu disappears. I don't understand as the mouseout should apply to the whole div.
Change onmouseout to onmouseleave.
From MDN:
Similar to mouseout, [mouseleave] differs in that it doesn't bubble and that it
isn't sent until the pointer has moved from its physical space and the
one of all its descendants.
Fiddle
You have two completely independent elements for the menu and the button. Make the menu list ul#dvMenu a sub-item of the ul under #navcontainer, like this:
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
BTW, you don't need to have a surrounding div, you can apply all those styles directly to the unordered list. This way you won't leave the context of the element, hence avoiding the unintended hide. Also, bind onmouseout="hidemenu();" to the main <ul>.
I am trying to make a drop down list and I have made it somewhat work. When I put the mouse over the area, a div in the shape of the drop down becomes visible. Then when you put your mouse over anything in the div, it disappears. That is obviously not meant to happen. Here is my code. Any solution is greatly appreciated.
HTML:
<li><a onMouseOver="showServersDropDown()" onClick="showServersDropDown()" class="three-d">
Servers
<span aria-hidden="true" class="three-d-box">
<span class="front">Servers</span>
<span class="back">Servers</span>
</span>
</a></li>
<div onMouseOut="hideServersDropDown()" id="serversDropDown">
<p>Live Map</p>
</div> <!--This ends the Server List Drop Down Div-->
JS:
function showServersDropDown() {
document.getElementById("serversDropDown").style.display="block";
}
function hideServersDropDown() {
document.getElementById("serversDropDown").style.display="none";
}
I wasn't able to reproduce this exact issue, but it sounds like the problem is caused by hovering over the child elements of the div firing the onmouseout event of the parent div. I found this answer that should help you with that: prevent onmouseout when hovering child element of the parent absolute div.
I also noticed that you are changing display to none. Once the display is set to none, the div won't render at all on the browser, which will prevent mouse events from firing on it, so hovering in that area will not cause it to reappear. I found another answer here about hovering over a hidden element to reveal it: Hover over a hidden element to show it.
Also, it seems like you are missing an onmouseover event to reveal the drop down list when you hover over it, although I may be mistaken in what you are trying to accomplish.
So in all, with two modifications to your Javascript and a small modification to your HTML, I think you can achieve your intended result with this:
<div onmouseout="hideServersDropDown(event)" onmouseover="showServersDropDown(event)" id="serversDropDown">
<p>Live Map</p>
</div> <!--This ends the Server List Drop Down Div-->
function showServersDropDown(event) {
document.getElementById("serversDropDown").style.opacity="1";
}
function hideServersDropDown(event) {
var e = event.toElement || event.relatedTarget;
if (e.parentNode == this || e == this) {
return;
}
document.getElementById("serversDropDown").style.opacity="0";
}
I only put the event blocking code in hideServersDropDown since you would want the onmouseover event to fire and show whether you are hovering over a parent or a child in the div. I hope this helps!
It's usually because the mouse is leaving the original div, the key is to make the submenu a child of the main div:
<ul class="menu">
<li>
<a>nav title</a>
<ul>
<li><a>sub link</a></li>
</ul>
</li>
</ul>
Then in pure css you can handle this:
.menu ul { display: none }
.menu li:hover ul { display: block }
I have a menu with loadContent, which load the page in div #main, so I can change only the content and the menu always stay.
<ul>
<li class="page1" onclick="loadContent('page1.php');">page1</li>
<li class="page2" onclick="loadContent('page2.php');">page2</li>
<li class="page3" onclick="loadContent('page3.php');">page3</li>
</ul>
How can I slide smooth this content, when I click one of the pages on the menu, may be right to left or top to bottom, so I can hide "old" page and show (push out) the "new" page.
Look at this, there are some cool effects here http://jqueryui.com/effect/
Can anyone provide me with a link to a tutorial or plugin, preferably in jQuery that will allow me to create a menu that not only collapses vertically (jQueryUI's Accordian), but also collapses horizontally? No matter what I google, all I can find are the vertical ones, and the Wordpress one is super-integrated to its core, as far as I can tell.
EDIT: Here are some screenshots. The first is normal, the second is expanded / collapsed vertically, the third is collapsed horizontally.
Try jQuery UI i think thats what WP uses
http://jqueryui.com/
You can use a plugin like Accordion or Collapsible Menu (a bit more wordpress like) for the vertical collapse, and then put that menu in a div that can collapse horizontally with a plugin like TabSlideOut. Or just change the width of the menu DIV with .animate().
Also notice how the wordpress removes the text from the menus but leaves the icons.
html
<div class="hide-menu">Hide Menu</div>
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>
<ul class="subs"><li>Subs</li></ul>
</li>
</ul>
jQuery
$('.hide-menu').bind('click',function (){
$('#menu').animate({width:30});//can always extend this.
//u can use the if statement or toggle if u need toggling feature
});
$('#menu').children('li').bind('click',function (){
//here u can hide the subs
})
now ofcourse the above is not going to work exactly like wordpress or may not work at all but you get the idea :) I hope
I will toggle a class, as you can see there is an arrow that toggles horizontaly. So, just add or remove class and with CSS make the effect done, like this:
$(mi-button).click(function(e){
$(mi-menu-selector).toggleClass(your-class);
e.preventDefault;
});
with Css show or hide the text of each li of your menu.
.hide-horizontal{
text-indent:-999em;
}
You need to use responsive design to achieve this.
You can use CSS media queries:
http://en.wikipedia.org/wiki/Responsive_Web_Design
http://mediaqueri.es/