这篇文章主要介绍了jquery实现可横向和竖向展开的动态下滑菜单效果,以实例形式较为详细的分析了jquery实现横向与竖向展开菜单的相关技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了jquery实现可横向和竖向展开的动态下滑菜单效果。分享给大家供大家参考。具体如下：
这里演示了两个下拉导航菜单的效果，用jquery.easing.1.3.js和jquery.naviDropDown.1.0.js以及jquery.hoverIntent.minified.js共同实现，最新的jquery版本也可以引入，在演示页面中，分别有横向水平向下滑出的下拉菜单，还有纵向垂直布局向右滑出的导航菜单，根据你的需要选择使用。
运行效果截图如下：
在线演示地址如下：
http://demo.html.cn/js/2015/jquery-right-down-show-nav-menu-codes/
具体代码如下：
jQuery纵向横向动态下拉导航菜单 * {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; line-height:16px} .container {margin:10px auto; width:950px; height:300px; background:#eee; padding:50px 0 0 0} #navigation_horiz {width:820px; clear:both; padding:0 0 0 0; margin:0 auto} #navigation_horiz ul {height:50px; display:block} #navigation_horiz ul li {display:block; float:left; width:200px; height:50px; background:#999; margin:0 1px 0 0; position:relative} #navigation_horiz ul li a.navlink {display:block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none} #navigation_horiz .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px} #navigation_vert {width:820px; clear:both; padding:0 0 0 0; margin:0 auto} #navigation_vert ul {height:50px; display:block} #navigation_vert ul li {display:block; width:200px; height:50px; background:#999; margin:0 0 1px 0; position:relative} #navigation_vert ul li a.navlink {display:block; *display:inline-block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none} #navigation_vert .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topright:10px} #navigation_horiz ul li #dropdown_one {background:#ccc; color:#fff} #navigation_horiz ul li #dropdown_one a {color:red} #navigation_horiz ul li #dropdown_two {background:#ccc; color:#fff} #navigation_horiz ul li #dropdown_two a {color:black} #navigation_horiz ul li #dropdown_three {background:#ccc; color:#fff} #navigation_horiz ul li #dropdown_three a {color:gray} #navigation_vert ul li #dropdown_four {background:#333; color:#fff} #navigation_vert ul li #dropdown_four a {color:red} #navigation_vert ul li #dropdown_five {background:#666; color:#fff} #navigation_vert ul li #dropdown_five a {color:black} #navigation_vert ul li #dropdown_six {background:#777; color:#fff} #navigation_vert ul li #dropdown_six a {color:orange}
- List Item
This is a Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod.
- List Item
This is a Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod.
- List Item
- List Item
This is a Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod.
- List Item
This is a Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod.
- List Item
This is a Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod.
- List Item
- List Item
This is a Link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod.
希望本文所述对大家的jquery程序设计有所帮助。
以上就是jquery实现可横向和竖向展开的动态下滑菜单效果的详细内容，更多请关注本站其它相关文章！
