How to make a landscape menu with CSS

css| Menu

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 Page
• Product Introduction
• Service Introduction
• Technical Support
• Buy Now
• Contact Us

Then we'll explain the steps in detail.

First step: Create an unordered list

We first create a unordered list to create the structure of the menu. The code is:

<ul>
<li><a href= "1" > Home </a></li>
<li><a href= "2" > Product introduction </a></li>
<li><a href= "3" > Service introduction </a></li>
<li><a href= "4" > Technical support </a></li>
<li><a href= "5" > Buy now </a></li>
<li><a href= "6" > Contact us </a></li>
</ul>

The effect is:

• Home Page
• 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= "1" > Home </a></li>
<li><a href= "2" > Product introduction </a></li>
<li><a href= "3" > Service introduction </a></li>
<li><a href= "4" > Technical support </a></li>
<li><a href= "5" > Buy now </a></li>
<li><a href= "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 Page
• 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 Page
• 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 definition to CSS width:100px specify an li width of 100px, of course you can adjust the value according to your needs:

. Test li{float:left;width:100px;}

The effect is:

• Home Page
• Product Introduction
• Service Introduction
• Technical Support
• Buy Now
• Contact Us

If we define the width of the outside Div at the same time, Li will automatically wrap according to the Div's width, for example, the total width of the div width 350px,6 li is 600px, and one row will automatically become two lines:

. test{width:350px;}

The effect is:

• Home Page
• 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: #666; background: #CCC; text-decoration:none;}
. Test A:visited{color: #666; text-decoration:underline;}
. Test A:hover{color: #FFF; Font-weight:bold;text-decoration:underline;background: #F00;}

The effect is:

• Home Page
• 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:30px;
• Use margin-left:3px to make each menu empty 3px distance;
• Use line-height: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:30px;}
. Test Li{float:left;width:100px;background: #CCC; margin-left:3px;line-height:30px;}

The effect becomes:

• Home Page
• 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: #666; Background:url (arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;
. Test A:hover{color: #FFF font-weight:bold;text-decoration:none;background:url (arrow_on.gif) #F00 no-repeat 5px 12px ;}

Description: "Background:url (arrow_off.gif) #CCC no-repeat 5px 12px;" This code is a CSS abbreviation, which indicates that the background image is arrow_off.gif, the background color is #ccc, the background picture does not repeat "no-repeat", the background picture position is the left margin 5px, the top margin 12px;

By default, the icon is Arrow.off.gif, and when the mouse is moved to the link, the icon changes to Arrow_on.gif

The effect becomes:

• Home Page
• 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:100px;background: #CCC; margin-left:3px;line-height:30px;}
. Test a{display:block;text-align:center;height:30px;}
. Test A:link{color: #666; Background:url (arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;
. Test A:visited{color: #666; text-decoration:underline;}
. Test A:hover{color: #FFF font-weight:bold;text-decoration:none;background:url (arrow_on.gif) #F00 no-repeat 5px 12px ;}

The complete code for the page is:

<div class= "Test" >
<ul>
<li><a href= "1" > Home </a></li>
<li><a href= "2" > Product introduction </a></li>
<li><a href= "3" > Service introduction </a></li>
<li><a href= "4" > Technical support </a></li>
<li><a href= "5" > Buy now </a></li>
<li><a href= "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!