How do I fade in/out a jQuery menu with sub menus?
Question
I am trying to make a menu that has many links and each link has its own sublist, this is what I am using
$(document).ready(function() { $(".users").bind("click", function() { $('#menu').fadeOut(); $('#sub_menu').fadeIn(); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="menu"> <a href="#"> <li>users <br /></a> </li> <a href="#"> <li>product <br /></a> </li> <a href="#"> <li>movies <br /></a> </li> <a href="#"> <li>clips <br /></a> </li> <a href="#"> <li>teaser <br /></a> </li> <a href="#"> <li>trailer <br /></a> </li> <a href="#"> <li>HDMovie <br /></a> </li> </div>
This is only for the users link to show its sublist. If i want to do the same with product, movies, and clips links do I have to copy and paste the function? Can anyone here give me a example of a function so i don't have to copy paste?
Thanks ;)
3 answers
solution1
1 2009-02-21 01:36:44
Honestly, I would use the Superfish plugin and not reinvent the wheel. Combine it with hoverIntent and it should be able to do everything you need.
solution2
0
Thanks fo replie guys, i have used this function it is working it fades out my menu and also fadesIn the sub menu but the same sub menu for every link i want sub menu2 to fadeIn when i click the next link..
Here is the link what i am doing http://umarstudio.com/test/html/screen_2b.htm
I just need the submenus to fade In for every link.. Thanks ;)
solution3
-1 2009-02-20 21:53:22
Try something like this. Also, make sure your properly ending your nested tags
<body>
<ul id="products" class="menu">
<li><a href="#">users</a>
<ul class="sub_menu'>
<li><a href="#">user 1</a></li>
<li><a href="#">user 1</a></li>
<li><a href="#">user 1</a></li>
</ul>
</li>
<li><a href="#">product</a>
<ul class="sub_menu'>
<li><a href="#">product 1</a></li>
<li><a href="#">product 1</a></li>
<li><a href="#">product 1</a></li>
</ul>
</li>
<li><a href="#">movies</a></li>
<li><a href="#">clips</a></li>
<li><a href="#">teaser</a></li>
<li><a href="#">trailer</a></li>
<li><a href="#">HDMovie</a></li>
</ul>
</body>
the script
$(document).ready(function(){
$(".menu > li > a").bind("click", function(){
$('.sub_menu').fadeOut();
$(this).parent().find('.sub_menu').fadeIn();
}
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.