制作旋转CSS3下拉菜单（whirling CSS3 dropdown menu）

最新推荐文章于 2022-04-07 08:48:27 发布

weixin_30879169

最新推荐文章于 2022-04-07 08:48:27 发布

阅读量101

点赞数

原文链接：http://www.cnblogs.com/xiebaochun/p/3406656.html

版权

原文地址：[http://www.script-tutorials.com/whirling-dropdown-menu/](http://www.script-tutorials.com/whirling-dropdown-menu/)

译者：[晋文格墨](http://xiebaochun.github.io/)



很多下拉菜单都可以通过css3的选择器轻松实现。只要稍微激发一下你的创作灵感，你就可以做出一个真实而独特的设计。在今天的教程中，我们将创建一个特别的css3下拉菜单，当鼠标移动到父级菜单项时将会呈现新的下拉特效，子菜单项将会以旋转的方式出现。只要一步一步地跟着本教程就能创建这个菜单。

### 预览： ###

)

[在线演示](http://www.script-tutorials.com/demos/364/index.html)

[下载DEMO](http://www.script-tutorials.com/demos/364/source.zip)

### 步骤 1.HTML ###

首先需要为css菜单建一个HTML结构。和大部分下拉菜单类似，这是一个UL-LI结构的下拉菜单。下面是此菜单的HTML代码。

index.html

    <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#s1">Menu 1</a>
        <ul class="submenu">
            <li><a href="#">Submenu a</a></li>
            <li><a href="#">Submenu b</a></li>
            <li><a href="#">Submenu c</a></li>
            <li><a href="#">Submenu d</a></li>
            <li><a href="#">Submenu e</a></li>
            <li><a href="#">Submenu f</a></li>
            <li><a href="#">Submenu g</a></li>
            <li><a href="#">Submenu h</a></li>
        </ul>
    </li>
    <li class="active"><a href="#s2">Menu 2</a>
        <ul class="submenu">
            <li><a href="#">Submenu a</a></li>
            <li><a href="#">Submenu b</a></li>
            <li><a href="#">Submenu c</a></li>
            <li><a href="#">Submenu d</a></li>
            <li><a href="#">Submenu e</a></li>
            <li><a href="#">Submenu f</a></li>
            <li><a href="#">Submenu g</a></li>
            <li><a href="#">Submenu h</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>
        <ul class="submenu">
            <li><a href="#">Submenu a</a></li>
            <li><a href="#">Submenu b</a></li>
            <li><a href="#">Submenu c</a></li>
            <li><a href="#">Submenu d</a></li>
            <li><a href="#">Submenu e</a></li>
            <li><a href="#">Submenu f</a></li>
            <li><a href="#">Submenu g</a></li>
            <li><a href="#">Submenu h</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="http://www.script-tutorials.com/whirling-dropdown-menu/">Back to tutorial</a></li>
    </ul>

### 步骤 2.CSS ###

css/main.css

    .menu, .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    .menu {
    height: 58px;
    }
    .menu li {
    background: -moz-linear-gradient(#292929, #252525);
    background: -ms-linear-gradient(#292929, #252525);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
    background: -webkit-linear-gradient(#292929, #252525);
    background: -o-linear-gradient(#292929, #252525);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
    background: linear-gradient(#292929, #252525);

    border-bottom: 2px solid #181818;
    border-top: 2px solid #303030;
    min-width: 160px;
    }
    .menu > li {
    display: block;
    float: left;
    position: relative;
    }
    .menu > li:first-child {
    border-radius: 5px 0 0;
    }
    .menu a {
    border-left: 3px solid rgba(0, 0, 0, 0);
    color: #808080;
    display: block;
    font-family: 'Lucida Console';
    font-size: 18px;
    line-height: 54px;
    padding: 0 25px;
    text-decoration: none;
    text-transform: uppercase;
    }

当鼠标移动到某个菜单项上时，将其高亮。

index.html

    <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#s1">Menu 1</a>
        <ul class="submenu">
            <li><a href="#">Submenu a</a></li>
            <li><a href="#">Submenu b</a></li>
            <li><a href="#">Submenu c</a></li>
            <li><a href="#">Submenu d</a></li>
            <li><a href="#">Submenu e</a></li>
            <li><a href="#">Submenu f</a></li>
            <li><a href="#">Submenu g</a></li>
            <li><a href="#">Submenu h</a></li>
        </ul>
    </li>
    <li class="active"><a href="#s2">Menu 2</a>
        <ul class="submenu">
            <li><a href="#">Submenu a</a></li>
            <li><a href="#">Submenu b</a></li>
            <li><a href="#">Submenu c</a></li>
            <li><a href="#">Submenu d</a></li>
            <li><a href="#">Submenu e</a></li>
            <li><a href="#">Submenu f</a></li>
            <li><a href="#">Submenu g</a></li>
            <li><a href="#">Submenu h</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a>
        <ul class="submenu">
            <li><a href="#">Submenu a</a></li>
            <li><a href="#">Submenu b</a></li>
            <li><a href="#">Submenu c</a></li>
            <li><a href="#">Submenu d</a></li>
            <li><a href="#">Submenu e</a></li>
            <li><a href="#">Submenu f</a></li>
            <li><a href="#">Submenu g</a></li>
            <li><a href="#">Submenu h</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="http://www.script-tutorials.com/whirling-dropdown-menu/">Back to tutorial</a></li>
    </ul>

### 步骤 2.CSS ###

css/main.css

    .menu, .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    .menu {
    height: 58px;
    }
    .menu li {
    background: -moz-linear-gradient(#292929, #252525);
    background: -ms-linear-gradient(#292929, #252525);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
    background: -webkit-linear-gradient(#292929, #252525);
    background: -o-linear-gradient(#292929, #252525);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
    background: linear-gradient(#292929, #252525);

    border-bottom: 2px solid #181818;
    border-top: 2px solid #303030;
    min-width: 160px;
    }
    .menu > li {
    display: block;
    float: left;
    position: relative;
    }
    .menu > li:first-child {
    border-radius: 5px 0 0;
    }
    .menu a {
    border-left: 3px solid rgba(0, 0, 0, 0);
    color: #808080;
    display: block;
    font-family: 'Lucida Console';
    font-size: 18px;
    line-height: 54px;
    padding: 0 25px;
    text-decoration: none;
    text-transform: uppercase;
    }

子菜单项默认是隐藏的，并且它的元素被选择了90度。当鼠标悬停在父级菜单项时，子菜单将显示它的所有菜单项。

 /* submenu styles */
    .submenu {
    left: 0;
    max-height: 0;
    position: absolute;
    top: 100%;
    z-index: 0;
    
    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
    }
    .submenu li {
    opacity: 0;
    
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    
    -webkit-transition: opacity .4s, -webkit-transform .5s;
    -moz-transition: opacity .4s, -moz-transform .5s;
    -ms-transition: opacity .4s, -ms-transform .5s;
    -o-transition: opacity .4s, -o-transform .5s;
    transition: opacity .4s, transform .5s;
    }
    .menu .submenu li:hover a {
    border-left: 3px solid #454545;
    border-radius: 0;
    color: #ffffff;
    }
    .menu > li:hover .submenu, .menu > li:focus .submenu {
    max-height: 2000px;
    z-index: 10;
    }
    .menu > li:hover .submenu li, .menu > li:focus .submenu li {
    opacity: 1;
    
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    }

最后，为了使其更特别一点，给每个子菜单项添加一些延迟，这样他们就会依次显示出来。

 /* submenu styles */
    .submenu {
    left: 0;
    max-height: 0;
    position: absolute;
    top: 100%;
    z-index: 0;
    
    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
    }
    .submenu li {
    opacity: 0;
    
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    
    -webkit-transition: opacity .4s, -webkit-transform .5s;
    -moz-transition: opacity .4s, -moz-transform .5s;
    -ms-transition: opacity .4s, -ms-transform .5s;
    -o-transition: opacity .4s, -o-transform .5s;
    transition: opacity .4s, transform .5s;
    }
    .menu .submenu li:hover a {
    border-left: 3px solid #454545;
    border-radius: 0;
    color: #ffffff;
    }
    .menu > li:hover .submenu, .menu > li:focus .submenu {
    max-height: 2000px;
    z-index: 10;
    }
    .menu > li:hover .submenu li, .menu > li:focus .submenu li {
    opacity: 1;
    
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    }

[在线演示](http://www.script-tutorials.com/demos/364/index.html)

[下载DEMO](http://www.script-tutorials.com/demos/364/source.zip)

### 总结: ###

我们只是随意地制作了一个css3下拉菜单。谢谢你耐心看完本教程，如果你喜欢今天的主题，请使用下面的社交平台将其分享给你的朋友吧！

转载于:https://www.cnblogs.com/xiebaochun/p/3406656.html

weixin_30879169

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
制作旋转CSS3下拉菜单（whirling CSS3 dropdown menu）

原文地址：[http://www.script-tutorials.com/whirling-dropdown-menu/](http://www.script-tutorials.com/whirling-dropdown-menu/)译者：[晋文格墨](http://xiebaochun.github.io/)很多下拉菜单都...
复制链接

扫一扫