We Keep Coding

Navigation bar- animate a ul

I want to make a navigation bar with submenu's that slide out when clicked.
So I want to animate a unordered list when another unordered list item is clicked.
So i'm thinking something like: (excluding the CSS)
<ul id="menu">
<li id="filemenu">File</li>
<li id="reportmenu">Reports</li>
<li id="toolsmenu">Tools</li>
<li id="helpmenu">Help</li>
</ul>
<div class="fileSubmenu">
<ul class = "fileSubmenu sm">
<li>New</li>
<li>Open</li>
<li>Copy</li>
<li>Print Setup</li>
<li>Exit</li>
</ul>
</div>
jquery:
$(document).ready(function () {
$("#filemenu").click(function () {
$(".fileSubmenu").animate({left:'50px'});
});
});
So I would think that the entire 2nd list would slide to the right but it doesn't.
what do the experts suggest?
the basic structure http://jsfiddle.net/zLCWW/2/

Try this one:
$(document).ready(function () {
$("#filemenu").click(function () {
$("div.fileSubmenu").animate({paddingLeft:'50px'});
});
});
because with the left-attribute, you can only modify elements which are position:relative or position:absolute.

Here is a great demo on building and animating a slide out nav menu. This is fixed to left side of screen but you can tweak it to your needs.
Demo

You just need to make your CSS positioning use something other than the default (which is static).
Here's a demo
CSS:
.fileSubmenu {
position: relative;
}
If you have an affliction towards strictly using jQuery:
jQuery:
$('.fileSubmenu').css({'position': 'relative'}).animate({'left': '50px'});

Try this: FIDDLE
JS
$(document).ready(function () {
$("#menu li").click(function () {
$( ".fileSubmenu" ).animate({
width: "70%",
marginLeft: "50px"
}, 1500 );
});
});

jQuery drop down list hover

This is what I have come up with.
HTML
<ul class="treatment-menu">
<li>Always visible menu</li>
<ul class="nav-child">
<li>Hidden menu</li>
</ul>
</ul>
Hover function
$('.treatment-menu li').hover(function () {
$(this).find('.nav-child').show();
},
function () {
$(this).find('.nav-child').hide();
});
FIDDLE http://jsfiddle.net/HBMfB/3/
However I can not get the .navchild to display when .treatment-menu li is hovered.
Any ideas?
Thank you.

You can Just use Css for that
http://jsfiddle.net/PpYQS/
.nav-child {
display:none;
}
.treatment-menu:hover .nav-child
{
display:block;
}
If you are using jquery you can do a .toggle() instead of writing show() and hide()
http://jsfiddle.net/rbw8v/
$('.treatment-menu li').hover(function () {
$(this).find('.nav-child').toggle();
});
or .slideToggle() for slide effect.
$('.treatment-menu li').hover(function () {
$(this).find('.nav-child').slideToggle();
});

One page website, show/hide divs, menu button will not stay selected

I'm trying to make a one page website with a menu (pictures, css roll over...), that will display a different div when each menu button is clicked. Only one div will be shown at time though and if one is already open it should be hidden. This is working well.
The problem I am having is that that the menu button which shows the result will not stay selected i.e. on the same picture as the roll over (hover).
HTML :
<ul class="menu">
<li class="home"><span class="displace"></span></li>
<li class="credits"><span class="displace"></span></li>
<li class="idea"><span class="displace"></span></li>
</ul>
<div id="content1">home text</div>
<div id="content2">credits text1</div>
<div id="content3">idea text</div>​
JS / jQuery :
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
$(function stay() {
$('menu').click(function stay() {
$('menu').removeClass('selected');
$(this).addClass('selected');
});
});
​
Demo: http://jsfiddle.net/anKT3/159/
I've tried creating a function to change the class, but I've not had any luck.

Change your stay() function to be as follows:
$(function stay() {
$('.menu li a').click(function stay() {
$('.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});

Here is JS fiddle
$(function stay() {
$('ul.menu li a').click(function () {
$('ul.menu li a').removeClass('selected');
$(this).addClass('selected');
});
});

Scroll smoothly on hover an unordered list with fixed height

I have a fixed height unordered list <ul> with fixed height list items <li>
My ul height is 600px and it contains 200 li items with 40px height.
I need to create a script which scrolls down the list when the mouse hovers the bottom of the list and scrolls up when the mouse hovers the top of the list.
I tried this: http://archive.plugins.jquery.com/project/hoverscroll but it is not as smooth as it should be, so I need to create a custom one (maybe not using jQuery at all).
Any ideas or examples? How can I achieve the desired effect?
Thanks

Try to use $wrapper.animate({scrollTop: step});
for example
JS:
var isScroll = false;
$(document).ready(function () {
$('#up').hover(function () {
isScroll = true;
gotoNext(true);
}, function () { isScroll = false; });
$('#down').hover(function () {
isScroll = true;
gotoNext(false);
}, function () { isScroll = false; });
});
function gotoNext(dir) {
if (isScroll) {
isScroll = true;
var step = dir ? '-=20' : '+=20';
$('#wrapper').animate({
scrollTop: step
}, 200, "linear");
setTimeout(function () { gotoNext(dir); }, 200);
}
}
HTML:
<div style="height:10px; background:green; width:200px;" id="up"></div>
<div style="height:200px; overflow:auto; width:200px;" id='wrapper'>
<ul>
<li style="height:30px;">1</li>
<li style="height:30px;">2</li>
<li style="height:30px;">3</li>
<li style="height:30px;">4</li>
<li style="height:30px;">5</li>
<li style="height:30px;">6</li>
<li style="height:30px;">7</li>
<li style="height:30px;">8</li>
<li style="height:30px;">9</li>
<li style="height:30px;">1</li>
<li style="height:30px;">2</li>
<li style="height:30px;">3</li>
<li style="height:30px;">4</li>
<li style="height:30px;">5</li>
<li style="height:30px;">6</li>
</ul>
</div>
<div style="height:10px; background:green; width:200px;" id="down"></div>
it is looks pretty good for me

Why not devide your screen into a grid? once the mouseX and mouseY hit the top grid it will scroll up with a predefined integer value

jQuery .hover() is driving me crazy

I have a project that uses drop-down menus that are nested ul's, like so:
<ul id="nav">
<li id="thome" class="navtab">
HOME
<ul id="subnav_home" class="submenu">
<li>Dashboard</li>
<li>SMS</li>
<li>Email</li>
<li>Twitter</li>
</ul>
</li>
</ul>
Using jQuery, I've added a .hover() to the .navtab li that .show()s the .submenu ul. The problem is that when the cursor moves into the new ul, the .hover()-out for the .navtab fires, .hide()ing the sub-menu, despite the fact that I have the height of the li so that it entirely wraps the .submenu ul.
I've tried adding a delay to the .hide(), but if you pass your cursor over the navtab bar quickly, you get all of the sub-menus at once.
Any solutions for me? Here's the relevant JavaScript. The hide() function is identical to .show() except that it shrinks the height and hides the ul (obviously).
$('.navtab').hover(
function(){
tabShowSubnav($(this).attr('id'));
},
function(){
tabHideSubnav($(this).attr('id'));
});
function tabShowSubnav(menu){
var sb = '#' + menu + ' > .submenu';
var tb = '#' + menu;
$('.navtab').each(function(){
if (!$(this).hasClass('current_page')){
$(tb).addClass('nav_hover');
}
});
$(tb).css('height','239px');
$(sb).show();
}

$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('current_page').addClass("nav_hover");
},
function() {
});
$(".submenu").mouseout(function(){
$(this).hide();
});

$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('.current_page').addClass("nav_hover");
},
function() {
$(this).children(".submenu").hide();
});
This worked for me.

I finally had to go with the jQuery plugin hoverIntent, that ignores children for the purpose of mouseout.