<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,半透明菜单,顶部菜单,置顶菜单,滑出式菜单,jQuery,css3,脚本之家,sharejs.com" />
<meta name="description" content="css3+jQuery实现的顶部半透明滑出式菜单效果，更多半透明菜单,顶部菜单,sharejs.com,置顶菜单,滑出式菜单,jQuery,css3请访问脚本之家JS代码频道。" />
<title>css3+jQuery实现的顶部半透明滑出式菜单效果_脚本之家</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function () {
if($.browser.msie){
$('.menu_wrap').css({'background-color' : '#b8e1fc','position' : 'absolute','width' : '100%'});
}
$('.menu_wrap').css({'opacity' : '0.3'});
$('.menu_wrap').hover ( function () {
$(this).animate({'margin-top' : '0px','opacity' : '1'});
$('.menu_buttons img').animate({'opacity' : '.5'});
}, function () {
$(this).animate({'margin-top' : '-30px','opacity' : '0.3'});
});
// http://www.sharejs.com
$('.menu_buttons img').hover ( function () {
$(this).animate({'opacity' : '1'});
}, function () {
$(this).animate({'opacity' : '0.5'});
});
});
</script>
<style>
body {
background-image: url(http://www.bitsntuts.com/demos/jquery-website/images/bg.jpg);
background-repeat: repeat;
}
/* http://www.sharejs.com */
.menu_wrap {
left: 0px;
top: 0px;
right: 0px;
z-index: 999;
width: 100%;
height: 50px;
background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* webkit */
-webkit-box-shadow: 0px 2px 5px #000000;
-moz-box-shadow: 0px 2px 5px #000000;
box-shadow: 0px 2px 5px #000000;
position: fixed;
margin-top:-30px;
}
.menu_links ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menu_links ul li {
display: inline;
}
.menu_links ul li a {
float:left;
line-height: 50px;
padding-right: 20px;
padding-left: 20px;
color: #FFF;
font-size: 22px;
text-decoration: none;
text-shadow: -1px -1px 1px #333;
display: block;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFF;
}
.menu_links ul li a:hover {
color: #000;
text-shadow: -1px -1px 1px #EEE;
background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* webkit */
}
.menu_buttons {
float:right;
line-height: 50px;
height: 50px;
margin-right: 30px;
}
.menu_buttons ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menu_buttons ul li {
display: inline;
height: 50px;
}
.menu_buttons ul li a {
float:left;
padding-right: 10px;
display: block;
border:none;
line-height: 50px;
padding-left: 10px;
height: 50px;
padding-top: 10px;
}
.first {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFF;
}
.menu_links {
height: 50px;
float: left;
margin-left: 100px;
}
.content {
height: 400px;
width: 600px;
margin-top: 100px;
margin-right: auto;
margin-left: auto;
background-color: #666;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-align: center;
color: #FFF;
padding: 20px;
border: 5px solid #333;
}
</style>
</head>
<body>
<div class="menu_wrap">
<div class="menu_links">
<ul>
<li><a class="first" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="http://www.jb51.net">Links</a></li>
</ul>
</div>
<div class="menu_buttons">
<ul>
<li><a class="first" href="#"><img src="facebook.png" alt="Facebook" width="32" height="32" border="0"></a></li>
<li><a href="#"><img src="twitter.png" alt="Twitter" width="32" height="32" border="0"></a></li>
<li><a href="#"><img src="delicious.png" alt="Delicious" width="32" height="32" border="0"></a></li>
<li><a href="#"><img src="rss.png" alt="RSS" width="32" height="32" border="0"></a></li>
</ul>
</div>
</div>
<div class="content">
<h1>Bits 'n Tuts - CSS / jQuery Navigation Bar</h1>
</div>
<div style="text-align:center;clear:both">
<p>来源：<a href="http://www.jb51.net" target="_blank">bitsntuts</a> 代码整理：<a href="http://www.jb51.net" target="_blank">脚本之家</a> 感谢：<a href="http://www.jb51.net" target="_blank">liuqiu</a></p>
<p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>
css3+jQuery实现的鼠标悬停时顶部半透明滑出式菜单效果.zip
版权申诉
140 浏览量
2022-10-31
02:05:18
上传
评论
收藏 21KB ZIP 举报
css3+jQuery实现的鼠标悬停时顶部半透明滑出式菜单效果.zip （6个子文件） 
132687037213779337 
rss.png 1KB delicious.png 856B twitter.png 1KB
index.html 5KB facebook.png 865B
bg.jpg 14KB资源评论
