Minimalistic Animated Menu - tinh tế và phong cách

Với sở thích bản thân là yêu thích sự đơn giản, yêu màu sắc chính vì vậy sự ra đời của Windows 8 đã hoàn toàn thuyết phục mình.

Trong một lần tình cờ dạo quanh mình đã bắt gặp được một mẫu menu cực kỳ ấn tượng từ phong cách cho đến màu sắc được chia sẻ từ trang blog http://premium-stuff-guru.blogspot.com/

Đây là mẫu menu mình thích nhất trong số những mẫu menu mình đã gặp do hoàn toàn chỉ dùng css. "I love color!"

Demo

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.nav{height:160;display:inline-block}
.nav>li{display:block;float:left}
.nav>li>div{position:relative;width:120px;height:160px;margin-right:5px;overflow:hidden;cursor:pointer;text-align:center;background:#00afdd;box-shadow:0 1px 2px rgba(30,30,30,.3);-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;-ms-transition:all .3s}
.nav div:hover{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);background:#fff;z-index:5}
.nav>li>div>a{top:0;position:relative;display:block;height:100px;padding-top:65px;font-family:'Terminal Dosis',sans-serif;text-decoration:none;font-size:20px;font-weight:normal;color:#fff;-webkit-transition:all .3s;-ms-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s}
.nav:hover div>a{opacity:.3;text-shadow:0 0 5px #fff,0 0 5px #fff,0 0 9px #fff}
.nav div>a:hover,.nav li:hover a{top:-4px;text-shadow:none;opacity:1;font-size:23px;color:#29cef1}
.nav .nested a:hover,.nav .nested:hover a{top:-60px;height:160px}
.nav ul{position:absolute;top:-9999px;margin:auto;display:block;width:120px;text-align:center;opacity:0;-webkit-transition:.5s opacity ease-out;-ms-transition:.5s opacity ease-out;-moz-transition:.5s opacity ease-out;-o-transition:.5s opacity ease-out}
.nav li div:hover ul{top:35px;color:#fff;opacity:1}
.nav div:hover ul li a{color:#00afdd;font-family:'Droid Sans',Arial,Helvetica,sans-serif;font-size:12px;text-decoration:none;-webkit-transition:color .3s ease-out;-ms-transition:color .3s ease-out;-moz-transition:color .3s ease-out;-o-transition:color .3s ease-out}
.nav div ul li a:hover{color:#000}
.nav>li>.blue-white{background:#00afdd}
.nav>li>.blue-white:hover{background:white}
.nav>li>.blue-white>a{color:#fff}
.nav>li>.blue-white:hover a{color:#00afdd}
.nav .blue-white ul li a:hover{color:black}
.nav>li>.brown-white{background:#a33724}
.nav>li>.brown-white:hover{background:white}
.nav>li>.brown-white>a{color:#fff}
.nav>li>.brown-white:hover a{color:#a33724}
.nav .brown-white ul li a:hover{color:black}
.nav>li>.orange-white{background:#eb8606}
.nav>li>.orange-white:hover{background:white}
.nav>li>.orange-white>a{color:#fff}
.nav>li>.orange-white:hover a{color:#eb8606}
.nav .orange-white ul li a:hover{color:black}
.nav>li>.yellow-white{background:#e9c405}
.nav>li>.yellow-white:hover{background:white}
.nav>li>.yellow-white>a{color:#fff}
.nav>li>.yellow-white:hover a{color:#e9c405}
.nav .yellow-white ul li a:hover{color:black}
.nav>li>.red-white{background:#dc3306}
.nav>li>.red-white:hover{background:white}
.nav>li>.red-white>a{color:#fff}
.nav>li>.red-white:hover a{color:#dc3306}
.nav .red-white ul li a:hover{color:black}
.nav>li>.green-white{background:#58ad0b}
.nav>li>.green-white:hover{background:white}
.nav>li>.green-white>a{color:#fff}
.nav>li>.green-white:hover a{color:#58ad0b}
.nav .green-white ul li a:hover{color:black}
.nav>li>.pink-white{background:#cf2f4c}
.nav>li>.pink-white:hover{background:white}
.nav>li>.pink-white>a{color:#fff}
.nav>li>.pink-white:hover a{color:#cf2f4c}
.nav .pink-white ul li a:hover{color:black}
.nav>li>.turqoise-white{background:#59b5a6}
.nav>li>.turqoise-white:hover{background:white}
.nav>li>.turqoise-white>a{color:#fff}
.nav>li>.turqoise-white:hover a{color:#59b5a6}
.nav .turqoise-white ul li a:hover{color:black}
.nav>li>.black-white{background:#000}
.nav>li>.black-white:hover{background:white}
.nav>li>.black-white>a{color:#fff}
.nav>li>.black-white:hover a{color:black}
.nav .black-white ul li a:hover{color:#1cbae8}

Bước 2: Tìm vị trí thích hợp đặt menu trong template của bạn và thêm đoạn mã sau:

<ul class="nav">
<li>
<div class="green-white">
<a href="#">Green</a>
</div>
</li>
<li>
<div class="turqoise-white nested">
<a href="#">Turqoise</a>
<br />
<ul>
<li><a href="#">This is</a></li>
<li><a href="#">One</a></li>
<li><a href="#">Of the</a></li>
<li><a href="#">Nine</a></li>
<li><a href="#">Color Schemes</a></li>
</ul>
</div>
</li>
<li>
<div class="blue-white">
<a href="#">Blue</a>
</div>
</li>
<li>
<div class="pink-white">
<a href="#">Pink</a>
</div>
</li>
<li>
<div class="red-white nested">
<a href="#">Red</a>
<br />
<ul>
<li><a href="#">I think</a></li>
<li><a href="#">That</a></li>
<li><a href="#">Red is</a></li>
<li><a href="#">My Favourite</a></li>
<li><a href="#">Colour :)</a></li>
</ul>
</div>
</li>
<li>
<div class="brown-white">
<a href="#">Brown</a>
</div>
</li>
<li>
<div class="orange-white">
<a href="#">Orange</a>
</div>
</li>
<li>
<div class="yellow-white">
<a href="#">Yellow</a>
</div>
</li>
<li>
<div class="black-white nested">
<a href="#">Black</a>
<br />
<ul>
<li><a href="#">Finally!</a></li>
<li><a href="#">This</a></li>
<li><a href="#">Is the last</a></li>
<li><a href="#">Colour</a></li>
<li><a href="#">Scheme..</a></li>
<li><a href="#">For now :)</a></li>
</ul>
</div>
</li>
</ul>

Saver lại template của bạn và tận hưởng.

Lưu ý: Muốn có font giống như trong Demo bạn hãy dán đoạn code sau ngay dưới thẻ <head>

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css'/>