Unless your website has only one page, you will certainly use the navigation. in fact, navigation is one of the most important parts in web design. it takes you a lot of time to consider how to make it easier for viewers to access your website.
In the past, website navigation often relied on images, tables, and javascript. these have seriously affected the accessibility and usability of the website. if a user lacks javascript support, your website navigation will not be properly displayed. for example, a user can close the javascript of the browser or read all the data from your website on a handheld device that can only read plain text. if you don't pay attention to this aspect, tell him that complicated menus will block search engine rankings. (Mu: like zen garden is a good CSS website .)
CSS can be used to create a more attractive navigation. Because CSS is not mixed with text, it ensures the accessibility of navigation and allows those handheld devices to read it. in this tutorial, we will see a CSS-based navigation. CSS-based websites will accelerate the loading time of webpages, so that image-based navigation will gradually be eliminated.
Navigation Structure
The essence of navigation is to allow visitors to access your website better, so you need to build meaningful semantics. make CSS and semantics consistent for future convenience. avoid incompatibility with existing browsers.
Solution
The following is the HTML and CSS code for navigation.
This is the HTML code for creating the navigation.
======================================
<! 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>
======================================
Use CSS to add effects to the above Code
==================================
# 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;
}
======================================
Analysis:
First, create a navigation bar for the unordered list and complete the navigation link.
======================================
<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, use a div to include the unordered list.
======================================
<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>
====================================
Display the default style in the browser.
The first thing we need to do next is to define the width for this div.
==============================
# Navigation {
Width: 200px;
}
==================================
Add a style to the list to remove the default dot and fill.
======================================
# Navigation ul {
List-style: none;
Margin: 0;
Padding: 0;
}
======================================
Display in the browser:
Add an underline to the li tag
======================================
# Navigation li {
Border-bottom: 1px solid # ED9F9F;
}
====================================
Add a style to 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;
}
==================================
As you can see above, this CSS adds the left and right borders and blocks objects. This effect makes the link look like a button. This effect looks like adding an image to the navigation.
Use CSS to create a navigation without images and javascript.
The navigation function is often flipped. For example, if a viewer places the mouse over a button, another image is displayed to highlight the effect. to achieve this effect, two images and javascript are required.
Solution:
It is much easier to use CSS to create the above effect than to create an image. In CSS, it is necessary to actually flip this effect using the hover pseudo class selector.
We add a flip effect to the above example:
==================================
# Navigation li a: hover {
Background-color: #711515;
Color: # FFFFFF;
}
==================================
Effect:
We can see that it is very simple to use CSS to achieve this effect. In this example, I just changed the color of the flipped background. You can change the border and text color during the flip.
In modern browsers, for example, IE7, you can add a hover pseudo class selector to any object, but it cannot be used in IE6 or earlier versions.
In the old version, you can only click on the anchor text, so you can only click on the text, not the background.
Here is a hacker method to solve this problem: Expand the link width.
====================
* Html # navigation li {
Width: 100%;
}
==================================
How to Use CSS to create a secondary navigation
So far, the example has created a horizontal navigation, but sometimes we need to add a secondary navigation under the horizontal level. We will add nesting for the example and add its CSS style.
======================================
<! 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 = "listnav_sub.css"/>
</Head>
<Body>
<Div id = "navigation">
<Ul>
<Li> <a href = "#"> Recipes </a>
<Ul>
<Li> <a href = "#"> Starters </a> </li>
<Li> <a href = "#"> Main Courses </a> </li>
<Li> <a href = "#"> Desserts </a> </li>
</Ul>
</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;
}
# Navigation li a: hover {
Background-color: #711515;
Color: # FFFFFF;
}
# Navigation ul {
Margin-left: 12px;
}
# Navigation ul li {
Border-bottom: 1px solid #711515;
Margin: 0;
}
# Navigation ul a: link, # navigation ul a: visited {
Background-color: # ED9F9F;
Color: #711515;
}
# Navigation ul a: hover {
Background-color: #711515;
Color: # FFFFFF;
}
======================================
Effect:
Analysis:
Nested list is a good way to describe the navigation system. in this example, we use the first list to represent the main menu, And the sub menu is included under the main menu. in this way, the structure is very clear without CSS styles.
The <li> object in the main menu contains a list:
======================================
<Div id = "navigation">
<Ul>
<Li> <a href = "#"> Recipes </a>
<Ul>
<Li> <a href = "#"> Starters </a> </li>
<Li> <a href = "#"> Main Courses </a> </li>
<Li> <a href = "#"> Desserts </a> </li>
</Ul>
</Li>
<Li> <a href = "#"> Contact Us </a> </li>
<Li> <a href = "#"> Articles </a> </li>
<Li> <a href = "#"> Buy Online </a> </li>
</Ul>
</Div>
======================================
If no CSS is added to html, the nested list will continue the CSS style of the main menu, floating on the left side, so a blank space should be added, which is a certain distance from the main menu.
======================================
# Navigation ul {
Margin-left: 12px;
}
======================================
Next, we will add a style to the <li> <a> object in the nested object.
======================================
# Navigation ul li {
Border-bottom: 1px solid #711515;
Margin: 0;
}
# Navigation ul a: link, # navigation ul a: visited {
Background-color: # ED9F9F;
Color: #711515;
}
# Navigation ul a: hover {
Background-color: #711515;
Color: # FFFFFF;
}
======================================
Original article: http://www.ximumu.cn/post/177.html
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
