垂直下拉菜单css_CSS3垂直多色3D菜单

垂直下拉菜单css

CSS3 vertical multicolor 3D menu

CSS3垂直多色3D菜单

In our new tutorial we’ll create new stylish vertical multicolor and crossbrowser CSS3 menu with 3D animation (I use css3 transition, perspective and transform properties) and pure css3 color switcher. This is UL-LI-based menu.

在我们的新教程中，我们将创建带有3D动画(我使用css3过渡，透视图和变换属性)和纯css3颜色切换器的时尚的垂直多色和跨浏览器CSS3菜单。 这是基于UL-LI的菜单。

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML. Here is the html code of our menu. As usual – this is again UL-LI based navigation menu. The most interesting thing will be CSS styles of course.

和往常一样，我们从HTML开始。 这是我们菜单的html代码。 像往常一样–这又是基于UL-LI的导航菜单。 当然，最有趣的是CSS样式。

index.html (index.html)

<div class="container">
    <span id="clr1"></span>
    <span id="clr2"></span>
    <span id="clr3"></span>
    <span id="clr4"></span>
    <span id="clr5"></span>
    <span id="clr6"></span>
    <div class="colorScheme">
        <a href="#clr1" class="clr1"></a>
        <a href="#clr2" class="clr2"></a>
        <a href="#clr3" class="clr3"></a>
        <a href="#clr4" class="clr4"></a>
        <a href="#clr5" class="clr5"></a>
        <a href="#clr6" class="clr6"></a>
    </div>
    <ul id="nav">
        <li><a href="https://www.script-tutorials.com/">Home</a></li>
        <li><a href="#">Menu 1</a>
            <ul class="subs">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
                <li><a href="#">Submenu 4</a></li>
                <li><a href="#">Submenu 5</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 2</a>
            <ul class="subs">
                <li><a href="#">Submenu 2-1</a></li>
                <li><a href="#">Submenu 2-2</a></li>
                <li><a href="#">Submenu 2-3</a></li>
                <li><a href="#">Submenu 2-4</a></li>
                <li><a href="#">Submenu 2-5</a></li>
                <li><a href="#">Submenu 2-6</a></li>
                <li><a href="#">Submenu 2-7</a></li>
                <li><a href="#">Submenu 2-8</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a>
            <ul class="subs">
                <li><a href="#">Submenu 3-1</a></li>
                <li><a href="#">Submenu 3-2</a></li>
                <li><a href="#">Submenu 3-3</a></li>
                <li><a href="#">Submenu 3-4</a></li>
                <li><a href="#">Submenu 3-5</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
        <li><a href="#">Menu 6</a></li>
        <li><a href="https://www.script-tutorials.com/css3-vertical-multicolor-3d-menu/">Back</a></li>
    </ul>
</div>

<div class="container">
    <span id="clr1"></span>
    <span id="clr2"></span>
    <span id="clr3"></span>
    <span id="clr4"></span>
    <span id="clr5"></span>
    <span id="clr6"></span>
    <div class="colorScheme">
        <a href="#clr1" class="clr1"></a>
        <a href="#clr2" class="clr2"></a>
        <a href="#clr3" class="clr3"></a>
        <a href="#clr4" class="clr4"></a>
        <a href="#clr5" class="clr5"></a>
        <a href="#clr6" class="clr6"></a>
    </div>
    <ul id="nav">
        <li><a href="https://www.script-tutorials.com/">Home</a></li>
        <li><a href="#">Menu 1</a>
            <ul class="subs">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
                <li><a href="#">Submenu 4</a></li>
                <li><a href="#">Submenu 5</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 2</a>
            <ul class="subs">
                <li><a href="#">Submenu 2-1</a></li>
                <li><a href="#">Submenu 2-2</a></li>
                <li><a href="#">Submenu 2-3</a></li>
                <li><a href="#">Submenu 2-4</a></li>
                <li><a href="#">Submenu 2-5</a></li>
                <li><a href="#">Submenu 2-6</a></li>
                <li><a href="#">Submenu 2-7</a></li>
                <li><a href="#">Submenu 2-8</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a>
            <ul class="subs">
                <li><a href="#">Submenu 3-1</a></li>
                <li><a href="#">Submenu 3-2</a></li>
                <li><a href="#">Submenu 3-3</a></li>
                <li><a href="#">Submenu 3-4</a></li>
                <li><a href="#">Submenu 3-5</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
        <li><a href="#">Menu 6</a></li>
        <li><a href="https://www.script-tutorials.com/css3-vertical-multicolor-3d-menu/">Back</a></li>
    </ul>
</div>

步骤2. CSS (Step 2. CSS)

Here are the CSS styles of our vertical menu. Maybe you’ve noticed – that in our html we have two CSS files: layout.css and menu.css. The first one (layout.css) contains the styles of our demo page. We don’t publish these styles in the article, but if you need – you can find these styles in our package.

这是我们垂直菜单CSS样式。 也许您已经注意到–在我们的html中，我们有两个CSS文件：layout.css和menu.css。 第一个(layout.css)包含我们演示页面的样式。 我们不会在文章中发布这些样式，但是如果您需要–您可以在我们的程序包中找到这些样式。

css / menu.css (css/menu.css)

#nav,#nav ul {
    background-color: #8899AA;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    display: block;
    padding: 5px;
    position: relative;
    width: 112px;
    -moz-perspective: 200px;
    -ms-perspective: 200px;
    -webkit-perspective: 200px;
    -o-perspective: 200px;
    perspective: 200px;
}
#nav ul {
    left: -9999px;
    opacity:0;
    overflow: hidden;
    padding: 5px;
    position: absolute;
    top: -9999px;
    -moz-transform: rotateY(70deg);
    -ms-transform: rotateY(70deg);
    -o-transform: rotateY(70deg);
    -webkit-transform: rotateY(70deg);
    transform: rotateY(70deg);
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
    -o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
    transition: transform 0.3s linear, opacity 0.3s linear;
}
#nav li {
    background-color: #FFFFFF;
    position: relative;
}
#nav > li {
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#nav li a {
    background-color: #AABBCC;
    border-color: #DDDDDD #555555 #555555 #DDDDDD;
    border-style: solid;
    border-width: 1px;
    color: #000000;
    display: block;
    font-size: 15px;
    padding: 8px 10px 8px 5px;
    text-decoration: none;
    width:95px;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#nav li:hover > a {
    background-color: #8899AA;
    border-color: #8899AA;
    color: #FFFFFF;
}
#nav li:hover ul.subs {
    left: 114px;
    opacity:1;
    top: 0;
    -moz-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
#nav ul li {
    width: 100%;
}
/* colors */
.colorScheme {
    list-style: none outside none;
    overflow: hidden;
    width: 120px;
}
.colorScheme a {
    cursor: pointer;
    float: left;
    height: 30px;
    margin: 0 5px 5px;
    width: 30px;
}
.colorScheme .clr1 {
    background-color: #8899AA;
}
.colorScheme .clr2 {
    background-color: #aa889e;
}
.colorScheme .clr3 {
    background-color: #8f88aa;
}
.colorScheme .clr4 {
    background-color: #88aaaa;
}
.colorScheme .clr5 {
    background-color: #88aa8a;
}
.colorScheme .clr6 {
    background-color: #aaa188;
}
#clr1:target ~ #nav, #clr1:target ~ #nav ul {
    background-color: #8899AA;
}
#clr2:target ~ #nav, #clr2:target ~ #nav ul {
    background-color: #aa889e;
}
#clr3:target ~ #nav, #clr3:target ~ #nav ul {
    background-color: #8f88aa;
}
#clr4:target ~ #nav, #clr4:target ~ #nav ul {
    background-color: #88aaaa;
}
#clr5:target ~ #nav, #clr5:target ~ #nav ul {
    background-color: #88aa8a;
}
#clr6:target ~ #nav, #clr6:target ~ #nav ul {
    background-color: #aaa188;
}
#clr1:target ~ #nav li:hover > a {
    background-color: #8899AA;
    border-color: #8899AA;
}
#clr2:target ~ #nav li:hover > a {
    background-color: #aa889e;
    border-color: #aa889e;
}
#clr3:target ~ #nav li:hover > a {
    background-color: #8f88aa;
    border-color: #8f88aa;
}
#clr4:target ~ #nav li:hover > a {
    background-color: #88aaaa;
    border-color: #88aaaa;
}
#clr5:target ~ #nav li:hover > a {
    background-color: #88aa8a;
    border-color: #88aa8a;
}
#clr6:target ~ #nav li:hover > a {
    background-color: #aaa188;
    border-color: #aaa188;
}

#nav,#nav ul {
    background-color: #8899AA;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    display: block;
    padding: 5px;
    position: relative;
    width: 112px;
    -moz-perspective: 200px;
    -ms-perspective: 200px;
    -webkit-perspective: 200px;
    -o-perspective: 200px;
    perspective: 200px;
}
#nav ul {
    left: -9999px;
    opacity:0;
    overflow: hidden;
    padding: 5px;
    position: absolute;
    top: -9999px;
    -moz-transform: rotateY(70deg);
    -ms-transform: rotateY(70deg);
    -o-transform: rotateY(70deg);
    -webkit-transform: rotateY(70deg);
    transform: rotateY(70deg);
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
    -o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
    transition: transform 0.3s linear, opacity 0.3s linear;
}
#nav li {
    background-color: #FFFFFF;
    position: relative;
}
#nav > li {
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#nav li a {
    background-color: #AABBCC;
    border-color: #DDDDDD #555555 #555555 #DDDDDD;
    border-style: solid;
    border-width: 1px;
    color: #000000;
    display: block;
    font-size: 15px;
    padding: 8px 10px 8px 5px;
    text-decoration: none;
    width:95px;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#nav li:hover > a {
    background-color: #8899AA;
    border-color: #8899AA;
    color: #FFFFFF;
}
#nav li:hover ul.subs {
    left: 114px;
    opacity:1;
    top: 0;
    -moz-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
#nav ul li {
    width: 100%;
}
/* colors */
.colorScheme {
    list-style: none outside none;
    overflow: hidden;
    width: 120px;
}
.colorScheme a {
    cursor: pointer;
    float: left;
    height: 30px;
    margin: 0 5px 5px;
    width: 30px;
}
.colorScheme .clr1 {
    background-color: #8899AA;
}
.colorScheme .clr2 {
    background-color: #aa889e;
}
.colorScheme .clr3 {
    background-color: #8f88aa;
}
.colorScheme .clr4 {
    background-color: #88aaaa;
}
.colorScheme .clr5 {
    background-color: #88aa8a;
}
.colorScheme .clr6 {
    background-color: #aaa188;
}
#clr1:target ~ #nav, #clr1:target ~ #nav ul {
    background-color: #8899AA;
}
#clr2:target ~ #nav, #clr2:target ~ #nav ul {
    background-color: #aa889e;
}
#clr3:target ~ #nav, #clr3:target ~ #nav ul {
    background-color: #8f88aa;
}
#clr4:target ~ #nav, #clr4:target ~ #nav ul {
    background-color: #88aaaa;
}
#clr5:target ~ #nav, #clr5:target ~ #nav ul {
    background-color: #88aa8a;
}
#clr6:target ~ #nav, #clr6:target ~ #nav ul {
    background-color: #aaa188;
}
#clr1:target ~ #nav li:hover > a {
    background-color: #8899AA;
    border-color: #8899AA;
}
#clr2:target ~ #nav li:hover > a {
    background-color: #aa889e;
    border-color: #aa889e;
}
#clr3:target ~ #nav li:hover > a {
    background-color: #8f88aa;
    border-color: #8f88aa;
}
#clr4:target ~ #nav li:hover > a {
    background-color: #88aaaa;
    border-color: #88aaaa;
}
#clr5:target ~ #nav li:hover > a {
    background-color: #88aa8a;
    border-color: #88aa8a;
}
#clr6:target ~ #nav li:hover > a {
    background-color: #aaa188;
    border-color: #aaa188;
}

现场演示

结论 (Conclusion)

Hope you enjoyed with new 3D menu, don’t forget to tell thanks and leave a comment :) Good luck!

希望您喜欢新的3D菜单，别忘了感谢和发表评论:)祝您好运！

翻译自: https://www.script-tutorials.com/css3-vertical-multicolor-3d-menu/

垂直下拉菜单css