HTML和JS二級導航欄是網站中常用的交互元素之一。它可以有效地幫助用戶快速定位到想要的頁面,提高用戶體驗。
以下是一個基本的HTML和JS二級導航欄代碼實現:
HTML代碼:
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">首頁</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">產品</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li class="dropdown-item"><a href="#">產品介紹</a></li>
<li class="dropdown-item"><a href="#">在線購買</a></li>
<li class="dropdown-item"><a href="#">客戶服務</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">關于我們</a>
</li>
</ul>
</nav>JS代碼:
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Bootstrap.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.dropdown-toggle').dropdown();
});
</script>
以上代碼中,使用了Bootstrap框架的導航欄組件。其中,`class="dropdown-toggle"`表示有下拉菜單,`data-toggle="dropdown"`表示點擊后打開下拉菜單,`aria-haspopup="true/ false"`和`aria-expanded="true/false"`表示下拉菜單狀態的屬性。
在JS部分,通過jQuery實現了鼠標點擊時下拉菜單的展開和收起操作。其中,`$('.dropdown-toggle').dropdown();`表示選取`class`為`dropdown-toggle`的元素,并將其轉化為下拉菜單。上一篇css3遮陰影
下一篇html 登入界面源代碼