css| Menu Author: Atzie http://www.alixixi.com/web/a/200http://www.alixixi.com/web/a/5-http://www.alixixi.com/web/a/4-http ://WWW.ALIXIXI.COM/WEB/A/1HTTP://WWW.ALIXIXI.COM/WEB/A/1 http://www.alixixi.com/web/a/1http://www.alixixi.com/ web/a/6:http://www.alixixi.com/web/a/5http://www.alixixi.com/web/a/4:http://www.alixixi.com/web/a/5http:// Www.alixixi.com/web/a/2
Although in my website and the article has mentioned the CSS to make the menu method, but many beginners still not very clear how realizes, as well as realizes the principle, I thought specially writes a detailed tutorial will be helpful to everybody.
Let's take a look at a menu example, the final effect is:
- Home
- Product introduction
- Service Introduction
- Technical support
- Buy Now
- Contact Us
Then we'll explain the steps in detail.
Step One: Create a sequence-free table
We first create a unordered list to create the structure of the menu. The code is:
<ul>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/1" > Home </a></li>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/2" > Product introduction </a></li>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/3" > Service Introduction </a></li>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/4" > Technical Support </a></li>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/5" > Buy Now </a></li>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/6" > Contact Us </a></li>
</ul>
The effect is:
- Home
- Product introduction
- Service Introduction
- Technical support
- Buy Now
- Contact Us
Step Two: Hide the default style of Li
Because it does not look very good, the menu usually does not need Li's default dot, we give the UL to define a style to eliminate these dots.
Of course, in order to better control the entire menu, we put the menu in a Div. The page code becomes:
<div class= "Test" ><ul>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/1" > Home </a></li>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/2" > Product introduction </a></li>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/3" > Service Introduction </a></li>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/4" > Technical Support </a></li>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/5" > Buy Now </a></li>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/6" > Contact Us </a></li>
</ul></div>
CSS is defined as:
. Test Ul{list-style:none;}
Description: ". Test ul" indicates that the style I want to define will function on the UL tag in the test's layer.
Now the effect is that there are no dots:
- Home
- Product introduction
- Service Introduction
- Technical support
- Buy Now
- Contact Us
Step three: the key floating
Here is the key to the menu becoming horizontal, we add a "float:left" to the LI element. Property so that each Li floats to the left of an li on the front.
CSS is defined as:
. Test Li{float:left;}
The effect is:
- Home
- Product introduction
- Service Introduction
- Technical support
- Buy Now
- Contact Us
Look, the menu has gone sideways. It's that simple! The next thing to do is to optimize the details.
Fourth Step: adjust the width
What if the menu is all packed together? Let's adjust the width of li.
Add a definition to a CSS width:http://www.alixixi.com/web/a/100px specifies that the width of an li is http://www.alixixi.com/web/a/100px, and of course you can adjust the values according to your needs:
. Test li{float:left;width:http://www.alixixi.com/web/a/100px;}
The effect is:
- Home
- Product introduction
- Service Introduction
- Technical support
- Buy Now
- Contact Us
If we also define the width of the outside Div, Li will automatically wrap the div according to its width, for example, by defining the div width http://www.alixixi.com/web/a/3http://www.alixixi.com/web/a/50px, The total width of the http://www.alixixi.com/web/a/6 Li is http://www.alixixi.com/web/a/600px, and a row of rows automatically becomes two lines:
. test{width:http://www.alixixi.com/web/a/3http://www.alixixi.com/web/a/50px;}
The effect is:
- Home
- Product introduction
- Service Introduction
- Technical support
- Buy Now
- Contact Us
Fifth Step: Set the basic link effect
Next, we use CSS to set the style of the link, respectively, defined: Link,: visited,: hover state
. Test A:link{color: #http://WWW.ALIXIXI.COM/WEB/A/6HTTP://WWW.ALIXIXI.COM/WEB/A/6HTTP://WWW.ALIXIXI.COM/WEB/A/6; Background: #CCC; text-decoration:none;}
. Test A:visited{color: #http://www.alixixi.com/web/a/6http://www.alixixi.com/web/a/6http://www.alixixi.com/web/a /6;text-decoration:underline;}
. Test A:hover{color: #FFF; Font-weight:bold;text-decoration:underline;background: #F00;}
The effect is:
- Home
- Product introduction
- Service Introduction
- Technical support
- Buy Now
- Contact Us
Step Sixth: Display the link as a block-level element
A friend asked, why does the background color of the menu link not fill the width of the entire Li? Well, the solution is simple, adding display:block to A's style definition so that the link is displayed as a block-level element.
At the same time we fine-tune the following details:
- Center the menu text with Text-align:center;
- Increase the height of the background with height:http://www.alixixi.com/web/a/30px;
- Use margin-left:http://www.alixixi.com/web/a/3px to make each menu empty http://www.alixixi.com/web/a/3px distance;
- Use line-height:http://www.alixixi.com/web/a/30px to define row height, so that the link text is centered vertically;
The CSS definition looks like this:
. Test a{display:block;text-align:center;height:http://www.alixixi.com/web/a/30px;}
. Test Li{float:left;width:http://www.alixixi.com/web/a/100px;background: #CCC; margin-left:http://www.alixixi.com /web/a/3px;line-height:http://www.alixixi.com/web/a/30px;}
The effect becomes:
- Home
- Product introduction
- Service Introduction
- Technical support
- Buy Now
- Contact Us
This is much more beautiful.
Step Seventh: Define a background picture
We usually add a small icon to the front of each link, so the navigation is clearer. CSS is implemented by defining the background image of Li:
. Test A:link{color: #url (arrow_off.gif) #CCC no-repeat http://www.alixixi.com/web/a/5px http://www.alixixi.com/web/a /1http://www.alixixi.com/web/a/2px;text-decoration:none;}
. Test A:hover{color: #FFF; Font-weight:bold;text-decoration:none;background:url (arrow_on.gif) #F00 no-repeat http:// www.alixixi.com/web/a/5px URL (arrow_off.gif) #CCC no-repeat http://www.alixixi.com/web/a/5px http://www.alixixi.com /web/a/1http://www.alixixi.com/web/a/2px; " This code is a CSS abbreviation, which indicates that the background image is arrow_off.gif, the background color is #ccc, the background image does not repeat "no-repeat", and the background picture is positioned on the left side of the PP default state, Icon is arrow.off.gif, when the mouse moves to the link, the icon changes to Arrow_on.gif
The effect becomes:
- Home
- Product introduction
- Service Introduction
- Technical support
- Buy Now
- Contact Us
Now the complete code for CSS is:
. Test Ul{list-style:none;}
. Test Li{float:left;width:http://www.alixixi.com/web/a/100px;background: #CCC; margin-left:http://www.alixixi.com /web/a/3px;line-height:http://www.alixixi.com/web/a/30px;}
. Test a{display:block;text-align:center;height:http://www.alixixi.com/web/a/30px;}
. Test A:link{color: #url (arrow_off.gif) #CCC no-repeat http://www.alixixi.com/web/a/5px http://www.alixixi.com/web/a /1http://www.alixixi.com/web/a/2px;text-decoration:none;}
. Test A:visited{color: #http://www.alixixi.com/web/a/6http://www.alixixi.com/web/a/6http://www.alixixi.com/web/a /6;text-decoration:underline;}
. Test A:hover{color: #FFF; Font-weight:bold;text-decoration:none;background:url (arrow_on.gif) #F00 no-repeat http:// www.alixixi.com/web/a/5px http://www.alixixi.com/web/a/1http://www.alixixi.com/web/a/2px;}
The complete code for the page is:
<div class= "Test" >
<ul>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/1" > Home </a></li>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/2" > Product introduction </a></li>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/3" > Service Introduction </a></li>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/4" > Technical Support </a></li>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/5" > Buy Now </a></li>
<li><a href= "HTTP://WWW.ALIXIXI.COM/WEB/A/6" > Contact Us </a></li>
</ul>
</div>
OK, the main step is these 7 steps, immediately copy and modify the code to try, you can also use CSS to do landscape menu!
