The easy-to-create site navigation bar isCSSA field that truly shows its unique capabilities. The old method of creating a navigation bar tends to rely on a large number of images, nested tables, and JavaScript scripts-all of which seriously affect the availability and accessibility of the site. If your site cannot be navigated on a device that does not support JavaScript, you will not only stop JavaScript users, but also stop devices that only support text, for example, a robot that has search engines in a screen readerProgram-They will never be able to get the index of the website content from your homepage. Even if your customers don't care about accessibility, tell them the bulky menu to prevent them from getting a decent search engine ranking!
CSSAllows you to create an attractive navigation bar usingCSSThe advantage is that it is not only beautiful in appearance, but also text-it is a text marked by a special method, it allows all people or devices physically unable to see your design but want your content to access your site without being accessible and easy to understand. In this article, we will look at a varietyCSSNavigation bar solution. Some of them are suitable for implementation on existing sites, so that these sites can guide more quickly, and promote their accessibility by replacing the antique, image-based navigation bar. Others are more suitable for integration with pureCSSSite layout.
How to convert a structured list style into a navigation bar menu?
For newly designed websites, you may try to avoid using tables for layout, or use tables only where absolutely necessary. Therefore, a navigation bar solution that does not involve tables is useful. By eliminating the use of table elements, you will find that your page contains fewer markup symbols.
Solution
The navigation bar system is a list of locations that users can access on this site. Therefore, an unordered list is an ideal way to mark your navigation bar. As you can see, the implementation of the navigation bar in Figure 1 usesCSSA list of styles.
Figure 1: menu bar of the style list <! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml" lang = "En-us">
<Head>
<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"/>
</Head>
<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>
</Html>
# 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;
}
Discussion
To create a navigation bar based on the unordered list, first create your list and add each navigation link to the Li element, as shown below:
<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>
Then, select an appropriate 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 shown in figure 2 below, this tag looks pretty common under the default style of the browser.
Figure 2: basic list without styling
The first thing we need to do is the container in the style navigation bar-here is # navigation:
# Navigation {
Width: 200px;
}
Here I simply gave # navigation a width. If the navigation system isCSSPart of the page layout. I may add some location information for this ID.
The following is a list of styles:
# Navigation ul {
List-style: none;
Margin: 0;
Padding: 0;
}
As shown in figure 3, the preceding rule removes the pre-symbols and indentation that appear when the browser displays a list by default.
Figure 3 Remove the indent and prefix list
The next step is to use # navigation to style the Li elements and give them a bottom edge:
# Navigation Li {
Border-bottom: 1px solid # ed9f9f;
}
Finally, we will style the 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 one we createdCSSRules include adding left and right borders, removing underscores, and so on. In this rule, the first attribute definition sets the display attribute as a block so that those links are displayed as block elements. In this way, when you move the cursor over these navigation buttons, the display effect is exactly the same as that of image 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
