CSS3 Animated Dropdown Menu cho blog

LIVE DEMO

Bài viết này mình tiếp tục chia sẻ một style dropdown menu đẹp mắt dành cho Blogger, hoàn toàn bằng CSS3 và hiển thị dạng animated. Sau đây là các bước tạo menu:

Bước 1: Tại trang quản trị blog, các bạn vào Bố cục, tạo một tiện ích HTML/Javascript.

Bước 2: Paste đoạn code sau vào phần nội dung và lưu lại:

<!--CSS3 Menu by kjmagic.blogspot.com-->
<style type="text/css">
/* CSS3 Menu :: kjmagic.blogspot.com */
#css3_menu{width:960px;margin:0 auto;border:1px solid #333;border-top:none!important;background-color:#333;-moz-box-shadow:0 1px 1px #777,0 1px 0 #666 inset;-webkit-box-shadow:0 1px 1px #777,0 1px 0 #666 inset;box-shadow:0 1px 1px #777,0 1px 0 #666 inset}
#css3_menu,#css3_menu ul{margin:0;padding:0;list-style:none}
#css3_menu:before,#css3_menu:after{content:"";display:table}
#css3_menu:after{clear:both}
#css3_menu li{float:left;border-right:1px solid #111;-moz-box-shadow:1px 0 0 #444;-webkit-box-shadow:1px 0 0 #444;box-shadow:1px 0 0 #444;position:relative}
#css3_menu a{float:left;padding:15px 30px;color:#979797;letter-spacing:4;text-transform:inherit;font-family:Verdana,Helvetica;font-size:14px;text-decoration:none;text-shadow:0 1px 0 #000}
#css3_menu li a:hover{background:#333}
#css3_menu li:hover > a{color:#fafafa}
*html #css3_menu li a:hover{ color:#fafafa}
#css3_menu ul{margin:20px 0 0 0;_margin:0; opacity:0;visibility:hidden;position:absolute;top:47px;left:0;z-index:1;background:#333;-moz-box-shadow:0 -1px rgba(255,255,255,.3);-webkit-box-shadow:0 -1px 0 rgba(255,255,255,.3);box-shadow:0 -1px 0 rgba(255,255,255,.3);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
#css3_menu li:hover > ul{opacity:1;visibility:visible;margin:0}
#css3_menu ul ul{top:0;left:174px;margin:0 0 0 20px;_margin:0; -moz-box-shadow:-1px 0 0 rgba(210,210,210,.2);-webkit-box-shadow:-1px 0 0 rgba(210,210,210,.2);box-shadow:-1px 0 0 rgba(210,210,210,.2)}
#css3_menu ul li{float:none;display:block;border:0;_line-height:0; -moz-box-shadow:0 1px 0 #111,0 2px 0 #666;-webkit-box-shadow:0 1px 0 #111,0 2px 0 #666;box-shadow:0 1px 0 #111,0 2px 0 #666}
#css3_menu ul a{padding:12px;width:150px;color:#979797;_height:12px; display:block;white-space:nowrap;float:none;text-transform:none}
#css3_menu ul a:hover{background-color:#3d3d3d;color:#fff}
/* CSS3 Menu :: kjmagic.blogspot.com */
</style>
<ul id="css3_menu"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Blogger</a> 
        <ul> 
        <li><a href="#">Widgets</a></li> 
        <li><a href="#">Plugin</a> 
        <ul> 
        <li> <a href="#">Facebook</a></li> 
        <li> <a href="#">Twitter</a></li> 
        <li> <a href="#">Pinterest</a></li> 
        <li> <a href="#">Google Plus</a></li> 
        <li> <a href="#">Adsense</a></li> 
        <li> <a href="#">Custom</a> 
        <ul> 
        <li> <a href="#">Hello Bar</a></li> 
        <li> <a href="#">Earning Boster</a></li> 
        <li> <a href="#">Clock</a></li> 
        </ul> 
        </li> 
        </ul> 
        </li> 
        <li><a href="#">Tips Tricks</a></li> 
        <li><a href="#">Blogger News</a></li> 
        <li><a href="#">Blogger Help</a></li> 
        </ul>    
        </li> 
        <li><a href="#">Template</a> 
        <ul> 
        <li><a href="#">Blogger</a> 
        <ul> 
        <li><a href="#">By Column</a> 
        <ul> 
        <li><a href="#">1 Column</a></li> 
        <li><a href="#">2 Column</a></li> 
        <li><a href="#">3 Column</a></li> 
        </ul> 
        </li> 
        <li><a href="#">By Color</a> 
        <ul> 
        <li><a href="#">Red</a></li> 
        <li><a href="#">Blue</a></li> 
        <li><a href="#">Orange</a></li> 
        </ul> 
        </li> 
        <li><a href="#">By Width</a></li> 
        </ul> 
        </li> 
        
        <li><a href="#">WordPress</a></li> 
        </ul> 
        </li> 
        <li><a href="#">Faqs</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contact</a></li> 
    </ul>
<!--/CSS3 Menu by kjmagic.blogspot.com-->

Chỉnh sửa tên link (Home, Blogger, Widgets...) và những dấu # thành link của bạn.

Chúc các bạn thành công !