Pelaksanaan menu lungsur adalah sangat mudah, dan ia juga boleh dilaksanakan dengan CSS tulen, tetapi saya tidak mahir untuk menggunakan jquery hanya memerlukan dua baris kod, jadi saya menggunakan jquery css laksanakan navigasi menu lungsur ke bawah yang mudah saya akan berkongsi dengan anda untuk rujukan anda
Pemarahan operasi:
Kod khusus:
Langkah satu: Tentukan format html navigasi
<ul id="nav"> <li><a href="#">首页</a> <ul> <li><a href="#">PHP编程</a></li> <li><a href="#">JAVA编程</a></li> <li><a href="#">RGB对照表</a></li> <li><a href="#">颜色搭配技巧</a></li> </ul> </li> <li><a href="#">栏目一</a> <ul> <li><a href="#">PHP编程</a></li> <li><a href="#">JAVA编程</a></li> <li><a href="#">RGB对照表</a></li> <li><a href="#">颜色搭配技巧</a></li> </ul> </li> <ul>
Langkah 2: CSS untuk mencapai kesan navigasi
#nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 100px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 100px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; width: 180px; position: absolute;display: none; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ display: block; width: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; }
Langkah 3: JQuery melaksanakan kesan penyembunyian lungsur turun
$(function() { $("#nav li").hover( function() { $(this).find("ul").show(100); }, function() { $(this).find("ul").hide(300); } ); });