极客笔记在Bootstrap中创建标签式和垂直标签式导航菜单
Bootstrap提供了几个选项来创建导航菜单，如标签式和垂直标签式。要在Bootstrap中创建这种类型的导航菜单，我们可以使用框架提供的内置类和组件。这有助于创建一个时尚和功能齐全的导航菜单，在所有设备上都能很好地工作。
方法1：标签式导航菜单
在这种类型的菜单中，每个标签代表网站的不同部分。标签以水平方式排列。每当单击标签时，相应的部分将显示出来。
步骤
- 加载Bootstrap的CSS和JavaScript文件。
-
添加一个带有标题“Tutorialspoint”的容器元素。
-
创建一个包含3个标签的导航菜单。
-
声明每个标签。
-
为每个标签添加一些内容。
-
加载Bootstrap的JavaScript和jQuery文件。
示例
<!DOCTYPE html>
<html>
<head>
<title>Tabbed Pill Navigation Menu Example</title>
<!-- Add Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<!-- Container for the navigation menu and content -->
<div class="container mt-4">
<!-- Page title -->
<h1>Tutorialspoint</h1>
<!-- Navigation menu with tabs as pills -->
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<!-- Home tab -->
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<!-- Profile tab -->
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<!-- Contact tab -->
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<!-- Content for each tab -->
<div class="tab-content" id="pills-tabContent">
<!-- Home tab content -->
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<!-- Profile tab content -->
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<h1>Profile</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<!-- Contact tab content -->
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<!-- Add Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
方法2: 垂直Pills导航
垂直Pills导航是一种导航菜单，其中链接垂直排列而不是水平排列。这有助于创建流畅的用户体验。
步骤
- 创建一个标题为”Tutorialspoint”的容器。
-
容器应有一行和两列。
-
第一列包含垂直导航菜单，而第二列显示所选菜单项的内容。
-
使用”nav”和”nav-pill”类创建菜单，使菜单项以类似Pills的样式垂直显示。
-
每个项都是一个带有独特”href”的锚点标签，链接到显示相应内容的”tab pane”。
-
每个菜单的内容显示在包裹在”tab content”类中的”tab pane”中。
-
JavaScript代码包括jQuery库和一些Bootstrap JavaScript插件，以使菜单工作。
示例
<!DOCTYPE html>
<html>
<head>
<title>Vertical Pill Navigation Menu</title>
<!-- Add Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Add jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Add Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Add Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
body {
background-color: #f8f9fa;
}
/* Style for nav links */
.nav-pills .nav-link {
color: #fff;
background-color: #61a4f0;
border-radius: 0;
margin: 5px 0;
font-weight: bold;
padding: 10px;
border: none;
transition: all 0.2s ease-in-out;
}
/* Style for active and hover nav links */
.nav-pills .nav-link:hover,
.nav-pills .nav-link.active {
background-color: #007bff;
color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* Remove focus outline from nav links */
.nav-pills .nav-link:focus {
box-shadow: none;
outline: none;
}
/* Style for tab content */
.tab-content {
background-color: #fff;
padding: 20px;
border-radius: 0 4px 4px 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="container">
<h1>Tutorialspoint</h1>
<div class="row">
<div class="col-md-3">
<!-- Vertical navigation pills -->
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<div class="col-md-9">
<!-- Tab content -->
<div class="tab-content" id="v-pills-tabContent">
<!-- Home tab -->
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<h3>Home</h3>
<p>Welcome to the home page!</p>
</div>
<!-- Profile tab -->
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<h3>Profile</h3>
<p>Lorem ipsum dolor.</p>
</div>
<!-- Messages tab -->
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<h3>Messages</h3>
<p>Lorem ipsum dolor.</p>
</div>
<!-- Settings tab -->
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<h3>Settings</h3>
<p>Lorem ipsum dolor.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Add Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
结论
这些类型的菜单可以提高网站的用户界面和用户体验。
一些替代实现的方法包括：
-
使用自定义CSS和JavaScript函数创建自定义菜单。
-
除了Bootstrap之外，CSS框架如Materialize和Bulma也提供类似的功能。
-
我们还可以使用一些第三方库，如jQuery UI、UIkit和Semantic UI来创建这种类型的导航菜单。