Css 简明教程
CSS - Navigation Bar
Navigation bar 是图形用户界面 (GUI) 中的一个部分，可帮助用户浏览网站、应用程序或其他软件。用户可以快速轻松地导航到他们正在寻找的内容，这一点至关重要。
Navigation bar is a section of a graphical user interface (GUI) that helps users navigate through a website, app, or other software. It is essential for users to quickly and easily navigate to the content they are looking for.
导航栏可以是水平的或垂直的，其中包含指向重要页面或功能的链接。
The navigation bar can be horizontal or vertical, that contains links to important pages or features.
How to Design a Responsive Navbar?
以下是设计 CSS 导航栏的常见步骤：
Following are common steps followed to design a navbar in CSS:
-
HTML Structure: Use anchor tag ( <a> ) inside unordered list ( <ul> ) to obtain structure of navbar.
-
*Remove Default Styles: * Use the property 'list-style-type: none' to remove default styling and label of unordered list.
-
Flex Layout: Use the property display: flex for ul element and set flex-direction as row or column depending upon horizontal or vertical flexbox needed.
-
Responsive Design: Use CSS media queries to change between horizontal and vertical layout of navbar depending upon user screen width.
-
*Hamburger Menu: *Create a hamburger menu icon that toggles the visibility of the list on smaller screens.
导航栏还可以包含其他元素，例如网站或应用程序的徽标、搜索栏或社交媒体图标。可以使用 CSS 为导航栏设置样式以更改其外观。
Navbars can also contain other elements, such as the logo of the website or app, search bar, or social media icons. Navbars can be styled using CSS to change their appearance.
CSS Horizontal Navbar
以下示例显示了一个水平导航栏，这是在网页顶部显示的最常见的导航栏类型，如下所示：
Following example shows a horizontal navigation bar, which is the most common type of navigation bar displayed across the top of a web page as shown below
Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
color: #4CAF50;
}
ul {
background-color: #333;
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: row;
}
li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 18px;
transition: background-color 0.3s, color 0.3s;
}
li a:hover {
background-color: #575757;
color: #ffffff;
}
.active-link {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<ul>
<li class="active-link">
<a href="#" >Tutorialspoint</a>
</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Articles</a>
</li>
<li>
<a href="#">Courses</a>
</li>
</ul>
<h1> Welcome to TutorialsPoint </h1>
<h3> Simple Easy Learning at your fingertips </h3>
</body>
</html>CSS Vertical Navbar
垂直导航栏也称为侧边栏菜单。通常位于屏幕的左侧或右侧。
A vertical navigation bar is also known as a sidebar menu. It is typically positioned on the left or right side of the screen.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
color: #4CAF50;
display: flex;
flex-direction: row;
gap: 10px;
}
ul {
background-color: #333;
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 18px;
transition: background-color 0.3s, color 0.3s;
}
li a:hover {
background-color: #575757;
color: #ffffff;
}
.active-link {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<ul>
<li class="active-link">
<a href="#" >Tutorialspoint</a>
</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Articles</a>
</li>
<li>
<a href="#">Courses</a>
</li>
</ul>
<div>
<h1> Welcome to TutorialsPoint </h1>
<h3> Simple Easy Learning at your fingertips </h3>
</div>
</body>
</html>CSS Dropdown Navbar
下拉导航栏是一个带有下拉菜单的导航栏，当用户将鼠标悬停在链接上时出现。下拉菜单是一种在狭小空间中显示相关项目列表的方法。
A dropdown navbar is a navigation bar with a drop-down menu that appears when a user hovers over a link. Dropdown menus are a way to show a list of related items in a small space.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
background-color: #2c3e50;
overflow: hidden;
}
.navbar a {
display: block;
float: left;
color: #ecf0f1;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 16px;
transition: background-color 0.3s, color 0.3s;
}
.navbar a:hover {
background-color: #34495e;
color: #ecf0f1;
}
.active-link {
background-color: #4CAF50;
color: white;
}
.dropdown {
float: left;
}
.dropdown .dropbtn {
border: none;
color: #ecf0f1;
padding: 14px 20px;
background-color: #2c3e50;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.dropdown .dropbtn:hover {
background-color: #4CAF50;
color: #ecf0f1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #34495e;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: #ecf0f1;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
transition: background-color 0.3s, color 0.3s;
}
.dropdown-content a:hover {
background-color: #4CAF50;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<nav class="navbar">
<a href="#" class="active-link">Tutorialspoint</a>
<a href="#">Home</a>
<div class="dropdown">
<button class="dropbtn">Articles
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">Bootstrap</a>
</div>
</div>
<a href="#">Courses</a>
</nav>
<h1> Welcome to TutorialsPoint </h1>
<h3> Simple Easy Learning at your fingertips </h3>
</body>
</html>CSS Fixed Navbar
固定导航栏是一个导航栏，当用户向下滚动页面时会粘贴在屏幕顶部。要固定导航栏，可以使用 * position: fixed* 属性。
A fixed navbar is a navigation bar that sticks to the top of the screen when the user scrolls down the page. To make a navbar fixed, you can use the position: fixed property.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
height: 2000px;
background-color: #e6e451;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2c3e50;
}
.navbar a {
display: block;
float: left;
color: #ecf0f1;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 17px;
transition: background-color 0.3s, color 0.3s;
}
.navbar a:hover {
background-color: #34495e;
color: #ecf0f1;
}
.active-link {
background-color: #4CAF50;
color: white;
}
.heading {
padding-top: 70px;
text-align: center;
background-color: #e6e451;
padding-bottom: 300px;
}
</style>
</head>
<body>
<nav class="navbar">
<a href="#" class="active-link">
Tutorialspoint
</a>
<a href="#">Home</a>
<a href="#">Articles</a>
<a href="#">Courses</a>
</nav>
<div class="heading">
<h1> Welcome to TutorialsPoint </h1>
<h2> Tutorialspoint CSS Fixed Navbar </h2>
<h3>Scrolldown....</h3>
</div>
</body>
</html>Divider Lines for Navbar
还可以使用 * border-right* 属性在导航栏中的链接之间添加分隔线，如下所示：
You can also add a divider line between the links in the navbar using the border-right property as shown below
Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
color: #4CAF50;
}
ul {
background-color: #333;
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
display: flex;
flex-direction: row;
}
li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 18px;
border-right: 5px solid green;
transition: background-color 0.3s, color 0.3s;
}
li a:hover {
background-color: #575757;
color: #ffffff;
}
.active-link {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<ul>
<li class="active-link">
<a href="#" >Tutorialspoint</a>
</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Articles</a>
</li>
<li>
<a href="#">Courses</a>
</li>
</ul>
<h1> Welcome to TutorialsPoint </h1>
<h3> Simple Easy Learning at your fingertips </h3>
</body>
</html>Fixed Vertical Navbar
以下示例演示如何使用 * position: fixed* 属性创建固定的垂直导航栏，确保导航栏停留在屏幕左侧，即使用户向下滚动页面也如此。
The following example demonstrates how the position: fixed property can be used to create a fixed vertical navbar, which ensures that the navbar stays on the left side of the screen, even when the user scrolls down the page.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div{
height: 1000px;
margin-left: 35%;
}
ul {
background-color: #333;
overflow: hidden;
list-style-type: none;
position: fixed;
width: 30%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 18px;
transition: background-color 0.3s, color 0.3s;
}
li a:hover {
background-color: #575757;
color: #ffffff;
}
.active-link {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<ul>
<li class="active-link">
<a href="#" >Tutorialspoint</a>
</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Articles</a>
</li>
<li>
<a href="#">Courses</a>
</li>
</ul>
<div>
<h1> Welcome to TutorialsPoint </h1>
<h3> Simple Easy Learning at your fingertips </h3>
</div>
</body>
</html>