How to implement first-level navigation with shadow in css

A beautiful navigation can give the website the finishing touch. When guiding users to search for content, navigation can also change the user's mood when browsing the website. Browsing the website is like a journey. The creative navigation bar makes users enjoy it more happily and increases their interest in the website.

I am not good at art production, but I can extract good parts from some beautiful websites for my own use and to share with others. Today we have prepared a sky blue navigation for everyone to learn together.

Let’s look at the final effect first:



Step one: Place a p as the main part of the navigation

<p class="userPlaceMain"></p>

Write a style for it:

.userPlaceMain 
{
    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; is the navigation shadow part

The navigation effect is as follows:


##Step 2: Place navigation link content

Use ul li unordered list here

<ul>
     <li><a id="userPlaceId_1" href="http://xunwn.com/1010100" class="userPlaceMainUlLiHover">主页</a>|</li>
     <li><a id="userPlaceId_2" href="http://xunwn.com">形象展示</a>|</li>
     <li><a id="userPlaceId_3" href="http://xunwn.com/photo/1010100">产品展示</a></li></ul>

Now you need to float ul li to the left, use ：float:left

.userPlaceMain ul li {
    float: left;
    margin-right: 10px;
}

The navigation effect at this time is as follows:

We are not far from our final effect, and we still need to set the link text. Width, background, spacing



Step 2: Set link text width, background, spacing

Since the a mark is an inline mark, if you need to set the width, you need to use other processing methods. Here, use display:inline-block to set the width

.userPlaceMain ul li a 
{
    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); is to add a shadow to the text. This item can not be set. At this time, the navigation effect is as follows:



The effect is much better now, there is still one last step to deal with, which is navigationMouse
Sliding style
Step 3: Set navigation mouse sliding style



There are two ways here, one: directly use the css pseudo-class selector: hover; two: javascript or juqery to control the css style of the link text, the first one is used here, Easier

.userPlaceMain ul li a:hover{background: #0074A6;color:White; }

Final effect as follows:

The above is the detailed content of How to implement first-level navigation with shadow in css. For more information, please follow other related articles on the PHP Chinese website!