jQuery bootstrap 横向导航栏
时间: 2024-09-23 12:02:17 浏览: 50
jQuery Bootstrap横向导航栏是一种基于Twitter Bootstrap框架和jQuery库创建的响应式导航菜单。Bootstrap提供了一个叫做"Navbar"的功能,用于构建网站顶部或底部的导航条。使用jQuery可以使交互更简单,比如实现菜单项的切换、折叠以及鼠标悬停时的效果。
在HTML结构上,通常会包含`<nav>`元素,其中包含`<ul class="navbar-nav">`来组织菜单项,每个菜单项是`<li><a href="#">...</a></li>`的形式。通过添加`.navbar-toggler`类给一个按钮,可以创建一个展开/收起的汉堡菜单图标,以便在小屏幕设备上显示。
例如:
```html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<!-- 更多菜单项 -->
</ul>
</div>
</nav>
```