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

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>

element:

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

CSS navigation bar

CSS Navigation Bar

Navigation Bar

Navigation Bar = List of Links

Example

Vertical Navigation Bar

Example

Horizontal Navigation Bar

Inline list items

Instance

Floating list items

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]