Sexy CSS3 menu

最新推荐文章于 2024-02-06 01:55:34 发布

转载最新推荐文章于 2024-02-06 01:55:34 发布 · 583 阅读

文章标签：

#menu #css #preprocessor #styles #download #button

CSS3 专栏收录该内容

97 篇文章

订阅专栏

本文介绍如何使用CSS3创建美观的菜单导航。通过调整CSS样式，实现菜单项的渐变背景、阴影效果等，并利用LESS预处理器提高开发效率。

from:http://www.red-team-design.com/sexy-css3-menu

One of the most common elements when talking about a website or an application design is definitely the menu navigation. No matter if vertical or horizontal, simple or complex, a menu is essential and it has to look that way.

In today’s article, you’ll learn how to create a good looking menu using some CSS3 magic.

View demo

The idea

If you are a web developer you may have heard of tools called CSS pre-processors. Less is probably the most well known CSS preprocessor, but that is another story.

While visiting LESS’s site, I noticed their download button, which is an image, and I thought to myself: I can do it using CSS only.

LESS download button – at this time

The HTML

<nav>
        <ul>
                <li><a href="#"><span>Home</span></a></li>
                <li><a href="#"><span>Categories</span></a></li>
                <li><a href="#"><span>About</span></a></li>
                <li><a href="#"><span>Portfolio</span></a></li>
                <li><a href="#"><span>Contact</span></a></li>
        </ul>
</nav>

Pretty clean, except for the span element. You’ll see further why we need that span.

The CSS

The demo example contains also a header and a logo (so, extra styles), but I’ll list here only the styles used for this menu.

Removing the default list styles

nav ul
{
        padding: 0;
        margin: 0;
        list-style: none;
}

nav li
{
        float: left;
}

Style the anchor

nav a
{
    float: left;
    color: #eee;
    margin: 0 5px;
    padding: 3px;
    text-decoration: none;
    border: 1px solid #831608;
    font: bold 14px Arial, Helvetica;
    background-color: #831608;
    background-image: -moz-linear-gradient(#bb413b, #831608);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bb413b), to(#831608));
    background-image: -webkit-linear-gradient(#bb413b, #831608);
    background-image: -o-linear-gradient(#bb413b, #831608);
    background-image: -ms-linear-gradient(#bb413b, #831608);
    background-image: linear-gradient(#bb413b, #831608);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.8);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

nav a:hover
{
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#831608, #bb413b);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#831608), to(#bb413b));
    background-image: -webkit-linear-gradient(#831608, #bb413b);
    background-image: -o-linear-gradient(#831608, #bb413b);
    background-image: -ms-linear-gradient(#831608, #bb413b);
    background-image: linear-gradient(#831608, #bb413b);
}

nav a:active
{
    background: #bb413b;
    position: relative;
    top: 2px;
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}

Multiple CSS3 properties were used to create the above.

Style the span element

nav span
{
    border: 1px dashed #eba1a3;
    display: inline-block;
    padding: 4px 15px;
    cursor: pointer;
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#d4463c, #aa2618);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d4463c), to(#aa2618));
    background-image: -webkit-linear-gradient(#d4463c, #aa2618);
    background-image: -o-linear-gradient(#d4463c, #aa2618);
    background-image: -ms-linear-gradient(#d4463c, #aa2618);
    background-image: linear-gradient(#d4463c, #aa2618);
}

nav a:hover span
{
    background-color: #bb413b;
    background-image: -moz-linear-gradient(#aa2618, #d4463c);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#aa2618), to(#d4463c));
    background-image: -webkit-linear-gradient(#aa2618, #d4463c);
    background-image: -o-linear-gradient(#aa2618, #d4463c);
    background-image: -ms-linear-gradient(#aa2618, #d4463c);
    background-image: linear-gradient(#aa2618, #d4463c);
}