Making an easy site navigation bar is a field in which CSS truly exhibits its unique capabilities. The old way to make navigation bars tends to rely on a large number of pictures, nested tables, and JavaScript scripts-all of which can seriously affect the usability and accessibility of your site. If your site cannot be navigated to on a device that does not support JavaScript, you not only prevent users from shutting down JavaScript, but you also block only text-enabled devices, such as screen readers that have already been on the search engine's Android program – They will never be able to get the index of the site content from your home page. Even if your customers don't care about accessibility, tell them bulky menus prevent them from getting a decent search engine rankings!
CSS allows you to create attractive navigation bar, the advantage of using CSS is not only that it is very beautiful in appearance, in fact it is still text-is a special method annotated text, It allows all those who physically can't see your design but want your content to have access to your site without obstacles and easy to understand. In this article, we'll look at a variety of CSS -based navigation bar solutions. Some of these are suitable for existing sites to enable these sites to be more quickly guided, and to promote accessibility by replacing traditional, text-based navigation bars. Others are more suitable for integration into a purely CSS site layout.
How do I format a structured list as a navigation bar menu?
For newly designed sites, you may try to avoid using tables for layout, or use tables only where they are absolutely necessary. Therefore, a navigation bar solution that does not involve a table is useful, and by eliminating the use of table elements, you will find that your page will contain fewer markup symbols.
Solution
The navigation bar system is a list of locations that users can access at this site. Therefore, an unordered list is the ideal way to mark your navigation bar. As you can see, the implementation of the navigation bar in Figure 1 is a list with CSS styling.
Figure 1: The navigation bar <! the stylesheet list DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en""Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<title>lists as Navigation</title>
<meta http-equiv= "Content-type"
Content= "text/html; Charset=utf-8 "/>
<link rel= "stylesheet" type= "Text/css" href= "Listnav1.css"/>
<body>
<div id= "Navigation" >
<ul>
<li><a href= "#" >Recipes</a></li>
<li><a href= "#" >contact us</a></li>
<li><a href= "#" >Articles</a></li>
<li><a href= "#" >buy online</a></li>
</ul>
</div>
</body>
#navigation {
width:200px;
}
#navigation ul {
List-style:none;
margin:0;
padding:0;
}
#navigation Li {
border-bottom:1px solid #ED9F9F;
}
#navigation li A:link, #navigation li a:visited {
font-size:90%;
Display:block;
Padding:0.4em 0 0.4em 0.5em;
border-left:12px solid #711515;
border-right:1px solid #711515;
Background-color: #B51032;
Color: #FFFFFF;
Text-decoration:none;
}
Discuss
To create a navigation bar based on unordered lists, first set up your list and put each navigation link into the LI element, as follows:
<ul>
<li><a href= "#" >Recipes</a></li>
<li><a href= "#" >contact us</a></li>
<li><a href= "#" >Articles</a></li>
<li><a href= "#" >buy online</a></li>
</ul>
Next, select a suitable ID to include the list in a div:
<div id= "Navigation" >
<ul>
<li><a href= "#" >Recipes</a></li>
<li><a href= "#" >contact us</a></li>
<li><a href= "#" >Articles</a></li>
<li><a href= "#" >buy online</a></li>
</ul>
</div>
As you can see in Figure 2 below, this tag looks pretty common underneath the default style of the browser.
Figure 2: No styling base list
The first thing we need to do is to style the containers that exist in the navigation bar – here is the #navigation:
#navigation {
width:200px;
}
Here I simply gave the #navigation a width. If the navigation system is part of the CSS page layout, I might also add some location information to this ID.
Below, we style the list:
#navigation ul {
List-style:none;
margin:0;
padding:0;
}
As shown in Figure 3, the above rule removes the preceding symbol and indentation that appear when the browser displays a list in the default state.
Figure 3 Removing the list of indents and preceding characters
The next step is to use #navigation to style the LI elements and give them a bottom:
#navigation Li {
border-bottom:1px solid #ED9F9F;
}
Finally, we style link:
#navigation li A:link, #navigation li a:visited {
font-size:90%;
Display:block;
Padding:0.4em 0 0.4em 0.5em;
border-left:12px solid #711515;
border-right:1px solid #711515;
Background-color: #B51032;
Color: #FFFFFF;
Text-decoration:none;
}
Most of the work has been done. The CSS rules we've created include adding the left and right edges, removing underscores, and so on. The first property definition in this rule sets the display property to block , which makes those links appear as blocks, so that when you move the cursor across the navigation buttons, the effect is exactly the same as using the picture navigation.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
