Create a horizontal menu with CSS

Source: Internet
Author: User

Although I have mentioned the CSS menu creation method on my website and articles, many beginners still do not know how to implement it and how it works, I want to write a detailed tutorial to help you.

Let's take a look at a menu example. The final result is:

  • Homepage
  • Product Introduction
  • Service Introduction
  • Technical Support
  • Buy now
  • Contact us

Next, let's explain the procedure in detail.

Step 1: Create an unordered list

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

<Ul>
<Li> <a href = "1"> homepage </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>

Effect:

  • Homepage
  • Product Introduction
  • Service Introduction
  • Technical Support
  • Buy now
  • Contact us
Step 2: Hide the default li style

Because it does not look very nice, the menu usually does not need the default dot li, we define a style for UL to eliminate these dots.

Of course, to better control the entire menu, we put the menu in a div. The page code is changed:

<Div class = "test"> <ul>
<Li> <a href = "1"> homepage </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:

. Test ul {list-style: none ;}

Note: ". test ul" indicates that the style I want to define will apply to ul labels in the test layer.

Now the effect is no dot:

  • Homepage
  • Product Introduction
  • Service Introduction
  • Technical Support
  • Buy now
  • Contact us
Step 3: Key fluctuations

Here is the key to changing the menu to landscape. we add a "float: left;" attribute to the li element to let each li float on the left of the previous li.

CSS is defined:

. Test li {float: left ;}

Effect:

  • Homepage
  • Product Introduction
  • Service Introduction
  • Technical Support
  • Buy now
  • Contact us

Check that the menu is changed horizontally. That's easy! The following is the optimization details.

Step 4: Adjust the width

What if menus are crowded together? Let's adjust the li width.

Add the definition width: 100px in CSS to specify that the width of a li is 100px. You can adjust the value as needed:

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

Effect:

  • Homepage
  • Product Introduction
  • Service Introduction
  • Technical Support
  • Buy now
  • Contact us

If we define the width of the external div at the same time, li will automatically wrap the line according to the div width. For example, we define the div width 350px, and the total width of the six li is 600px, if one row is not ranked, the system automatically changes to two rows:

. Test {width: 350px ;}

Effect:

  • Homepage
  • Product Introduction
  • Service Introduction
  • Technical Support
  • Buy now
  • Contact us
Step 5: set the basic link Effect

Next, we use CSS to set the link styles and define the statuses of link, visited, and hover respectively.

. 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 ;}

Effect:

  • Homepage
  • Product Introduction
  • Service Introduction
  • Technical Support
  • Buy now
  • Contact us
Step 6: display the link as a block-level element

A friend asked, why didn't the background color of the menu link fill the entire li width? Well, the solution is very simple. Add the display: block in the style definition of a to display the link as a block-level element.

At the same time, we have fine-tuned the following details:

  • Use text-align: center to center the menu text;
  • Use height: 30px to increase the background height;
  • Use margin-left: 3px to leave a 3px distance between menus;
  • Use line-height: 30px to define the line height so that the link text is vertically centered;

CSS is defined as follows:

. Test a {display: block; text-align: center; height: 30px ;}
. Test li {float: left; width: 100px; background: # CCC; margin-left: 3px; line-height: 30px ;}

Effect changed:

  • Homepage
  • Product Introduction
  • Service Introduction
  • Technical Support
  • Buy now
  • Contact us

This is more beautiful.

Step 7: Define a background image

We usually add a small icon in front of each link to make the navigation clearer. CSS is implemented by defining the li background image:

. 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 ;}

Note: "background: url(arrow_off.gif) # CCC no-repeat 5px 12px? this code is a CSS scaling. The background image is arrow_off.gif; the background color is # CCC; the background image is not repeated." no-repeat ", the position of the background image is 5px on the left and 12px on the top;

When the mouse moves to the chain, the image is marked as arrow.off.gif.

Effect changed:

  • Homepage
  • Product Introduction
  • Service Introduction
  • Technical Support
  • Buy now
  • Contact us

The complete css code 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 page code is:

<Div class = "test">
<Ul>
<Li> <a href = "1"> homepage </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>

Now, the main step is to copy and modify the code immediately. You can also use CSS for the horizontal menu!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.