Response title
This is preview!
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
$("ul.topnav li span").hover(function() { //When trigger is onHover...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).show(400);
$(this).find('ul:first').css({visibility: "hidden"});
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
And here's my body to body to see the syntax I'm using
[code]
<body>
<div class="container">
<div id="header">
<div class="disclaimer"></div>
<ul class="topnav">
<li><a href="#">Lighting</a>
<ul class="subnav">
<li><a href="#">PR LIGHTING</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/Lighting/prl-ar.php">Architectural</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/prl-cp.php">Centerpieces</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/prl-dj.php">DJ Pro Series</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/prl-fs.php">Followspots</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/prl-my.php">Moving Yoke</a></li>
</ul></li>
<li><a href="#">NOVALIGHT</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/Lighting/nvl-sl.php">Searchlights</a></li>
</ul></li>
<li><a href="#">OMNILITE</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/Lighting/lit-cr.php">Controllers</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/lit-fx.php">Effect Lighting</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/lit-il.php">Intelligent</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/lit-ld.php">LED Lighting</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/lit-se.php">Special Effects</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/lit-uv.php">UV Lighting</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/lit-st.php">Stands</a></li>
</ul></li>
<li><a href="#">PSL</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/Lighting/psl-ar.php">Architectural</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/psl-cp.php">Centerpieces</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/psl-fx.php">Effect Lighting</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/psl-fo.php">Fiber Optic</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/psl-il.php">Intelligent</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/psl-se.php">Special Effects</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/psl-th.php">Theatrical</a></li>
<li><a href="http://omnisistem.com/layers/Lighting/lit-uv.php">UV Lighting</a></li>
</ul></li>
</ul></li>
<li><a href="#">LED</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/LED/led-fx.php">Effects</a></li>
<li><a href="http://omnisistem.com/layers/LED/led-pc.php">Par Cans</a></li>
<li><a href="http://omnisistem.com/layers/LED/led-my.php">Moving Yoke</a></li>
<li><a href="http://omnisistem.com/layers/LED/led-sp.php">Strips</a></li>
<li><a href="http://omnisistem.com/layers/LED/led-ps.php">Panels</a></li>
<li><a href="http://omnisistem.com/layers/LED/led-vw.php">Video Walls</a></li>
</ul></li>
<li><a href="#">Lasers</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/Lasers/lsr-pr.php">Professional</a></li>
<li><a href="http://omnisistem.com/layers/Lasers/lsr-sp.php">Semi-Professional</a></li>
<li><a href="http://omnisistem.com/layers/Lasers/lsr-dj.php">DJ & Club</a></li>
<li><a href="http://omnisistem.com/layers/Lasers/lsr-la.php">Accessories</a></li>
</ul></li>
<li><a href="#">Omni Cables</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/Omni Cables/cbl-al.php">All Cables</a></li>
</ul></li>
<li><a href="#">Omni Cases</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/Omni Cases/css-hd.php">Hard</a></li>
<li><a href="http://omnisistem.com/layers/Omni Cases/css-sf.php">Soft</a></li>
<li><a href="http://omnisistem.com/layers/Omni Cases/css-rd.php">Road</a></li>
<li><a href="http://omnisistem.com/layers/Omni Cases/css-fl.php">Flight</a></li>
</ul></li>
<li><a href="http://omnisistem.com/layers/Omni Sound/snd-al">Omni Sound</a></li>
<li><a href="#">TrussSistems</a>
<ul class="subnav">
<li><a href="http://omnisistem.com/layers/TrussSistems/trs-cl.php">Clamps</a></li>
<li><a href="http://omnisistem.com/layers/TrussSistems/trs-tr.php">Truss</a></li>
</ul></li>
</ul>
</div>
</div>
</body>
Thanks Guys!
[/code]
var isExtended = 0;
var width = 200;
var height = 480;
var slideDuration = 1000;
var opacityDuration = 1500;
function extendContract(){
if(isExtended == 0){
sideBarSlide(0, height, 1, width);
sideBarOpacity(0, 1);
isExtended = 1;
// make expand tab arrow image face left (inwards)
$('#sideBarTab').children().get(0).src = $('#sideBarTab').children().get(0).src.replace(/(\.[^.]+)$/, '-active$1');
}
else{
sideBarSlide(height, 0, width, 1);
sideBarOpacity(1, 0);
isExtended = 0;
// make expand tab arrow image face right (outwards)
$('#sideBarTab').children().get(0).src = $('#sideBarTab').children().get(0).src.replace(/-active(\.[^.]+)$/, '$1');
}
}
function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth) {
$("sideBarContents").css ({'height': fromHeight, 'width': fromWidth});
$("#sideBarContents").animate( { 'height': toHeight, 'width': toWidth }, { 'queue': false, 'duration': slideDuration }, "linear" );
}
function sideBarOpacity(from, to){
$("#sideBarContents").animate( { 'opacity': to }, opacityDuration, "linear" );
}
$(function(){
// Document is ready
$('#sideBarTab').hover( function() { extendContract(); return false; },function(){});
});
var isExtended = 0;
var height = 320; // This is the Variable that I need to be made Dynamic
var width = 200;
var slideDuration = 1000;
var opacityDuration = 1500;
function extendContract(){
if(isExtended == 0){
sideBarSlide(0, height, 1, width);
sideBarOpacity(0, 1);
isExtended = 1;
// make expand tab arrow image face left (inwards)
$('#sideBarTab').children().get(0).src =
$('#sideBarTab').children().get(0).src.replace(/(\.[^.]+)$/, '-active$1');}
else{
sideBarSlide(height, 0, width, 1);
sideBarOpacity(1, 0);
isExtended = 0;
// make expand tab arrow image face right (outwards)
$('#sideBarTab').children().get(0).src =
$('#sideBarTab').children().get(0).src.replace(/-active(\.[^.]+)$/, '$1');}}
function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth) {
$("sideBarContents").css ({'height': fromHeight, 'width': fromWidth});
$("#sideBarContents").animate( { 'height': toHeight, 'width': toWidth }, {
'queue': false, 'duration': slideDuration }, "linear" );}
function sideBarOpacity(from, to){
$("#sideBarContents").animate( { 'opacity': to }, opacityDuration, "linear"
);}
$(function(){
// Document is ready
$('#sideBarTab').hover( function() { extendContract(); return false; });
});
$(document).ready(function() {
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/sidebar.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function () {
$('LI.drawer H2:not(.open)').next().hide();
$('H2.drawer-handle').click(function () {
$('LI.drawer UL:visible').slideUp().prev().removeClass('open');
$(this).addClass('open').next().slideDown();
});
});
//-->
</script>
</head>
<body>
<div id="sideBar">
# images/main/slide-button.png
<div id="sideBarContents">
<div class="sideBarContentsInner">
<h2 class="drawer-head">sidebar</h2>
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle">...</h2>
<ul><li> # ... </li></ul>
</li>
</ul>
</div>
</div>
</div> <!-- "sidebar" -->
</body>
</html>
© 2013 jQuery Foundation
Sponsored by and others.