Hot Post

Metro UI Drop Down Menu với hiệu ứng Sliding Tiles

4/27/2015 A+ a-
Chia sẻ Facebook Blog This! Chia sẻ Email
Bình luận
0

Metro UI Drop Down Menu With Sliding Tiles Effect

Một Dropdownmenu với hiệu ứng hover tuyệt đẹp, Iris Tips hy vọng bạn thích nó

Metro UI Drop Down Menu với hiệu ứng Sliding Tiles

Bước 1: Thêm đoạn CSS sau trước thẻ ]]></b:skin> 
 
/* Metro UI DropDown Menu iris-tips.blogspot.com*/
.mjn-tab1{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivbWTLmkiTI9uJ4ltDAsbuksrFePCygKnx_4sTcrMFQU86aj2FZzu6DG5aR81g7DKgd3QDd6ZAaFVYtYNgc9Nsrvl-QIIaazY7h8D9DRoMZF7dr_POpKKvixji0ZBw9mBrABkFR-Gd_pI/h120/home.png) no-repeat center center #4d90fe}
.tab1:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivbWTLmkiTI9uJ4ltDAsbuksrFePCygKnx_4sTcrMFQU86aj2FZzu6DG5aR81g7DKgd3QDd6ZAaFVYtYNgc9Nsrvl-QIIaazY7h8D9DRoMZF7dr_POpKKvixji0ZBw9mBrABkFR-Gd_pI/h120/home.png) no-repeat center center #3682FC}
.mjn-fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwDsibd9M8HlogEPzpY6cvwB74uKCd5R5Xm7HSjuh5NOaH3HdQD7KOfSEPnKQsZUBGkha8gABpYx3ndfVptdb659fwfWFQuPJ2bvT5xClbo-jKu6oiRhFp643fCXeuZcz4iRrXjpVNmZQ/s1600/facebook2.png) no-repeat center center #2A82D9}
.mjn-fb:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwDsibd9M8HlogEPzpY6cvwB74uKCd5R5Xm7HSjuh5NOaH3HdQD7KOfSEPnKQsZUBGkha8gABpYx3ndfVptdb659fwfWFQuPJ2bvT5xClbo-jKu6oiRhFp643fCXeuZcz4iRrXjpVNmZQ/s1600/facebook2.png) no-repeat center center #1f69b3}
.mjn-tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFNT3DyCV7KUkUM_Q7BA1-2N8mWFqicFyfMt11YWB6yR-_ljn8qcWuuqQTX0w1us_NvI76oR5BLVga6Y1P0GJsf5rZQjfWPmCre-xqw-5pL0nl8gATw_1_KKcBu40a4_YDMcVvNFlQ6sY/h120/twitter-bird-dark-bgs.png) no-repeat center center #0CA8F0}
.mjn-tw:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFNT3DyCV7KUkUM_Q7BA1-2N8mWFqicFyfMt11YWB6yR-_ljn8qcWuuqQTX0w1us_NvI76oR5BLVga6Y1P0GJsf5rZQjfWPmCre-xqw-5pL0nl8gATw_1_KKcBu40a4_YDMcVvNFlQ6sY/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5}
.mjn-g{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEPMeMr5ZWVF2go1C3dM2X5-gfIZKVmOs-XhK3cwh-HgSjBGlt_3XBh-z5xNbcXeV6YwyW3ZRSzbXXJxvE7ErefpCFzTx6SbWTh50iXYZIDt7rFy4ubBeKXQcEzrcKzPYYMILpA-yO-NI/s1600/google+plus2.png) no-repeat center center #DC321E}
.mjn-g:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEPMeMr5ZWVF2go1C3dM2X5-gfIZKVmOs-XhK3cwh-HgSjBGlt_3XBh-z5xNbcXeV6YwyW3ZRSzbXXJxvE7ErefpCFzTx6SbWTh50iXYZIDt7rFy4ubBeKXQcEzrcKzPYYMILpA-yO-NI/s1600/google+plus2.png) no-repeat center center #c53727}
.mjn-rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkrEd7aN86QZGqrCsidlCjYzBOGhkiv0sPoaDWv4TUO2j0aGwm94c3d-5RfiZhKx-mT6RrMghooSiJGGCt86ASTvZa4gNlYloln5wWteJfkpIcoNMEyAvezjNLBLkIhnTU1zvUtUldwY/s1600/feed2.png) no-repeat center center #E9A01C}
.mjn-rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkrEd7aN86QZGqrCsidlCjYzBOGhkiv0sPoaDWv4TUO2j0aGwm94c3d-5RfiZhKx-mT6RrMghooSiJGGCt86ASTvZa4gNlYloln5wWteJfkpIcoNMEyAvezjNLBLkIhnTU1zvUtUldwY/s1600/feed2.png) no-repeat center center #F9A914}
.mjn-tab2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA1d-ObznX_nLt0kUAt9cs9fjjZUxz_J6cwpfHIsjGFfVFsnL1YvhSCQlRGmjZeHzmgi4PbhtL32paPCqCJmWhi8dUAoshlxH1x_3__KT09Oj7S9YRVfi7emLs5zVzE3_onJx-5xLfyO8/h120/Tag.png) no-repeat center center #35aa47}
.mjn-tab2:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA1d-ObznX_nLt0kUAt9cs9fjjZUxz_J6cwpfHIsjGFfVFsnL1YvhSCQlRGmjZeHzmgi4PbhtL32paPCqCJmWhi8dUAoshlxH1x_3__KT09Oj7S9YRVfi7emLs5zVzE3_onJx-5xLfyO8/h120/Tag.png) no-repeat center center #1d943b}
.mjn-tab2sub{background:#35aa47}
.mjn-tab2sub:hover{background:#1d943b}
.mjn-tab3{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijNR1FmvS3NllCay14qbL0op66DNPQBYpNmfXGecJem28hv5M8IRB2yZurCFpRNhOGjvzYfuae0F-qunIaLDH-T1_lIjFr9x1KyS4NBj9H91k-0k2L8cu9Gk8WAjB7uOzahmeLUrpqh6E/h120/archives.png) no-repeat center center #852b99}
.mjn-tab3:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijNR1FmvS3NllCay14qbL0op66DNPQBYpNmfXGecJem28hv5M8IRB2yZurCFpRNhOGjvzYfuae0F-qunIaLDH-T1_lIjFr9x1KyS4NBj9H91k-0k2L8cu9Gk8WAjB7uOzahmeLUrpqh6E/h120/archives.png) no-repeat center center #6d1b81}
.mjn-tab3sub{background:#852b99;height:70px}
.mjn-tab3sub:hover{background:#6d1b81}
.mjn-tab4{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6g9DJ1qF3F1FV8kByzLG33FWi46XtKThtbBAUv104a3GJm1YMhyphenhyphenhfqLWHL_iIux2HNWJCHhk3VB0BOx1rC2SUbEYSy-dKjX8xWRCN7YtXxa36TOC3ovSiQcD4FBZW0LjCR_rKGayMih8/h120/contact.png) no-repeat center center #d84a38;}
.mjn-tab4:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6g9DJ1qF3F1FV8kByzLG33FWi46XtKThtbBAUv104a3GJm1YMhyphenhyphenhfqLWHL_iIux2HNWJCHhk3VB0BOx1rC2SUbEYSy-dKjX8xWRCN7YtXxa36TOC3ovSiQcD4FBZW0LjCR_rKGayMih8/h120/contact.png) no-repeat center center #c53727}
.mjn-tab4sub{background:#d84a38;}
.mjn-tab4sub:hover{background:#c53727}
.mjn-tab5{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt-EGrDdh4a434e-GSW34QuWgiFAgy5ajGmNdBfqahp1Ll23inc-3MAPFRYhxaRAi_-z0F42VtNTineeZ-V5qN5Y5C2SD6QlqdtZ7QA0Dp5eZclW0n09fVU3ZGXT9NrTbcdPSi9K4zxSQ/h120/Menu.png) no-repeat center center #555}
.mjn-tab5:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt-EGrDdh4a434e-GSW34QuWgiFAgy5ajGmNdBfqahp1Ll23inc-3MAPFRYhxaRAi_-z0F42VtNTineeZ-V5qN5Y5C2SD6QlqdtZ7QA0Dp5eZclW0n09fVU3ZGXT9NrTbcdPSi9K4zxSQ/h120/Menu.png) no-repeat center center #222}
body{background:none;margin:0;padding:0;font-family:Helvetica,Arial,sans-serif;font-size:11px}
.mjn-metro-menu{position:relative;background:none;width:500px;height:90px;border:none;margin:20px auto;padding:20px;float:left}
/* navigation menu styles - main styles */
ul.navi{position:relative;z-index:100;padding:0;margin:0 0 0 60px;list-style:none;width:auto;height:30px}
ul.navi > li{width:70px;height:70px;position:absolute;left:0;top:0;-moz-transition:-moz-transform 0.5s ease-in-out;-ms-transition:-ms-transform 0.5s ease-in-out;-o-transition:-o-transform 0.5s ease-in-out;-webkit-transition:-webkit-transform 0.5s ease-in-out;transition:transform 0.5s ease-in-out}
ul.navi a{display:block;width:70px;height:70px;position:absolute;left:0;top:0;line-height:30px;text-align:center;text-decoration:none}
ul.navi a img{border:0}
ul.navi a span{position:relative;top:30%;font:14px Segoe UI,Helvetica,Arial,sans-serif;color:#fff}
/* top line - hover styles */
ul.navi:hover{height:200px}
ul.navi:hover li#n1{-moz-transform:translatex(0px);-ms-transform:translatex(0px);-o-transform:translatex(0px);-webkit-transform:translatex(0px);transform:translatex(0px)}
ul.navi:hover li#n2{-moz-transform:translatex(90px);-ms-transform:translatex(90px);-o-transform:translatex(90px);-webkit-transform:translatex(90px);transform:translatex(90px)}
ul.navi:hover li#n3{-moz-transform:translatex(180px);-ms-transform:translatex(160px);-o-transform:translatex(160px);-webkit-transform:translatex(160px);transform:translatex(180px)}
ul.navi:hover li#n4{-moz-transform:translatex(260px);-ms-transform:translatex(270px);-o-transform:translatex(270px);-webkit-transform:translatex(270px);transform:translatex(270px)}
ul.navi:hover li#n5{-moz-transform:translatex(360px);-ms-transform:translatex(360px);-o-transform:translatex(360px);-webkit-transform:translatex(360px);transform:translatex(360px)}
/* submenus - common styles */
ul.sub{padding:0;margin:0;list-style:none;width:100%;height:200px auto;position:absolute;left:0;top:0;z-index:-1;opacity:0;-moz-transition:opacity 0s linear 1s;-ms-transition:opacity 0s linear 1s;-o-transition:opacity 0s linear 1s;-webkit-transition:opacity 0s linear 1s;transition:opacity 0s linear 1s}
ul.sub li{width:80px auto;height:80px;position:absolute;left:0;top:0;z-index:-1;-moz-transition:-moz-transform 0.5s ease-in-out 0.5s;-ms-transition:-ms-transform 0.5s ease-in-out 0.5s;-o-transition:-o-transform 0.5s ease-in-out 0.5s;-webkit-transition:-webkit-transform 0.5s ease-in-out 0.5s;transition:transform 0.5s ease-in-out 0.5s}
/* submenus - hover styles */
ul.navi > li:hover ul{opacity:1;-moz-transition:opacity 0s linear 0.5s;-ms-transition:opacity 0s linear 0.5s;-o-transition:opacity 0s linear 0.5s;-webkit-transition:opacity 0s linear 0.5s;transition:opacity 0s linear 0.5s}
ul.navi li:hover ul li.l{-moz-transform:translatex(-70px) translatey(90px);-ms-transform:translatex(-70px) translatey(90px);-o-transform:translatex(-70px) translatey(90px);-webkit-transform:translatex(-70px) translatey(90px);transform:translatex(-70px) translatey(90px)}
ul.navi li:hover ul li.c{-moz-transform:translatex(2px) translatey(90px);-ms-transform:translatex(2px) translatey(90px);-o-transform:translatex(2px) translatey(90px);-webkit-transform:translatex(2px) translatey(90px);transform:translatex(2px) translatey(90px)}
ul.navi li:hover ul li.r{-moz-transform:translatex(74px) translatey(90px);-ms-transform:translatex(74px) translatey(90px);-o-transform:translatex(74px) translatey(90px);-webkit-transform:translatex(74px) translatey(90px);transform:translatex(74px) translatey(90px)}
ul.navi li:hover ul li.r1{-moz-transform:translatex(146px) translatey(90px);-ms-transform:translatex(146px) translatey(90px);-o-transform:translatex(146px) translatey(90px);-webkit-transform:translatex(146px) translatey(90px);transform:translatex(146px) translatey(90px)}

Bước 2: Vào Bố cục >> Thêm tiện ích HTML/Javascript thêm đoạn code bên dưới vào 
 <ul class="navi">
 <li id="n1"><a class="mjn-tab1" href="http://iris-tips.blogspot.com/" title="Home" ></a>
<!-- defining sub menu elements --><ul class="sub">
 <li class="l"><a class="mjn-fb" href="https://www.facebook.com/mjntech" title="Like Us on Facebook"></a></li>
 <li class="c"><a class="mjn-tw" href="https://www.twitter.com/manjunathg17" title="Follow Us on Twitter"></a></li>
  <li class="r"><a class="mjn-g" href="https://plus.google.com/u/0/116155905562588571799"></a></li>
<li class="r1"><a class="mjn-rss" href="https://feeds.feedburner.com/mjntech"></a></li>
</ul>
</li>
<li id="n2"><a class="mjn-tab2" href="http://iris-tips.blogspot.com/search/label/" title="Tags" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab2sub" href="http://iris-tips.blogspot.com/search/label/Windows"title="Windows"><span>Windows</span></a></li>
<li class="c"><a class="mjn-tab2sub" href="http://iris-tips.blogspot.com/search/label/Blogger" title="Blogger"><span>Blogger</span></a></li>
 <li class="r"><a class="mjn-tab2sub" href="http://iris-tips.blogspot.com/search/label/CSS3" title="CSS/HTML"><span>CSS/HTML</span></a></li>
<li class="r1"><a class="mjn-tab2sub" href="http://iris-tips.blogspot.com/search/label/Softwares" title="Softwares"><span>Softwares</span></a></li>
</ul>
</li>
<li id="n3"><a class="mjn-tab3" href="http://iris-tips.blogspot.com/2015/" title="Blog Archive" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab3sub" href="http://iris-tips.blogspot.com/2015/"><span>2013</span></a></li>
<li class="c"><a class="mjn-tab3sub" href="mjntechtips.blogspot.in/2015/"><span>2012</span></a></li>
<li class="r"><a class="mjn-tab3sub" href="http://iris-tips.blogspot.com/2015/"><span>2011</span></a></li>
<li class="r1"><a class="mjn-tab3sub" href="http://iris-tips.blogspot.com/2015/"><span>2010</span></a></li>
</ul>
</li>
<li id="n4"><a class="mjn-tab4" href="http://iris-tips.blogspot.com/p/blog-page.html" title="Contact Us" ></a>
<ul class="sub">
<li class="l"><a class="mjn-tab4sub" href="#"><span>LINK 1</span></a></li>
<li class="c"><a class="mjn-tab4sub" href="#"><span>LINK 2</span></a></li>
<li class="r1"><a class="mjn-tab4sub" href="#"><span>LINK 3</span></a></li>
<li class="r"><a class="mjn-tab4sub" href="#"><span>LINK 4</span></a></li>
</ul>
</li>
<li id="n5"><a class="mjn-tab5" href="#" ><span></span></a>
</li>
</ul>
<div style="clear:both"></div>
</div>


See the Pen LVEzQW by Iris Tips (@IrisTips) on CodePen.


Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips
Iris Tips

Đăng ký nhận tin khuyến mãi, thủ thuật mới

Mẹo nhỏ khi bình luận
  • - Để viết chữ in đậm hãy sử dụng thẻ <b>chữ in đậm</b>
  • - Để viết chữ in nghiêng hãy sử dụng thẻ <i>chữ in nghiêng</i>
  • - Để viết code hãy sử dụng công cụ Conversion ở bên dưới để mã hóa và sau đó dán vào khung bình luận.
  • - Để chèn hình ảnh, video chỉ cần dán link trực tiếp của hình ảnh hoặc video vào khung bình luận (hỗ trợ: jpg, gif, png, bmp, Youtube).
  • - Bạn có thể upload hình ảnh, tập tin trực tiếp từ máy tính bằng cách sử dụng công cụ Up ảnh hoặc Up file ở bên dưới.
  • - Bạn có thể check vào ô Notify me ở khung nhận xét để nhận thông báo qua email khi ai đó trả lời bình luận của bạn.

0 Response to "Metro UI Drop Down Menu với hiệu ứng Sliding Tiles"

Đăng nhập bằng Google


Trở thành người đầu tiên bình luận cho bài viết này!

Đăng ký: Đăng Nhận xét (Atom)