这篇文章主要介绍了jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果,涉及jquery鼠标事件及页面元素动态样式设置的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果。分享给大家供大家参考。具体如下：
这是一款核心基于jquery的多级导航菜单特效，横向向右依次展开菜单项，当然本菜单并不是完美的，因此没有怎么美化，另外包括子菜单的上级菜单中缺少一个菜单标记，这样用户有时候不知道哪个菜单中含有下级子菜单。不过添加这样一个标记似乎挺简单，你可以自己动手添加吧。
运行效果截图如下：
在线演示地址如下：
http://demo.html.cn/js/2015/jquery-right-show-menu-codes/
具体代码如下：
jquery多级下拉侧导航amazonmenu .amazonmenu ul { font: normal 12px Verdana; list-style: none; margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .amazonmenu ul li { position: static; } .amazonmenu > ul { background: white; border: 1px solid gray; border-radius: 5px; width: 200px; height: 400px; position: relative; } .amazonmenu > ul li a { color: black; display: block; overflow: auto; padding: 10px 0; position: relative; text-decoration: none; text-indent: 10px; } .amazonmenu > ul li.hassub > a::after { border: 5px solid transparent; border-left-color: gray; content: ''; height: 0; position: absolute; right: 5px; top: 35%; width: 0; } .amazonmenu > ul li.hassub.selected > a::after { border-left-color: red; } .amazonmenu ul li a:hover, .amazonmenu ul li.hassub.selected > a { background: lightblue; color: navy; } .amazonmenu ul li > div, .amazonmenu ul li > ul { background: white; border: 1px solid gray; border-radius: 0 8px 8px 0; box-shadow: 2px 2px 2px gray; display: none; font-weight: normal; width: 300px; height: 400px; left: 100%; padding: 10px; position: absolute; top: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 1000; } /* CSS Media queries */ @media screen and (max-width: 480px) { .amazonmenu ul li > div, .amazonmenu ul li > ul { left: 30px; } .amazonmenu > ul li.hassub.selected::after { background: #eee; content: ''; height: 100%; left: 0; opacity: .8; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 1; } }
希望本文所述对大家的jquery程序设计有所帮助。
以上就是jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例的详细内容，更多请关注本站其它相关文章！
