这篇文章主要介绍了JS+CSS实现的经典圆角下拉菜单效果代码,可实现非常经典的圆角下拉菜单效果,涉及JavaScript动态操作页面元素css样式的相关技巧,需要的朋友可以参考下
本文实例讲述了JS+CSS实现的圆角下拉菜单效果代码。分享给大家供大家参考，具体如下：
相信不少朋友会喜欢这一款菜单，CSS+JS实现的圆角下拉菜单，没有使用任何修饰性的图片哦，圆角完全是用JS完成的，因此代码多了些，想使用的朋友把JS文件提取出来另存，这样更合理些。
运行效果截图如下：
在线演示地址如下：
http://demo.html.cn/js/2015/js-css-jd-cicle-style-button-demo/
具体代码如下：
QuickMenu 超强悍菜单 .qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc .qmcbox{cursor:default;display:block;position:relative;z-index:1;}.qmmc .qmcbox a{display:inline;}.qmmc .qmcbox div{float:none;position:static;visibility:inherit;left:auto;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none;}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;} #qm0 { padding:5px; border-width:1px; border-style:solid; border-color:#eeeeee; } #qm0 a { padding:5px 4px 5px 5px; color:#555555; font-family:Arial; font-size:10px; text-decoration:none; } #qm0 div, #qm0 ul { padding:10px; margin:-2px 0px 0px; background-color:transparent; border-style:none; } #qm0 div a, #qm0 ul a { padding:3px 10px 3px 5px; background-color:transparent; font-size:11px; border-width:0px; border-style:none; } #qm0 div a:hover { background-color:#dadada; color:#cc0000; } #qm0 ul li:hover>a { background-color:#dadada; color:#cc0000; } body #qm0 div .qmactive, body #qm0 div .qmactive:hover { background-color:#dadada; color:#cc0000; } #qm0 .qmtitle { cursor:default; padding:3px 0px 3px 4px; color:#444444; font-family:arial; font-size:11px; font-weight:bold; } #qm0 .qmdividerx { border-top-width:1px; margin:4px 0px; border-color:#bfbfbf; } #qm0 .qmdividery { border-left-width:1px; height:15px; margin:4px 2px 0px; border-color:#aaaaaa; } #qm0 .qmritem span { border-color:#dadada; background-color:#f7f7f7; } #qm0 .qmritemcontent { padding:0px 0px 0px 4px; } ul#qm0 li:hover > a { background-color:#f7f7f7; } ul#qm0 ul { padding:10px; margin:-2px 0px 0px; background-color:#f7f7f7; border-width:1px; border-style:solid; border-color:#dadada; } .qmfv{visibility:visible !important;}.qmfh{visibility:hidden !important;}Warning! QuickMenu may have been blocked by IE-SP2's active content option. This browser feature blocks JavaScript from running locally on your computer.
This warning will not display once the menu is on-line. To enable the menu locally, click the yellow bar above, and select "Allow Blocked Content".
To permanently enable active content locally...
1: Select 'Tools' --> 'Internet Options' from the IE menu.
2: Click the 'Advanced' tab.
3: Check the 2nd option under 'Security' in the tree (Allow active content to run in files on my computer.)[+] Open Visual Interface
- SOLUTIONS
- Industries
- Education
- Solutions
- Digital Imaging
- Web Publishing
- All Industries and Solutions
- 脚本下载
- 脚本之家
- Ajax
- ASP
- PHP
- ASP.NET
- SUPPORT
- Support Home
- Customer Service
- Updates
- More
- 网页特效
- CSS菜单
- 层和布局
- 漂亮按钮
- 图片特效
- COMPANY
- About Adobe
- Press
- Corporate Affairs
- More
希望本文所述对大家JavaScript程序设计有所帮助。
以上就是JS+CSS实现的经典圆角下拉菜单效果代码的详细内容，更多请关注本站其它相关文章！