[Thùng rác] slide menu right by Homaya Takitori

  Bài viết hay nhất1
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;
}

Demo:

[Only admins are allowed to see this link]
  Bài viết hay nhất2
Có phải bạn làm không thế mà dám đăng vào box tự làm? Nhưng dù sao cũng 1 like vì tinh thần post bài cho Devs
  Bài viết hay nhất3
Bài của bạn bị đưa vào sọt nhá. Code trên là do Zzbaivong viết, đăng tại topic này:
Code:
http://devs.forumvi.com/t691-hoi-ap-how-to-add-multiple-button-on-slide-menu?showpost=p4224

Mong bạn chú ý lần sau đăng bài đúng box và để lại nguồn của người viết để tránh bị vào sọt oan.
You cannot reply to topics in this forum