Share CSS Menu Drop Responsiver Cực Đẹp
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
Tiếp đến là sử dụng các class HTML sau để hiển thị nhé
Nguồn: VietCMS
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;
}
#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>
<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