Drop Menu CSS3 Style Của DuyPham.info

Giới Thiệu

Đây là drop menu sử dụng css3 trên blog duypham.info. Menu được tác giả thiết kế với giao diện đơn giản dễ nhìn và tích hợp responsive. Nhân tiện bạn Yêu Truyện Ngắn yêu cầu mình chia sẻ làm cách nào để tạo menu dạng này mình xin được chia sẻ đến các độc giả của TrollVL. Hi vọng sẽ giúp được phần nào trong quá trình thiết kế blog. Mong rằng mọi người xem bài hướng dẫn này làm tài liệu tham khảo để phát triển kiến thức của mình chứ đừng chia sẻ rộng rãi như chính sản phẩm của mình bởi vì tất cả code mình sử dụng trong bài viết này đều lấy từ Duypham.info

Yêu Cầu

Reply

Yêu Truyện Ngắn

8/10/13

P/S: Mình có ghé cái blog này http://blog.duypham.info/ bằng điện thoại, thấy cái menu Chủ đề và Đánh dấu rất hay, hiện thị vừa đẹp vừa hơi bị pro (y hệt mấy web chuyên nghiệp) trên điện thoại. Nếu được, Huy hướng dẫn cho mình cũng như các bạn làm được không

Demo

Demo Live

Thực Hiện

Bước 1: Thêm CSS sau vào ]]></b:skin>

#nav{padding:15px 0 0;height:46px}
#menu{float:left;width:472px}
#menu a{display:block}
#menu a:hover{text-decoration:none}
#menu .title{position:relative;z-index:100;padding:5px 10px;font-size:14px;line-height:20px}
#menu li{float:left}
#menu li:hover .title,#menu li .nav{background:#2c2a28}
#menu li:hover .title{color:#ddd}
#menu li:hover .nav{left:auto}
#menu li .nav{position:absolute;z-index:101;left:-999em}
#menu li .nav a{color:#ddd}
#menu li .nav a:hover{color:#066}
#menu li .nav h3{margin:5px 10px;color:#666}
#menu li .nav li{width:100%}
#menu li .nav li.links{width:100%!important}
#menu li .nav .border-top{border-top:1px solid #444}
#menu li .nav .border-right{border-right:1px solid #444}
#menu li .nav .border-left{border-left:1px solid #444}
#menu .horizontal{padding:5px 0}
#menu .horizontal a{margin:5px}
#menu .horizontal ul{padding:0 5px}
#menu .vertical{padding:0 10px}
#menu .vertical a{margin:5px 0}
#menu .vertical ul{float:left;padding:5px 0;width:100%}
#menu .cloumn{width:150px}
#menu .cloumn3{width:340px}
.cloumn3 li {float: left;width: 33%!important;}
li {text-align: -webkit-match-parent;}
ul {list-style-type: none;}
.left {float: left;}
.right{float:right}
.fullwidth {min-width: 930px;height: 100%;}
@media screen and (max-width:930px){
.fullwidth{min-width:0}
#search,#FollowByEmail1,#BlogArchive1,#PageList1,#info,.separate,#rc .name{display:none}
}
@media screen and (max-width:658px){
#menu,#menu .cloumn,#menu .cloumn3{width:auto}
#header-wrapper,#copyright-wrapper{padding:0 20px}
}

Bước 2: Chèn code sau vào vị trí bạn muốn hiển thị Menu

<div id="menu">
<ul>
<li onmouseover="">
<h2 class="title">Chủ Đề <small>&#9660;</small></h2>
<div class="nav horizontal">
<div class="left cloumn">
<h3>Facebook</h3>
<ul>
<li><a href="http://www.trollvl.com/2013/10/Blocky-text.html"  title="Blocky Text">Blocky Text</a></li>
<li><a href="http://www.trollvl.com/2013/09/Animated-status-for-facebook.html"  title="Đăng Ảnh Động Lên Status">Animated</a></li>
</ul>
</div>
<div class="left cloumn3 border-left border-right">
<h3>Thủ Thuật Blogger</h3>
<ul>
<li><a href="http://www.trollvl.com/search/label/Tool%20For%20Blogger?max-results=5"  title="Tools For Blogger">Blogger Tools</a></li>
<li><a href="http://www.trollvl.com/search/label/Blogger%20Comments"  title="Comment">Comment</a></li>
<li><a href="http://www.trollvl.com/search/label/Widget%20Blogger?max-results=5"  title="Widget">Widget</a></li>
<li><a href="http://www.trollvl.com/2012/12/nen-css-de-cai-thien-toc-do-cua-blog.html"  title="Nén CSS">Nén CSS</a></li>
<li><a href="http://www.trollvl.com/2012/11/online-iframe-generator-tool-for.html"  title="iFrame Tool">iFrame Tool</a></li>
<li><a href="http://www.trollvl.com/2012/10/ma-hoa-website.html"  title="Mã Hóa HTML">Mã Hóa HTML</a></li>
<li><a href="http://www.trollvl.com/2012/11/html-editor.html"  title="Th&#7917; Mã HTML">HTML Test</a></li>
<li class="links"><a class="right button small" href="http://www.trollvl.com/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Blogspot"  title="Thủ Thuật Blogger">Xem tất cả</a></li>
</ul>
</div>
<div class="left cloumn">
<h3>Photoshop</h3>
<ul>
<li><a href="http://www.trollvl.com/search/label/Hi%E1%BB%87u%20%E1%BB%A8ng%20Ch%E1%BB%AF"  title="Hiệu Ứng Chữ">Hiệu Ứng Chữ</a></li>
</ul>
</div>
</div>
</li>
<li onmouseover="">
<h2 class="title">Truyện Cười <small>&#9660;</small></h2>
<div class="nav vertical cloumn">
<ul>
<li><a href="http://www.trollvl.com/search/label/Truy%E1%BB%87n%20C%C6%B0%E1%BB%9Di%20Ng%C6%B0%E1%BB%9Di%20L%E1%BB%9Bn"   title="Truyện Cười Người Lớn">Người Lớn</a></li>
<li><a href="http://www.trollvl.com/search/label/Truy%E1%BB%87n%20C%C6%B0%E1%BB%9Di%20V%C3%B4va"   title="Truyện Cười Vô Va">Vô Va</a></li>
<li><a href="http://www.trollvl.com/search/label/Nh%E1%BB%AFng%20c%C3%B4%20g%C3%A1i%20t%C3%B3c%20v%C3%A0ng%20hoe"   title="Tóc Vàng Hoe">Tóc Vàng Hoe</a></li>
<li><a href="http://www.trollvl.com/search/label/T%C3%ACnh%20Y%C3%AAu%20C%C6%B0%E1%BB%9Di"   title="Truyện Cười Về Tình Yêu">Tình Yêu</a></li>
<li><a href="http://www.trollvl.com/search/label/Truy%E1%BB%87n%20c%C6%B0%E1%BB%9Di"   title="Truyện Cười Tổng Hợp">Tổng Hợp</a></li>
</ul>
</div>
</li>
</ul>
</div>

Thay đổi toàn bộ link và câu từ cho phù hợp với blog/website của bạn. Chúc bạn thành công!

Style của Duy Phạm