bob体育官方平台
Jquery+CSS 创建流动导航菜单 Fluid Navigation_jquery_脚本之家

athis is section a bthis is section b cthis is section c dthis is section d

那么我们应该如何实现流动导航菜单呢?一、效果图

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

鼠标滑过Menu,即Show提示信息。 二、实现步骤 1、CSS代码 复制代码 代码如下: menuBarHolder { width: 730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;} #menuBarHolder ul{ list-style-type:none; display:block;} #container { margin-top:100px;} #menuBar li{ float:left; padding:15px; height:16px; width:50px; border-right:1px solid #ccc; } #menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;} .menuHover { background-color:#999;} .firstchild { border-left:1px solid #ccc;} .menuInfo { cursor:hand; background-color:#000; color:#fff; width:74px; font-size:11px;height:100px; padding:3px; display:none; position:absolute; margin-left:-15px; margin-top:-15px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -khtml-border-radius-bottomright: 5px; -khtml-border-radius-bottomleft: 5px; border-radius-bottomright: 5px; border-radius-bottomleft: 5px; } menuBarHolder: 菜单Menu的固定容器,宽度=730px。 menuInfo:控制提示信息的展示与否。 2、HTML代码 复制代码 代码如下:

  • Home I am some text about the home section

  • Services I am some text about the services section

  • Clients I am some text about the clients section

  • Portfolio I am some text about the portfolio section

  • About I am some text about the about section

  • Blog I am some text about the blog section

  • Follow I am some text about the follow section

  • Contact I am some text about the contact section

上一篇:没有了 下一篇:做十三星座的朋友需持有何样?
返回顶部