Ring ring

CuDemVN.Wap.Sh

- GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam
- AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam
- HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

Share CSS Menu Drop Responsiver Cực Đẹp

Admin* RoSino18k *
* 26-09-2015
Chả là sáng nay mình mướn thiết kế cái drop để đưa vào template smatphone nhưng do không hợp với wap minh nên mình tách ra share
hi vọng rằng nó sẽ có ích cho nhiều bạn muốn học CSS

Copy và chèn code này vào style Wap bạn
#dropmenu_md ul,
#dropmenu_md li,
#dropmenu_md span,
#dropmenu_md a {
margin : 0;
padding : 0;
position : relative;
}
#dropmenu_md {
line-height: 1;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background : #141414;
background : -moz-linear-gradient(top, #333333 0%, #141414 100%);
background : -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background : -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background : -o-linear-gradient(top, #333333 0%, #141414 100%);
background : -ms-linear-gradient(top, #333333 0%, #141414 100%);
background : linear-gradient(to bottom, #333333 0%, #141414 100%);
border-bottom: 2px solid #0fa1e0;
width : auto;
}
#dropmenu_md:after,
#dropmenu_md ul:after {
content : '';
display : block;
clear : both;
}
#dropmenu_md a {
background : #141414;
background : -moz-linear-gradient(top, #333333 0%, #141414 100%);
background : -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
background : -webkit-linear-gradient(top, #333333 0%, #141414 100%);
background : -o-linear-gradient(top, #333333 0%, #141414 100%);
background : -ms-linear-gradient(top, #333333 0%, #141414 100%);
background : linear-gradient(to bottom, #333333 0%, #141414 100%);
color : #ffffff;
display : block;
font-family: Helvetica, Arial, Verdana, sans-serif;
padding : 19px 20px;
text-decoration: none;
}
#dropmenu_md ul {
list-style: none;
}
#dropmenu_md > ul > li {
display : inline-block;
float : left;
margin : 0;
}
#dropmenu_md.align-center {
text-align: center;
}
#dropmenu_md.align-center > ul > li {
float : none;
}
#dropmenu_md.align-center ul ul {
text-align: left;
}
#dropmenu_md.align-right > ul {
float : right;
}
#dropmenu_md.align-right ul ul {
text-align: right;
}
#dropmenu_md > ul > li > a {
color : #ffffff;
font-size: 12px;
}
#dropmenu_md > ul > li:hover:after {
content : '';
display : block;
width : 0;
height : 0;
position : absolute;
left : 50%;
bottom : 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#dropmenu_md > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#dropmenu_md.align-right > ul > li:first-child > a,
#dropmenu_md.align-center > ul > li:first-child > a {
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#dropmenu_md.align-right > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#dropmenu_md > ul > li.active > a,
#dropmenu_md > ul > li:hover > a {
color : #ffffff;
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background : #070707;
background : -moz-linear-gradient(top, #262626 0%, #070707 100%);
background : -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
background : -webkit-linear-gradient(top, #262626 0%, #070707 100%);
background : -o-linear-gradient(top, #262626 0%, #070707 100%);
background : -ms-linear-gradient(top, #262626 0%, #070707 100%);
background : linear-gradient(to bottom, #262626 0%, #070707 100%);
}
#dropmenu_md .has-sub {
z-index: 1;
}
#dropmenu_md .has-sub:hover > ul {
display : block;
}
#dropmenu_md .has-sub ul {
display : none;
position : absolute;
width : 200px;
top : 100%;
left : 0;
}
#dropmenu_md.align-right .has-sub ul {
left : auto;
right : 0;
}
#dropmenu_md .has-sub ul li {
*margin-bottom: -1px;
}
#dropmenu_md .has-sub ul li a {
background : #0fa1e0;
border -bottom: 1px dotted #31b7f1;
font-size: 11px;
filter : none;
display : block;
line-height: 120%;
padding : 10px;
color : #ffffff;
}
#dropmenu_md .has-sub ul li:hover a {
background : #0c7fb0;
}
#dropmenu_md ul ul li:hover > a {
color : #ffffff;
}
#dropmenu_md .has-sub .has-sub:hover > ul {
display : block;
}
#dropmenu_md .has-sub .has-sub ul {
display : none;
position : absolute;
left : 100%;
top : 0;
}
#dropmenu_md.align-right .has-sub .has-sub ul,
#dropmenu_md.align-right ul ul ul {
left : auto;
right : 100%;
}
#dropmenu_md .has-sub .has-sub ul li a {
background : #0c7fb0;
border-bottom: 1px dotted #31b7f1;
}
#dropmenu_md .has-sub .has-sub ul li a:hover {
background : #0a6d98;
}
#dropmenu_md ul ul li.last > a,
#dropmenu_md ul ul li:last-child > a,
#dropmenu_md ul ul ul li.last > a,
#dropmenu_mdul ul ul li:last-child > a,
#dropmenu_md .has-sub ul li:last-child > a,
#dropmenu_md .has-sub ul li.last > a {
border-bottom: 0;
}

Tiếp đến là sử dụng các class HTML sau để hiển thị nhé
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>menu1</span></a>
<ul>
<li class='has-sub'><a href='#'><span>menu1 1</span></a>
<ul>
<li><a href='#'><span>Sub menut</span></a></li>
<li class='last'><a href='#'><span>Sub menu</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>menu 2</span></a>
<ul>
<li><a href='#'><span>Sub menu</span></a></li>
<li class='last'><a href='#'><span>Sub menu</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>Trợ Giúp</span></a></li>
<li class='last'><a href='#'><span>Hỏi Đáp</span></a></li>
</ul>
</div>


Nguồn: VietCMS
↑↑ Lượt xem: 291
score
Đánh giá: 4.5/ 5, 291 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-291]