代码如下

那么我们应当怎么兑现流动导航菜单呢?豆蔻梢头、效果图鼠标滑过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

UI LI成分:列表成分。 DIV成分:提醒内容音讯。 3、Javascript代码 复制代码 代码如下: $.ready { $.click { var url
= $.attr; document.location.href = url; }State of Qatar; $.hover.find.slideDown {
$.find.slideUp、 hover(卡塔尔:给Li成分绑定单击事件和鼠标滑过事件。
find(卡塔尔函数:寻找全数与钦点表明式相配的要素。那一个函数是寻觅正在管理的成分的遺家族成分的好办法。
slideDown:通过中度变化来动态地展现全数相称的要素,在显示成功后可选地触发二个回调函数。
slideUp:通过高度变化来动态地躲藏全体相配的因素,在隐蔽完毕后可选地触发三个回调函数。

发表评论

电子邮件地址不会被公开。 必填项已用*标注