jQuery multi-level menu- drop Up instead?

[Rockonmetal]

My friend modified the jquery slide menu from Dynamic Drive, click here to see it. We added a slider thing like http://coldbeep.co.cc/ Now the drop down sorta works. You have to have ninja fast skills to click on a drop down item. Thats because the slider is above the menu and when you go to select a drop down item it thinks you are off the link so it goes away... and it really looks cool with the slider on the bottom and sorta point less with it on the top... so I decided that we should make the items drop up. What would I need to change in order to make the items drop up so it isn't in the way of the slider... BTW here is the css code

html, body{
	background: url(../media/background.gif);
	font-family: Calibri, Arial;
	}
.jqueryslidemenu{
font: bold 12px Verdana;
background: url(../media/menubghover.gif);
border: 1px solid #FFFFFF;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;

}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: url(../media/menubghover.gif);
color: white;
padding: 8px 10px;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
}
	
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
z-index: 100;
left: 0;
top: 10px;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
.jqueryslidemenu ul li ul li a:hover{
color: #4CFF00 !important;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 15px Calibri;
background: #FFFFFF;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
color: #000000 !important;
border-top-width: 0;
border: 1px solid #4CFF00;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
color: #4CFF00 !important;
background-color: #EEEEEE !important;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
.content{
background-color: #FFFFFF;
border: 1px solid #A0A0A0;
}
.top {
	background: url(../media/topdivbg.png);
	height: 30px;
	}
.bottom {
background: url(../media/bottomdivbg.png);
height: 30px;
font-size: 11px;
color: #888888;
}	
h1{
	color: #A0A0A0;
	font-size: 19px;
	padding-left: 5px;
	}
p{
	text-indent: 15px;
	color: #777777;
	
	}
	
#slide {
margin-top: 25px;
position:absolute; 
height: 3px; 
background-color: #FFFFFF;
z-index:10;
}
//slider^^

Thanks!

[ddadmin]

Warning: Please include a link to the DD script in question in your post, in this case: http://www.dynamicdrive.com/style/cs...el_css_menu_2/.

If you mean have all the sub menus drop up, find the line:

$subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})

inside the .js file, and replace that with:

$subul.css({top:this.istopheader? -this._dimensions.subulh+"px" : -this._dimensions.subulh+this._dimensions.h})

[Rockonmetal]

Thanks admin! Sorry bout forgetting to link to the script!

[NeoBasilisk]

Hello, I very much appreciate the above help. I don't want to be greedy, but I have an additional request. If it isn't too much trouble, I was wondering how I should modify the code to make the animation draw from the bottom to the top so that the menu appears to pop out of the top of the bar instead of still drawing top to bottom as if the menu were still a pop-down menu. The reason I'm asking is because I'm working with a very large "drop-up" menu, and the animation is rather awkward because the menu is long. Thank you in advance for any help.

[IndianWebSolutions]

Nice. This is what I'm looking for some quite time. what would be the code if we implement both drop up and drop down in the same page. appreciate to get the reply soon. Thanks

[Jingleballs]

to animate upwards, change 'top' to 'bottom'

$subul.css({bottom:this.istopheader? -this._dimensions.subulh+"px" : -this._dimensions.subulh+this._dimensions.h})

[javascript_user]

Hi Jingleballs,

Your solution isn't working for animating it upwords ?

Does anyone know how can we animate it upwords - (exactly what NeoBasilisk second question is) ?

Thanks

[DizzyBHigh]

Hi Jingleballs,

Your solution isn't working for animating it upwords ?

Does anyone know how can we animate it upwords - (exactly what NeoBasilisk second question is) ?

Thanks

Hi there this is an ld thread i know.

but if you need a soloution for the drop up i have something you can do:

the problem is because script uses $jQuery().slideUp(); and $jQuery().slideDown()

this methods functionality is limited, it can only open by rvealing the content from the top down (expanding) and colapse upwards from bottom to top (closing)

you can however use the jquery UI to enable .show and . hide which allows more configuration in how an element opens/closes.
you can get jQueryUI from here: http://www.jqueryui.com

http://www.jqueryui.com

download jquery ui put it in your scrips folder and link to it:
(right after the entry for jquery)
<script src="/Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

In the js for the menu look for the slideDown() call :
.slideDown(jqueryslidemenu.animateduration.over)

replace it with:
.show("blind", { direction: "up"} , jqueryslidemenu.animateduration.over)

look for the slideUp call:
$targetul.slideUp(jqueryslidemenu.animateduration.out)

and replace it with:
$targetul.hide("blind", { direction: "left"}, jqueryslidemenu.animateduration.out)

that should work for you it did for me.

you might want to play around with the effects and direction