[jQuery] Need help building a jQuery dropdown menu
Hi folks
I'm just starting out with jQuery. I want to make a simple 'ul'
dropdown menu to improve my understanding. The basic flow is this:
'ul.menu li ul' has display:none on hover of li, get store height
of 'this' hidden ul set height of 'this' ul to 0 set display to
block animate height to original stored height
I know there are already some great plugins for dropdowns, but I
really want to roll my own to get a better understanding of jQuery.
So far I have managed the following, very badly done (see live version
here - http://jsbin.com/eduvi):
var $j = jQuery.noConflict();
$j(document).ready(function(){
// Get height of current hidden ul
$j(ul.menu li).hover(function() {
getHeight($j(ul, this).height());
});
// Set height to 0px
$j('ul.menu li').hover(function() {
$j(ul, this).css({height:0px});
});
// Set display to block
$j('ul.menu li').hover(function() {
$j(ul, this).css({display:block});
});
// Animate height to stored height
$j('ul.menu li').hover(function getHeight(h) {
$j('ul:first', this).stop().animate({ height : 100% } , 400 );
});
// Display height of current hidden ul
function getHeight(h) {
$j(div.test).text(The height for the hidden ul is + h +
px.); }
});
I'd like to know how do I get it to use the stored original height, in
place of that 100%.
And secondly, I'm sure this can all be condensed down to just a few
lines, but don't really have a clue how to do that yet.
Any help very much appreciated!
[jQuery] jQuery DropDown Menu Like Office 2007?
Hi every: I'm using Superfish menu in one application but I want to know if exists any plugin for dropdown menus with styles like Office? Cheers -- Ing. Reynier Pérez Mira
[jQuery] Dropdown menu Issue
So I got a bit of a issue. I have a working dropdown menu animated on
hover with slideDown and slideUp. But the problem is if I move off and
on the menu quickly it will repeat the slideDown/Up effect. So I
thought I would add stop() right before slideDown/Up and that breaks
it. It'll work for the first couple times but then it starts cutting
the menu off. Its really weird. Does anyone have a suggestion? Here is
the code:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
titleCSS Dropdown/title
script type=text/javascript src=php/jquery.tools.min.js/script
style type=text/css
/* General */
* { padding: 0; margin: 0; }
body { font-family: verdana, arial, sans-serif; font-size: small;
background-color: black; }
#menu, #menu ul { list-style: none; }
#menu {margin:10px;}
/* Head links */
#menu li.topnav { width: 150px; float: left; margin-left: -1px;
border: 1px black solid; background-color: #e9e9e9; text-align:
center; }
#menu li.topnav a { display: block; padding: 15px; }
/* Child lists and links */
#menu li.topnav ul { display: none; border-top: 1px black solid; text-
align: left; }
#menu li.topnav:hover ul { display: block; }
#menu li.topnav ul li a { padding: 5px; height: 17px; }
#menu ul.topnav li a:hover {background-color: #333; }
/style
script language=JavaScript
$(function(){
$('#menu li').hover(
function() {
$(this).find('ul:first').css({display:none}).slideDown();
},
function(){
$(this).find('ul:first').slideUp('slow');
});
});
/script
/head
body
ul id=menu
li class=topnav
a href=#Search Engines/a
ul
lia href=http://google.com/;Google/a/li
lia href=http://yahoo.com/;Yahoo/a/li
lia href=http://live.com/;Live
Search/a/li
/ul
/li
li class=topnav
a href=http://shopping.com;Shopping/a
ul
lia href=http://amazon.com/;Amazon/a/li
lia href=http://ebay.com/;eBay/a/li
lia
href=http://craigslist.com/;CraigsList/a/li
/ul
/li
/ul
/body
/html
[jQuery] dropdown menu does not drop1
Hi! I installed superfish on this site www.itipensa.com. The institutions is suppossed to be a drop down menu, but it just doesn't drop. It looks like it gets stuck in somewhere and i just am not able to figure what is wrong. Please help me fix it. Thanks in advavnce.
[jQuery] DropDown Menu
Hello guys, thanks for the help last time... now I'm coming here to ask you help to build a dropDown menu I already built one, but its positioning isn't working very well, when the dimension of the screen is redimensioned or when the page is zoomed. I had trouble creating the menu because ppl on design made the website using image maps... i tryied to get the position of the map using jquery, but it always return top 0 and left 0, so it's no use... If you guys want to understand better what I'm talking about, check www.astralpaes.com.br/temp and pass your mouse over Produtos and Projetos.. Thanks in advance for your time. Att. Paulo Henrique Vieira Neves Bsc. Sistemas de Informação +55 38 9141 5400 MSN: paulode...@live.com GTALK: paulode...@gmail.com SKYPE: paulodemoc
[jQuery] Dropdown menu top and left border Superfish
Hi, How can I take off the top and left border that shows on my menu? Thx Henry
[jQuery] Dropdown Menu
hi all I'm looking for a dropdown menu. There is a menu with all the features I need at: http://p.sohei.org/stuff/jquery/menu/demo/demo.html But it looks like it's not compatible with newest JQuery version. What I need: o easy to use o keyboard support (cursor keys, esc) o simple demo o call javascript function when click o same behavior as menus in normal operating system (click to open) I tried many menus now, but found only one that is ok. But that one has problem with newest jquery version. Where do I find a good menu? If there whould be a horizontal option for context menu (right mouse button) it would be fine. Bernhard
[jQuery] [Dropdown menu] Expand upwards!
Hello.
I´m trying to make a tab menu with dropdown child menus.
Nothing strange with that, just a nested unordered list like this:
ul
lia href=Value1/a/li
lia href=Value2/a
ul
lia href=Subvalue1/a/li
/ul
/li
/ul
Now to my problem/question: How to expand the submenu upwards?
Please see this what I want picture.
http://api.mediatechdesign.se/jquery/tab_expand_menu.png
I have try with different types of animations, slideDown, but can´t
figured out.
$(.tabs li).hover(
function(){
$(this).children(ul).slideDown(fast);
},
function(){
$(this).children(ul).slideUp(fast);
});
