CSS + jQuery 实现的超性感的下拉菜单
发布时间：2018-08-15 23:07:11 所属栏目：业界 来源：站长网
导读：早前发现了 Soh Tanaka 分享的非常 Sexy 的 Drop Down Menu w/ jQuery CSS，稍作修改实现了多级下拉，并实现了 ASP.NET 中通过输出 HTML 动态创建版本，有兴趣的同学可以包装成 Server Control。 HTML部分： Copy to Clipboard 引用的内容：[www.veryhuo.c
|
jQuery部分代码： Copy to Clipboard 引用的内容：[www.veryhuo.com]
<script type="text/javascript"> $(document).ready(function() { // Top Menu $("ul.submenu1").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.submenu1*) $("ul.topmenu li span").click(function() { //When trigger is clicked... //Following events are applied to the submenu1 itself (moving submenu1 up and down) $(this).parent().find("ul.submenu1").slideDown('fast').show(); //Drop down the submenu1 on click $(this).parent().hover(function() { }, function() { $(this).parent().find("ul.submenu1").slideUp('slow'); //When the mouse hovers out of the submenu1, move it back up }); //Following events are applied to the trigger (Hover events for the trigger) }).hover(function() { $(this).addClass("hover"); //On hover over, add class "hover" }, function() { //On Hover Out $(this).removeClass("hover"); //On hover out, remove class "hover" }); $("ul.topmenu li ul.submenu1 li").hover(function() { $(this).find("ul.submenu11:first").show("slow"); }, function() { $(this).find("ul.submenu11:first").hide("fast"); }); }); </script> 演示：http://www.veryhuo.com/a/Demo/2010/sexymenu21.html （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读