1
J'ai un menu basé sur CSS et je veux ajouter un effet de glissement vers le bas (easeOutBounce). Voici mon script, HTML et une image pour référence. Je veux ajouter cet effet assouplissement à une classe CSS nommée ".fusion-submenu-wrapper"Ajouter jQuery à un menu déroulant CSS
Je chargeais jquery-1.4.2.min.js & jquery.easing.1.3.min.js dans mon modèle. Le titre du menu est animé mais l'effet d'accélération n'est pas appliqué au menu déroulant.
Veuillez aider
// 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');
});
});
});
Voici le code 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>
<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 -->
Voici le lien vers l'image pour accéder au Menu:
Probablement conseillé d'afficher le HTML en question aussi. – Orbling
Hey merci d'avoir répondu, s'il vous plaît voir la nouvelle version éditée avec HTML, Javascript et un lien vers l'image de référence. –