We Keep Coding

Showing a submenu on hover of the parent link, then keeping it visible until the mouse leaves the sub menu?

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.

jQuery menu links mouseout issue

I have menu links on a page that lie across the top horizontally.
When I hover on a particular link, a div appears below it showing child divs. for this I used jQuery hover function.
Now, when I mouseout of the link, the div that appeared should dissappear, I used mouseout function to do that.
My problem is, when I am leaving the link to go into one of the child links, it should not dissappear. How do I achieve this?
as I move my mouse towards the child links, as soon as I moouseout of the parent link, the child div dissappears.

You can give them(menu and layers) the same class.
Sample code:
<div class="menu keep">
<div class="layer keep">Layer1</div>
<div class="layer keep">Layer2</div>
<div class="layer keep">Layer2</div>
<div class="layer keep">Layer3</div>
</div>
and in JQuery:
$(".keep").on("mouseenter",function(){
$(".layer").show();
});
$(".keep").on("mouseleave",function(){
$(".layer").hide();
});

Customize jQuery submenu positioning

I am trying to create a horizontal menu that has at least two levels of submenus. All submenus are vertical.
Submenu1 will be directly below its parent.
All subsequent submenu levels (2+) should be to the right of its parent.
I am just starting to learn how to use jQuery menu, and they don't seem to have a customization for this. I am not sure how to approach this... I tried and failed to call .menu() on $("#myMenu .level1").
My question is - I would much appreciate if someone can point me in the right direction on how to make the menu as I have stated above.
Javascript snippet
<script>
$(function() {
$("#myMenu").menu({
position: {
my: "left top",
at: "left bottom"
}
});
});
</script>
HTML snippet
<ui id="myMenu">
<li class="level1">
Item 1
<ul>
<li class="level2">
Item 1
<ul>
<li class="level3">
Item 1
</li>
</ul>
</li>
</ul>
</li>
Update: JSbin

Hi finally i have an answer for your question. Using some properties of the menu like blur and focus. I found this page that already has the solution http://forum.jquery.com/topic/how-to-make-the-perfect-horizontal-menu. I studied those lines and applied it in your code. If you have any question about the functionality feel free to ask.
Review the new code here http://jsbin.com/uxuTAba/5/.

Psuedocode:
On mouseover of Menu Item, slidedown List (positioned right under Menu Item)
On mouseover of List Element, slidedown List Element X's Submenu (positioned to the right of X)
Basically what I am saying is, to position your menus with CSS and then use slideDown() and slideUp() to display them dynamically. So the menus positioning does not need to be determined with the jQuery at all -- just the display status of sliding them up/down. But they're all positioned relative to the menu, with your base CSS.

Moving div horizontally on click of 4 different buttons

I have this page on which there is div "celpage" with absolute position which contains all the content of the page, basically containing 4 different divs placed side by side.
I have four buttons in a header:
<div id="header">
<ul id="navlist">
<li><div id="centeredLogo"></div></li>
<li><div id="centeredFolio"></div></li>
<li><div id="centeredStor"></div></li>
<li><div id="centeredKont"></div></li>
I want this div "celpage" to move 875 to the left when clicked on Folio, 2x875 when clicked on Storitve and 3x875 when clicked on Kontakt and vice versa, so when clicked on button the page would scroll to corresponding div meant to be shown for that button.
I would practically like to achieve the same effect as this http://gazpo.com/downloads/tutorials/jquery/horizontal_scroll/, only on a whole page (except for header and footer which would remain static).
These 4 divs are made of 20 or so smaller rectangular divs with absolute positions. If I set relative position to "celpage" the sliding works, however the whole layout of the page is no longer centered. I am looking for a sliding solution for div with absolute position.
I created a jsFiddle to illustrate the page: http://jsfiddle.net/rUaYr/1/
Thanks!

The answer you seek is in the tutorial you posted. All you need to change is the container element.

Javascript code only effects drop-down menu links for some reason

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.)