Tạo Vertical menu hiệu ứng 3D với CSS3

css tips, css3, thiet ke web, thu thuat css, vertical menu

Trong bài viết này chúng ta sẽ tạo một menu theo phong cách mới với hiệu ứng 3D, và điều đặc biệt ở đây là bạn có thể thay đổi màu nền của menu theo ý muốn mà không cần phải sử dụng một đoạn javacript nào cả.

Bước 1 : Tạo menu với các phần tử HTML

<div>



<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>

<a href="#clr1"></a>

<a href="#clr2"></a>

<a href="#clr3"></a>

<a href="#clr4"></a>

<a href="#clr5"></a>

<a href="#clr6"></a>

</div>



<ul id="nav">

<li><a href="http://sharecode.vn/">Home</a></li>

<li><a href="#">Menu 1</a>

<ul>

<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>

<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>

<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="http://sharecode.vn/">Back</a></li>

</ul>



</div>

Bước 2 : CSS styles

#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;

}

Hy vọng bạn sẽ thấy thích menu 3D này,

 

 HỖ TRỢ TRỰC TUYẾN