CSS level Navigation-turquoise (shaded)

A beautiful navigation, can give the site a finishing touch role. Navigation in the guidance of users to search for content, but also to change the mood of users to browse the site, browse the site is like a trip, the creative navigation bar for users to enjoy the more enjoyable, increase interest in the site.

I am not good at art production, but can be from some beautiful sites to extract good parts for their own use, but also for others to share. Today we have a sky-blue navigation for everyone to learn together.

Let's start by looking at the final effect:



First step: Place a div as the main part of the navigation

<class= "Userplacemain"></div>

Write a style for it:

{    clear: both;     width:1200px    height:50px;     Line-height: 50px;     background: #0090CE;     padding: 0 20px;     color: White;     -moz-box-shadow: 5px 5px 10px #B7B7B7;     box-shadow: 5px 5px 10px #B7B7B7;}

Note: here -moz-box-shadow:5px 5px 10px #B7B7B7; box-shadow:5px 5px 10px #B7B7B7; To navigate the shaded section

At this point the navigation effect is as follows:



Step Two: Place navigation link content

Here use UL Li unordered list

<ul>     <Li><aID= "Userplaceid_1"href= "http://xunwn.com/1010100"class= "Userplacemainullihover">Home</a>|</Li>     <Li><aID= "Userplaceid_2"href= "Http://xunwn.com">Image display</a>|</Li>     <Li><aID= "Userplaceid_3"href= "http://xunwn.com/photo/1010100">Product Show</a></Li></ul>

Now you need to float UL Li to the left, using: Float:left

{    float: left;     margin-right: 10px;}

At this point the navigation effect is as follows:



It's not far from our final effect. Set the link text width, background, interval

Step Two: Set the link text width, background, interval

Because the a tag is an inline tag, if you need to set the width to use a different processing method, you can use Display:inline-block to set the width

{    text-shadow: 0 1px 0 rgba (0,0,0,0.3);     color: White;     display: inline-block;     width: 100px;     height: 100%;     font-size: 15px;     text-align: Center;     margin-right: 10px;}

Note: text-shadow:0 1px 0 Rgba (0,0,0,0.3); To add a shadow to the text, this item is not set

At this point the navigation effect is as follows:



Now the effect is much better, the last point of processing, is the navigation mouse sliding style

Step three: Set the navigation mouse slide style

There are two ways, one: directly using the CSS pseudo-class selector: hover; II: JavaScript or Juqery control the link text CSS style, here to use the first type, more convenient

. Userplacemain ul li A:hover {background: #0074A6; color:White; }

The final effect is as follows:



I have always pursued a simple fashion, the future will be free to do more things to share, we come together to learn, OK today, thank you! Original address: http://xunwn.com/tgzp/1010100_6751

CSS level Navigation-turquoise (shaded)