软件开发培训班 >> 编程开发 >> JavaScript

Jquery+CSS 创建流动导航菜单 Fluid Navigation

　　本文标签：Jquery,导航菜单

<html> 
<style type="text/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;} 
.firstchild { border-left:1px solid #ccc;} 
#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;} 
.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; 
} 
h1 { 
    font: 50px normal Georgia, Times New Roman, Times, serif; 
    color: #111; 
    margin: 0; 
    text-align: center; 
    padding: 5px 0; 
     
} 
h1 small{ 
    font: 0.2em normal Verdana, Arial, Helvetica, sans-serif; 
    text-transform:uppercase; 
    letter-spacing: 1.4em; 
    display: block; 
    color: #ccc; 
} 
</style> 
 
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$(#menuBar li).click(function() 
{ 
var url = $(this).find(a).attr(href); 
document.location.href = url; 
}); 
$(#menuBar li).hover(function() 
{ 
$(this).find(.menuInfo).slideDown(); 
}, 
function() 
{ 
$(this).find(.menuInfo).slideUp(); 
}); 
}); 
</script> 
<center> 
<div id="container"> 
    <h1>Fluid Navigation
CSS & jQuery <small>Tutorial by Addy Osmani</small></h1> 
     
<div id="menuBarHolder"> 
<ul id="menuBar"> 
<li class="firstchild">Home<div class="menuInfo">I am some text about the home section</div></li> 
<li>Services<div class="menuInfo">I am some text about the services section</div></li> 
<li>Clients<div class="menuInfo">I am some text about the clients section</div></li> 
<li>Portfolio<div class="menuInfo">I am some text about the portfolio section</div></li> 
<li>About<div class="menuInfo">I am some text about the about section</div></li> 
<li>Blog<div class="menuInfo">I am some text about the blog section</div></li> 
<li>Follow<div class="menuInfo">I am some text about the follow section</div></li> 
<li>Contact<div class="menuInfo">I am some text about the contact section</div></li> 
</ul> 
</div> 
</div> 
</center> 
</html>

技术文章快速查找

Javascript 更新 JavaScript 数组的 uniq 方法

javascript+iframe 实现无刷新载入整页的代码

div+css+js模拟tab切换效果事件绑定 IE,firefox兼容

如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)

js弹出div并显示遮罩层

js 数组克隆方法小结

javascript整除实现代码

js 实现无干扰阴影效果简单好用（附文件下载）

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建