流式導航選單
阿新 • • 發佈：2018-12-19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.4.1.js" ></script>
</head>
<script type="text/javascript">
$(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>
<style>
#menuBar{
width: 730px;
height: 45px;
background: #000;
color: #fff;
font-family: arial;
font-size: 14px;
margin-top: 20px;
}
#menuBarHolder{
list-style-type: none;
display: block;
}
.firstchild{
border-left: 1px solid #ccc;
}
#container{
margin-top: 10px;
}
#menuBar li{
float: left;
padding: 15px;
height: 16px;
width: 75px;
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: -10px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-radius-bottomright:5px;
-khtml-border-radius-bottomleft:5px;
}
h1{
font: 50px normal georgia,"times new roman",times,serif;
color: #111;
margin: 0;
text-align: 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>
<body>
<center>
<div id="container">
<h1>流式導航選單<br></h1>
<div id="menuBarHolder">
<ul id="menuBar">
<li class="firstchild">
<a href="JavaScript:#">首頁</a>
<div class="menuInfo">這是首頁的連結</div>
</li>
<li>
<a href="JavaScript:#">公司簡介</a>
<div class="menuInfo">公司成立於2005年...</div>
</li>
<li>
<a href="JavaScript:#">公司產品</a>
<div class="menuInfo">為有志進入IT行業的人提供優質服務</div>
</li>
<li>
<a href="JavaScript:#">個性化服務</a>
<div class="menuInfo">提供個性化的，對學習與幫助</div>
</li>
<li>
<a href="JavaScript:#">關於</a>
<div class="menuInfo">版權所有</div>
</li>
<li>
<a href="JavaScript:#">聯絡我們</a>
<div class="menuInfo">來吧，加入我們吧</div>
</li>
</ul>
</div>
</div>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.4.1.js" ></script>
</head>
<script type="text/javascript">
$(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>
<style>
#menuBar{
width: 730px;
height: 45px;
background: #000;
color: #fff;
font-family: arial;
font-size: 14px;
margin-top: 20px;
}
#menuBarHolder{
list-style-type: none;
display: block;
}
.firstchild{
border-left: 1px solid #ccc;
}
#container{
margin-top: 10px;
}
#menuBar li{
float: left;
padding: 15px;
height: 16px;
width: 75px;
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: -10px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-radius-bottomright:5px;
-khtml-border-radius-bottomleft:5px;
}
h1{
font: 50px normal georgia,"times new roman",times,serif;
color: #111;
margin: 0;
text-align: 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>
<body>
<center>
<div id="container">
<h1>流式導航選單<br></h1>
<div id="menuBarHolder">
<ul id="menuBar">
<li class="firstchild">
<a href="JavaScript:#">首頁</a>
<div class="menuInfo">這是首頁的連結</div>
</li>
<li>
<a href="JavaScript:#">公司簡介</a>
<div class="menuInfo">公司成立於2005年...</div>
</li>
<li>
<a href="JavaScript:#">公司產品</a>
<div class="menuInfo">為有志進入IT行業的人提供優質服務</div>
</li>
<li>
<a href="JavaScript:#">個性化服務</a>
<div class="menuInfo">提供個性化的，對學習與幫助</div>
</li>
<li>
<a href="JavaScript:#">關於</a>
<div class="menuInfo">版權所有</div>
</li>
<li>
<a href="JavaScript:#">聯絡我們</a>
<div class="menuInfo">來吧，加入我們吧</div>
</li>
</ul>
</div>
</div>
</center>
</body>
</html>