jQuery水平子导航菜单-插件特效-星河码客

这是一个简单的导航与水平子导航。在大多数情况下,我们可以用CSS实现这种效果纯粹,但自从我们去红孩子步即IE6,我们将用几行jQuery来覆盖所有。线框- HTML巢一组链接< span >标记内的包裹,这是如何定位子导航。

CSS样式,与常规的下拉菜单,子导航直接出现在徘徊/点击列表项,在这种情况下的所有子导航集将开始在同一位置(左对齐-导航下面)。ul#topnav { margin: 0; padding: 0; float: left; width: 970px; list-style: none; position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/ font-size: 1.2em; background: url(topnav_stretch.gif) repeat-x;}ul#topnav li { float: left; margin: 0; padding: 0; border-right: 1px solid #555; /*--Divider for each parent level links--*/}ul#topnav li a { padding: 10px 15px; display: block; color: #f0f0f0; text-decoration: none;}ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }现在设置< span >标记上的绝对定位35 px从顶部。我添加了一些底部圆角风格(这不会工作在IE)。ul#topnav li span { float: left; padding: 15px 0; position: absolute; left: 0; top:35px; display: none; /*--Hide by default--*/ width: 970px; background: #1376c9; color: #fff; /*--Bottom right rounded corner--*/ -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; /*--Bottom left rounded corner--*/ -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;}ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/ul#topnav li span a { display: inline; } /*--Since we d a link style on the parent list link, we will correct it back to its original state--*/ul#topnav li span a:hover {text-decoration: underline;}下面的脚本包含注释解释jQuery行动正在进行。好又简单!希望这将在你未来的项目派上用场。

jQuery水平子导航菜单

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»