cari

Rumah >hujung hadapan web >tutorial js >jQuery melaksanakan kesan menu lungsur sekunder standard gaya kelabu-biru code_jquery

jQuery melaksanakan kesan menu lungsur sekunder standard gaya kelabu-biru code_jquery

WBOY
WBOYasal
2016-05-16 15:41:211255semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan jQuery kod kesan menu lungsur sekunder standard gaya kelabu-biru. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu kedua standard berdasarkan jQuery Ia adalah menu lungsur gaya kelabu-biru yang cantik Kod ini telah diperbetulkan dengan sempurna. Anda tidak perlu mengubahnya . Hanya salin kod itu sedia untuk digunakan.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-blue-color-style-nav-menu-codes/

Kod khusus adalah seperti berikut: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery标准型二级菜单</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style type="text/css">
body
{
 margin:0; padding:0; font-size:12px;
}
a:link {
 color:#1553a9; text-decoration: none;
}
a:visited {
 text-decoration:none; color: #1553a9;
}
a:hover {
 text-decoration:none; color: #f46662;
}
a:active {
 text-decoration: none; color:#f46662;
}
#main
{
 width:910px; margin:0 auto; 
}
#menu
{
 margin-top:20px; position:absolute;
}
.m1
{
float:left; width:100px; text-align:center; color:#3a3a3a; background-color:#bcbcbc; border:#9a9b9b 1px solid; border-right:0; padding:10px; padding-top:13px; cursor:pointer;
}
.m1:hover
{
 background-color:#2c85e0; color:White;
}
.m2
{
  position:absolute; margin-top:39px; width:120px; background-color:#e4e4e4;border:#cdcece 1px solid;color:#666666; display:none;
}
.m2 table
{
 width:100%; line-height:35px;
}
.m2 table tr td
{
 text-align:center; border-top:#b4b4b4 1px dotted; cursor:pointer;
}
</style>
<script type="text/javascript">
$(function(){
$(".m1").mouseover(function(){
 $(this).parent().next(".m2").fadeIn();
}).mouseout(function(){
 $(this).parent().next(".m2").css("display","none");
});
$(".m2").mouseover(function(){
 $(this).css("display","block");
 $(this).prev().children().css("background-color","#2c85e0").css("color","White");;
}).mouseout(function(){
 $(this).css("display","none");
 $(this).prev().children().css("background-color","#bcbcbc").css("color","#3a3a3a");
});
});
</script>
</head>
<body>
<div id="main">
<div id="menu">
<a href="#" target="_blank"><span class="m1">论坛首页</span></a> 
<a href="#" target="_blank"><span class="m1">学生工作</span></a>
 <div class="m2" style="left:121px;"><table>
  <tr><td style="border:0"><a href="#" target="_blank">学院首页</a></td></tr>
  <tr><td><a href="#" target="_blank">学院首页</a></td></tr>
  <tr><td><a href="#" target="_blank">学院首页</a></td></tr>
 </table></div> 
<a href="#" target="_blank"><span class="m1">师资队伍</span></a>
 <div class="m2" style="left:242px;"><table>
  <tr><td style="border:0"><a href="#" target="_blank">学院首页</a></td></tr>
  <tr><td><a href="#" target="_blank">学院首页</a></td></tr>
  <tr><td><a href="#" target="_blank">学院首页</a></td></tr>
 </table></div>
<a href="#" target="_blank"><span class="m1">学科专业</span></a>
 <div class="m2" style="left:363px;"><table>
  <tr><td style="border:0"><a href="#" target="_blank">本科专业</a></td></tr>
  <tr><td><a href="#" target="_blank">硕士专业</a></td></tr>
  <tr><td><a href="#" target="_blank">博士专业</a></td></tr>
 </table></div> 
<a href="#" target="_blank"><span class="m1">教学改革</span></a>
 <div class="m2" style="left:484px;"><table>
  <tr><td style="border:0"><a href="#" target="_blank">教学体制</a></td></tr>
  <tr><td><a href="#" target="_blank">学院首页</a></td></tr>
  <tr><td><a href="#" target="_blank">科研教学</a></td></tr>
 </table></div> 
<a href="#" target="_blank"><span class="m1">党建工作</span></a>
 <div class="m2" style="left:605px;"><table>
  <tr><td style="border:0"><a href="#" target="_blank">学生党建</a></td></tr>
  <tr><td><a href="#" target="_blank">学院党建</a></td></tr>
 </table></div> 
<a href="#" target="_blank"><span class="m1">联系我们</span></a> 
  <div class="m2" style="left:725px;"><table>
  <tr><td style="border:0"><a href="#" target="_blank">老师电话</a></td></tr>
  <tr><td><a href="#" target="_blank">领导传真</a></td></tr>
  <tr><td><a href="#" target="_blank">学校地址</a></td></tr>
  <tr><td><a href="#" target="_blank">卫星地图</a></td></tr>
 </table></div>
</div>
</div>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Ringkasan teg JavaScript biasa dan kemahiran kaedah_javascriptArtikel seterusnya：Ringkasan teg JavaScript biasa dan kemahiran kaedah_javascript

Artikel berkaitan

Lihat lagi