CSS Navigation Bar
Navigation Bar
Proficient use of the navigation bar is very important for any website.
Using CSS you can transform into a beautiful navigation bar instead of a boring HTML menu.
Navigation Bar = List of Links
As standard HTML a navigation bar is required
In our example we will Create a standard HTML list navigation bar.
The navigation bar is basically a list of links, so using the <ul> and <li> elements makes a lot of sense:
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p>注意:我们用 href="#"作为测试连接.用在一个真正的web站点的url。</p> </body> </html>
Now, let’s remove the margin and padding from the list:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>Example analysis:
- list-style-type:none - Remove the small mark in front of the list. A navigation bar does not require list markup
- Remove the browser's default settings and set margins and padding to 0
The code in the above example is for vertical and horizontal navigation bars Standard code used.
Vertical Navigation Bar
In the above code, we only need the style of the <a> element to create a vertical navigation bar:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>Example description:
- display:block - Display block elements The link makes the entire link area clickable (not just the text), which allows us to specify the width
- width:60px - the maximum width for block elements by default. We need to specify a width of 60 pixels
Note: Please be sure to specify the width of the element in the vertical navigation bar.
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Use inline or floating for list items.
Both methods are fine, but if you want links to have the same size, you have to use the float method.
Inline list items
One of the ways to create a horizontal navigation bar is to specify the
element. The above code is a standard internal Inline:Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>Instance parsing:
- display:inline; - By default, # The ## element is a block element. Here we remove the newlines before and after each list item to display a single line.
Floating list items
In the above example the links have different widths. For all links to have equal width, float the <li> element and specify the width of the <a>Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
</body>
</html>
Example analysis:
- float:left - Slides using floating block elements are adjacent to each other
- display:block - Display links to block elements, making the whole visible On click of the link area (not just the text), it allows us to specify the width
- width:60px - the maximum width for block elements by default. We want to specify a width of 60 pixels
