Xin chào mọi người :v vì mới học được một chút css nên muốn làm một xíu share cho zui
B1. Code Html
- Code:
<!-- ^^button ^^ -->
<label for="slide-menu-right" class="menu-button">Menu</label>
<label for="slide-menu-right-2" class="menu-button">Test</label>
<!-- Menu 1 -->
<div class="slide-menu">
<input id="slide-menu-right" class="menu-toggle" type="checkbox" />
<div class="menu-wrap">
<label for="slide-menu-right" class="menu-close">Close</label>
<h1 class="menu-title">Menu</h1>
<div class="menu-list">
<ul>
<li>
<a href="#">^^</a>
</li>
<li>
<a href="#">test</a>
</li>
<li>
<a href="#">Cghhj</a>
</li>
<li>
<a href="#">Andrena</a>
</li>
<li>
<a href="#">Homaya</a>
</li>
</ul>
</div>
</div>
<label for="slide-menu-right" class="menu-overlay"></label>
</div>
<!-- Menu 2 -->
<div class="slide-menu">
<input id="slide-menu-right-2" class="menu-toggle" type="checkbox" />
<div class="menu-wrap">
<label for="slide-menu-right-2" class="menu-close">Close</label>
<h1 class="menu-title">Menu 2</h1>
<div class="menu-list">
<ul>
<li>
<a href="#">Item</a>
</li>
<li>
<a href="#">Item</a>
</li>
<li>
<a href="#">Item</a>
</li>
<li>
<a href="#">Item</a>
</li>
<li>
<a href="#">Item</a>
</li>
<li>
<a href="#">Item</a>
</li>
</ul>
</div>
</div>
<label for="slide-menu-right-2" class="menu-overlay"></label>
</div>
B2. Chèn vào CSS
- Code:
/* Slide menu by Homaya Takitori (vtnlinh.weebly.com)*/
* {
margin: 0px;
padding: 0px;
}
body {
font-family: "Segoe UI", Tahoma, Helvetica, sans-serif;
font-size: 14px;
}
.menu-button {
display: inline-block;
margin: 4px;
padding: 7px 20px;
color: #FFF;
background: #ff6666;
}
.menu-button:hover {
background: #ff6666;
cursor: pointer;
}
.menu-wrap {
background-color: #111;
padding: 40px 0;
overflow: hidden;
transition: all 0.3s;
position: fixed;
width: 300px;
top: 0;
right: -300px;
bottom: 0;
z-index: 999;
}
.menu-overlay {
background: rgba(0, 0, 0, 0.4);
display: none;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 900;
}
.menu-close {
background: url(http://i.imgur.com/iHYRssG.png) no-repeat scroll center center transparent;
opacity: 0;
position: absolute;
width: 45px;
height: 45px;
right: 0;
top: 0;
text-indent: -9999px;
transition: all 0.3s;
}
.menu-close:hover {
background-color: rgba(236, 69, 69, 1);
cursor: pointer;
}
.menu-wrap:hover .menu-close {
opacity: 1;
}
.menu-toggle {
display: none;
}
.menu-toggle:checked + .menu-wrap {
right: 0;
}
.menu-toggle:checked ~ .menu-overlay {
display: block;
}
.menu-title {
color: #FFF;
padding-left: 40px;
font-weight: 300;
}
.menu-list {
position: absolute;
top: 120px;
left: 0;
bottom: 0px;
width: 100%;
height: inherit;
display: block;
overflow: hidden;
}
.menu-wrap:hover .menu-list {
overflow-y: auto;
}
.menu-list ul {
list-style-type: none;
}
.menu-list li {
display: block;
}
.menu-list li:first-child {
border-top: medium none;
}
.menu-list li a {
display: block;
padding: 10px 40px;
font-size: 18px;
color: #FFF;
text-decoration: none;
}
.menu-list li a:hover {
background: #ff6666;
}
.menu-list li a:active {
background: #666;
}
