Add jQuery to a CSS Dropdown Menu
I have a CSS based menu and I want to add a Slide down easing effect (easeOutBounce) to it. Here is my Script, HTML and an image for reference. I want to add this easing effect to a css class named ".fusion-submenu-wrapper"
I am loading jquery-1.4.2.min.js & jquery.easing.1.3.min.js in my template. The Menu title is animating but the the easing effect is not being applied to the drop-down.
Kindly Help
// Mega Menu
$(function() {
var $menu = $('#jompress_menu');
$menu.children('li.parent').each(function(){
var $this = $(this);
var $span = $this.children('span');
$span.data('width',$span.width());
$this.bind('mouseenter',function(){
$menu.find('.slider').stop(true,true).hide();
$span.stop().animate({'width':'335px'},'200'function(){
$this.find('.slider').slideDown();
});
}).bind('mouseleave',function(){
$this.find('.slider').stop(true,true).hide();
$span.stop().animate({'width':$span.data('width')+'px'},'200');
});
});
});
Here is the HTML:
<!-- Begin Top Navigation -->
<div id="jompressMenu" class="nav nav-main">
<div class="nopill">
<ul id="jompress_menu" class="menutop level1 slider " >
<li class="item1 active root" > <a class="orphan item image subtext" href="http://localhost/svr/jom/" > <span>
<div class="menu-image"> <img src="/svr/jom/templates/jompress_j15/images/icons/64x64/Home.png" alt="Home.png" /> </div>
<div class="menu-text">
<div class="menu-maintext"> Home </div>
<div class="menu-subtext"> <em>My Place</em> </div>
</div>
</span> </a> </li>
<li class="item61 parent root" > <span class="daddy item image subtext nolink slider"> <span>
<div class="menu-image"> <img src="/svr/jom/templates/jompress_j15/images/icons/64x64/Web.png" alt="Web.png" /> </div>
<div class="menu-text">
<div class="menu-maintext"> Demo <em>In Action</em> </div>
</div>
</span> </span>
<div class="fusion-submenu-wrapper slider level2" style="width:180px;">
<ul class="level2" style="width:180px;">
<li class="item64" > <a class="orphan item bullet" href="/svr/jom/" > <span>
<div class="menu-image"> </div>
<div class="menu-text">
<div class="menu-maintext"> Example Menu </div>
<div class="menu-subtext"> </div>
</div>
</span> </a> </li>
<li class="item54 parent" > <a class="daddy item bullet" href="/svr/jom/" > <span>
<div class="menu-image"> </div>
<div class="menu-text">
<div class="menu-maintext"> Module in Menu </div>
<div class="menu-subtext"> </div>
</div>
</span> </a>
<div class="fusion-submenu-wrapper slider level3 columns3" style="width:600px;">
<ul class="level3" style="width:200px;">
<li class="item27 parent grouped-parent" > <a class="daddy item bullet" href="/svr/jom/index.php?option=com_content&view=article&id=19&Itemid=27" > <span>
<div class="menu-image"> </div>
<div class="menu-text">
<div class="menu-maintext"> Joomla! Overview </div>
<div class="menu-subtext"> </div>
</div>
</span> </a>
<div class="fusion-grouped ">
<ol>
<li class="item34" > <a class="orphan item bullet" href="/svr/jom/index.php?option=com_content&view=article&id=22&Itemid=34" > <span>
<div class="menu-image"> </div>
<div class="menu-text">
<div class="menu-maintext"> What's New in 1.5? </div>
<div class="menu-subtext"> </div>
</div>
</span> </a> </li>
<li class="item2" > <a class="orphan item bullet" href="/svr/jom/index.php?option=com_content&view=article&id=5&Itemid=2" > <span>
<div class="menu-image"> </div>
<div class="menu-text">
<div class="menu-maintext"> Joomla! License </div>
<div class="menu-subtext"> </div>
</div>
</span> </a> </li>
<li class="item37 parent" > <a class="daddy item bullet" href="/svr/jom/index.php?option=com_content&view=section&id=4&Itemid=37" > <span>
<div class="menu-image"> </div>
<div class="menu-text">
<div class="menu-maintext"> More about Joomla! </div>
<div class="menu-subtext"> </div>
</div>
</span> </a>
<div class="fusion-submenu-wrapper slider level5" style="width:180px;">
<ul class="level5" style="width:180px;">
<li class="item41" > <a class="orphan item bullet" href="/svr/jom/index.php?option=com_content&view=section&id=3&Itemid=41" > <span>
<div class="menu-image"> </div>
<div class="menu-text">
<div class="menu-maintext"> FAQ </div>
<div class="menu-subtext"> </div>
</div>
</span> </a> </li>
<li class="item50" > <a class="orphan item bullet" href="/svr/jom/index.php?option=com_content&view=category&layout=blog&id=1&Itemid=50" > <span>
<div class="menu-image"> </div>
<div class="menu-text">
<div class="menu-maintext"> The News </div>
<div class="menu-subtext"> </div>
</div>
</span> </a> </li>
<li class="item48" > <a class="orphan item bullet" href="/svr/jom/index.php?option=com_weblinks&view=categories&Itemid=48" > <span>
<div class="menu-image"> </div>
<div class="menu-text">
<div class="menu-maintext"> Web Links </div>
<div class="menu-subtext"> </div>
</div>
</span> </a> </li>
<li class="item49" > <a class="orphan item bullet" href="/svr/jom/index.php?option=com_newsfeeds&view=categories&Itemid=49" > <span>
<div class="menu-image"> </div>
<div class="menu-text">
<div class="menu-maintext"> News Feeds </div>
<div class="menu-subtext"> </div>
</div>
</span> </a> </li>
</ul>
<div class="drop-bot"></div>
</div>
</li>
</ol>
</div>
</li>
</ul&g开发者_如何学编程t;
<ul class="level3" style="width:200px;">
<li class="item56 grouped-parent" > <span class="orphan item bullet nolink slider"> <span>
<div class="menu-image"> </div>
<div class="menu-text">
<div class="menu-maintext"> Login </div>
</div>
</span> </span>
<div class="fusion-grouped type-module">
<ol>
<li>
<div class="fusion-modules item">
<form action="/svr/jom/index.php" method="post" name="login" id="form-login" >
<fieldset class="input">
<p id="form-login-username">
<label for="modlgn_username">Username</label>
<br />
<input id="modlgn_username" type="text" name="username" class="inputbox" alt="username" size="18" />
</p>
<p id="form-login-password">
<label for="modlgn_passwd">Password</label>
<br />
<input id="modlgn_passwd" type="password" name="passwd" class="inputbox" size="18" alt="password" />
</p>
<p id="form-login-remember">
<label for="modlgn_remember">Remember Me</label>
<input id="modlgn_remember" type="checkbox" name="remember" class="inputbox" value="yes" alt="Remember Me" />
</p>
<input type="submit" name="Submit" class="button" value="Login" />
</fieldset>
<ul>
<li> <a href="/svr/jom/index.php?option=com_user&view=reset"> Forgot your password?</a> </li>
<li> <a href="/svr/jom/index.php?option=com_user&view=remind"> Forgot your username?</a> </li>
<li> <a href="/svr/jom/index.php?option=com_user&view=register"> Create an account</a> </li>
</ul>
<input type="hidden" name="option" value="com_user" />
<input type="hidden" name="task" value="login" />
<input type="hidden" name="return" value="L3N2ci9qb20v" />
<input type="hidden" name="d833143a0d618ec33f3663f5cad4a48c" value="1" />
</form>
</div>
</li>
</ol>
</div>
</li>
</ul>
<ul class="level3" style="width:200px;">
<li class="item60 grouped-parent" > <span class="orphan item bullet nolink slider"> <span>
<div class="menu-image"> </div>
<div class="menu-text">
<div class="menu-maintext"> Opinion Poll </div>
</div>
</span> </span>
<div class="fusion-grouped type-module">
<ol>
<li>
<div class="fusion-modules item">
<div class="module-poll ">
<form action="index.php" method="post" name="form2">
<h4>Joomla! is used for?</h4>
<ul>
<li>
<input type="radio" name="voteid" id="voteid1" value="1" alt="1" />
<label for="voteid1">Community Sites</label>
</li>
<li>
<input type="radio" name="voteid" id="voteid2" value="2" alt="2" />
<label for="voteid2">Public Brand Sites</label>
</li>
<li>
<input type="radio" name="voteid" id="voteid3" value="3" alt="3" />
<label for="voteid3">eCommerce</label>
</li>
<li>
<input type="radio" name="voteid" id="voteid4" value="4" alt="4" />
<label for="voteid4">Blogs</label>
</li>
<li>
<input type="radio" name="voteid" id="voteid5" value="5" alt="5" />
<label for="voteid5">Intranets</label>
</li>
<li>
<input type="radio" name="voteid" id="voteid6" value="6" alt="6" />
<label for="voteid6">Photo and Media Sites</label>
</li>
<li>
<input type="radio" name="voteid" id="voteid7" value="7" alt="7" />
<label for="voteid7">All of the Above!</label>
</li>
</ul>
<p class="buttons">
<input type="submit" name="task_button" class="button-vote" value="Vote" />
<input type="button" name="option" class="button-results" value="Results" onclick="document.location.href='/svr/jom/index.php?option=com_poll&id=14:joomla-is-used-for'" />
</p>
<input type="hidden" name="option" value="com_poll" />
<input type="hidden" name="task" value="vote" />
<input type="hidden" name="id" value="14" />
<input type="hidden" name="d833143a0d618ec33f3663f5cad4a48c" value="1" />
</form>
</div>
</div>
</li>
</ol>
</div>
</li>
</ul>
<div class="drop-bot"></div>
</div>
</li>
<li class="item69" > <a class="orphan item bullet" href="/svr/jom/" > <span>
<div class="menu-image"> </div>
<div class="menu-text">
<div class="menu-maintext"> Example Menu </div>
<div class="menu-subtext"> </div>
</div>
</span> </a> </li>
<li class="item70" > <a class="orphan item bullet" href="/svr/jom/" > <span>
<div class="menu-image"> </div>
<div class="menu-text">
<div class="menu-maintext"> Example Menu </div>
<div class="menu-subtext"> </div>
</div>
</span> </a> </li>
</ul>
<div class="drop-bot"></div>
</div>
</li>
<li class="item55 root" > <a class="orphan item image subtext" href="/svr/jom/" > <span>
<div class="menu-image"> <img src="/svr/jom/templates/jompress_j15/images/icons/64x64/Help.png" alt="Help.png" /> </div>
<div class="menu-text">
<div class="menu-maintext"> Help </div>
<div class="menu-subtext"> <em>Support</em> </div>
</div>
</span> </a> </li>
</ul>
</div>
</div>
<!-- End Top Navigation -->
Here is the link to image for Menu :
Reference Image of the menu
The third argument to animate() is the easing, which you haven't added. Also, you've got a syntax error:
$span.stop().animate({'width':'335px'},'200'function(){
$this.find('.slider').slideDown();
});
should read
$span.stop().animate({'width':'335px'},'200', 'bounce', function(){
$this.find('.slider').slideDown();
});
Change 'bounce' to whatever the easing effect is that you want, and that should do it.
加载中,请稍侯......
精彩评论