Ads

Menu Seperti Template Median UI

Pada Kesempatan kali ini saya akan membagikan cara membuat Menu seperti template Median UI. Jadi langsung saja cekidot.

Menu Seperti Template Median UI
Dagruel

Cara Membuat Menu seperti Template Median UI

Cara ini hanya menggunakan html dan css jadi tidak perlu memakai javascript ya. Dan juga cara ini tidak bisa langsung di terapkan ke dalam blog!

Pertama buatlah Folder misal kan "Project 1" lalu dalam folder tersebut buatlah file bernama "index.html" dan "style.css" jika sudah buka file tadi dengan notepad dan isi dengan kode di bawah.

1. Di dalam file "index.html" isi dengan kode dibawah.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <input class="nav-menu check" id="offMenu" type="checkbox"/>
    <header>
      <div class="headerLeft">
        <div class="MenuButton">
          <label class="icon" for="offMenu">
            <svg class="open" style="width:24px;height:24px" viewBox="0 0 24 24">
              <path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
            </svg>
            <svg class="close" style="width:24px;height:24px" viewBox="0 0 24 24">
              <path fill="currentColor" d="M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z" />
            </svg>
          </label>
        </div>
        <div class="headerTitle">
          <h1>Dagruel</h1>
        </div>
      </div>
      <div class="headerRight">
        <div class="searchBar">
          <form class="search-form" action="index.html" method="get">
            <input aria-label="Search" type="text" name="q" placeholder="Search" id="search-input"/>
          </form>
        </div>
        <div class="darkButton">
          <span>DarkMode</span>
          <label class="darkSwitch">
            <input class="check" type="checkbox"/>
            <span class="slider"/>
          </label>
        </div>
      </div>
    </header>
    <main>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </main>
    <aside>
      <div class='mainMenu'>
        <div class="mainList">
          <ul>
            <li class="home"><a href="#home" title="Home"><span>Home</span></a></li>
            <li class="subCat menuList">
              <input class="menu-list check" id="categoryList" type="checkbox"/>
              <div class="listButton">
                <label class="catIcon" for="categoryList">
                  <svg viewBox="0 0 24 24">
                    <path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
                  </svg>
                  <span>
                    Category
                    <svg class="open" viewBox="0 0 24 24">
                      <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12,10.5A1.5,1.5 0 0,1 13.5,12A1.5,1.5 0 0,1 12,13.5A1.5,1.5 0 0,1 10.5,12A1.5,1.5 0 0,1 12,10.5M7.5,10.5A1.5,1.5 0 0,1 9,12A1.5,1.5 0 0,1 7.5,13.5A1.5,1.5 0 0,1 6,12A1.5,1.5 0 0,1 7.5,10.5M16.5,10.5A1.5,1.5 0 0,1 18,12A1.5,1.5 0 0,1 16.5,13.5A1.5,1.5 0 0,1 15,12A1.5,1.5 0 0,1 16.5,10.5Z"></path>
                    </svg>
                    <svg class="close" viewBox="0 0 24 24">
                      <path d="M2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12M10.5,12A1.5,1.5 0 0,0 12,13.5A1.5,1.5 0 0,0 13.5,12A1.5,1.5 0 0,0 12,10.5A1.5,1.5 0 0,0 10.5,12M10.5,17.5A1.5,1.5 0 0,0 12,19A1.5,1.5 0 0,0 13.5,17.5A1.5,1.5 0 0,0 12,16A1.5,1.5 0 0,0 10.5,17.5M10.5,6.5A1.5,1.5 0 0,0 12,8A1.5,1.5 0 0,0 13.5,6.5A1.5,1.5 0 0,0 12,5A1.5,1.5 0 0,0 10.5,6.5Z"></path>
                    </svg>
                  </span>
                </label>
              </div>
              <ul>
                <li class="blogger"><a href="#">Blogger</a></li>
                <li class="wordpress"><a href="#">Wordpress</a></li>
                <li class="javascript"><a href="#">Javascript</a></li>
                <li class="html"><a href="#">HTML</a></li>
                <li class="css"><a href="#">CSS</a></li>
                <li><a href="#">Unknown</a></li>
                <li><a href="#">Unknown</a></li>
                <li><a href="#">Unknown</a></li>
                <li><a href="#">Unknown</a></li>
              </ul>
            </li>
            <li class="privacy-police"><a href="#privacy-police" title="Privacy Policy"><span>Privacy Policy</span></a></li>
            <li class="disclaimer"><a href="#disclaimer" title="Disclaimer"><span>Disclaimer</span></a></li>
            <li class="dmca"><a href="#dmca" title="DMCA"><span>Home</span></a></li>
            <li class="about"><a href="#about" title="About"><span>About</span></a></li>
            <li><a href="#"><span>Unknown</span></a></li>
            <li><a href="#"><span>Unknown</span></a></li>
            <li class="sosmed">
              <label class="icon" for="offMenu">
                <svg class="open" style="width:24px;height:24px" viewBox="0 0 24 24">
                  <path fill="currentColor" d="M3 21H11V13H3M5 15H9V19H5M3 11H11V3H3M5 5H9V9H5M13 3V11H21V3M19 9H15V5H19M18 16H21V18H18V21H16V18H13V16H16V13H18Z" />
                </svg>
              </label>
              <ul>
                <li>
                  <svg viewBox="0 0 24 24">
                    <path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z"></path>
                  </svg>
                </li>
                <li>
                  <svg viewBox="0 0 24 24">
                    <path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />
                  </svg>
                </li>
                <li>
                  <svg viewBox="0 0 24 24">
                    <path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z"></path>
                  </svg>
                </li>
                <li>
                  <svg viewBox="0 0 24 24">
                    <path d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" />
                  </svg>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </aside>
    <label class="menuOverlay check" for="offMenu"></label>
  </body>
</html>

2. Dan file "style.css" isi dengan kode dibawah.

/* Default CSS */
* {box-sizing: border-box;}
body {position: relative;margin: 0;padding: 0;font-size: 14px;color: #333;background: #f1f1f1}
body:before {content: '';display: block;width: 100%;padding-top: 60px;}

/* menghilangkan CheckBox dan Icon Open / Close*/
.check, header .MenuButton .icon .open, .nav-menu:checked+header .MenuButton .icon .close {display: none;}
header .MenuButton .icon .close, .nav-menu:checked+header .MenuButton .icon .open {display: block;}

/* Header Aside position Fixed */
header,
aside {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fefefe;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

/* Tampilan Header Bagian Atas */
header {
  display: flex;
  width: 100%;
  height: 60px;
  padding: 0 30px 0 25px;
  color: #161617;
  z-index: 50;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .07);
}
.headerLeft {
  display: flex;
  width: 200px;
}
.headerLeft .MenuButton {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 100%;
  z-index: 4;
}
.headerLeft .headerTitle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0 0 23px;
  overflow: hidden;
}
.headerRight {
  display: flex;
  flex-grow: 1;
  padding-left: 25px;
}
.searchBar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  width: 50%;
  height: 100%;
  max-width: 550px;
}
.searchBar form {
  position: relative;
  width: 100%;
  margin: auto 0;
}
.searchBar form input {
  background-color: rgba(236, 239, 241, .8);
  outline: 0;
  border: 0;
  padding: 12px 20px 12px 45px;
  border-radius: 5px;
  width: 100%;
  transition: box-shadow .3s;
  -webkit-transition: box-shadow .3s;
}
.darkButton {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  z-index: 4;
  margin-left: auto;
}
.darkSwitch {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 12px;
  padding: 0;
  margin-left: 10px;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f1f1f1;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 45px;
}
.slider:before {
  position: absolute;
  content: '';
  height: 10px;
  width: 10px;
  left: 1px;
  bottom: 1px;
  background-color: #0c70de;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}
.darkSwitch input:checked+.slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Main Bagian Tengah  */
main {
  width: 100%;
  padding: 0 30px 0 250px;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.nav-menu:checked+header+main {
  padding-left: 100px;
}

/* Aside Bagian Samping */
aside {
  width: 225px;
  height: 100%;
  padding: calc(60px + 15px) 0 0 0;
  z-index: 2;
  overflow: hidden;
  box-shadow: 0 6px 18px 0 rgba(30, 30, 30, .035);
}
aside:hover {
  overflow-y: auto;
}

/* Menu List */
.menuList ul, .mainList ul, .sosmed ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mainList {
  padding-bottom: 60px;
}
.nav-menu:checked+header+main+aside {
  width: 68px;
}
.menuList {
  max-height: 100%;
  overflow: hidden;
  -webkit-transition: max-height .3s ease;
  transition: max-height .3s ease;
}
.nav-menu:checked+header+main+aside .menuList ul li, .nav-menu:checked+header+main+aside .mainList ul li {
  text-align: center;
}
.nav-menu:checked+header+main+aside .listButton .catIcon {
  padding: 0;
}
.nav-menu:checked+header+main+aside .mainList ul li span {
  display: none;
}
.mainList ul li, .menuList ul li, .sosmed ul li {
  position: relative;
  padding: 13px 20px 13px 25px;
}
.mainList ul li.menuList {
  padding: 0 20px 0 25px;
}
.nav-menu:checked+header+main+aside .mainList ul li.menuList {
  padding: 13px 20px 13px 25px;
}
.mainList ul li a:before {
  content: '';
  display: inline-block;
  min-width: 24px;
  min-height: 24px;
  vertical-align: middle;
  margin-right: 10px;
  /* Menu List Icon Default */
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.9 4.22C18.73 6.84 20 2 20 2S18.89 8.07 13.79 10.55C12.75 11.06 12.1 11.33 12.1 11.33L3.73 7.25L12.1 3.82C12.1 3.82 11.9 3.76 12.9 4.22M11.12 22L3.33 17.78V9.07L11.12 13.04V22M12.88 22L20.68 17.78V9.07L12.88 13.04V22Z' fill='%23111d5e'/%3E%3C/svg%3E") center/24px no-repeat;
}

/* Menu List Icon Khusus */
.mainList ul li a[href*='home']:before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='currentColor'/%3E%3C/svg%3E") center/24px no-repeat;
}
.mainList ul li a[href*='dmca']:before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13C19.34 13 19.67 13.04 20 13.09V10C20 8.9 19.11 8 18 8H17V6C17 3.24 14.76 1 12 1S7 3.24 7 6H9C9 4.34 10.34 3 12 3S15 4.34 15 6V8H6C4.89 8 4 8.9 4 10V20C4 21.1 4.89 22 6 22H13.81C13.3 21.12 13 20.1 13 19C13 15.69 15.69 13 19 13M12 17C10.9 17 10 16.11 10 15S10.9 13 12 13 14 13.9 14 15 13.11 17 12 17M22.5 17.25L17.75 22L15 19L16.16 17.84L17.75 19.43L21.34 15.84L22.5 17.25Z' fill='currentColor'/%3E%3C/svg%3E") center/24px no-repeat;
}
.mainList ul li a[href*='privacy']:before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M17.13,17C15.92,18.85 14.11,20.24 12,20.92C9.89,20.24 8.08,18.85 6.87,17C6.53,16.5 6.24,16 6,15.47C6,13.82 8.71,12.47 12,12.47C15.29,12.47 18,13.79 18,15.47C17.76,16 17.47,16.5 17.13,17Z' fill='currentColor'/%3E%3C/svg%3E") center/24px no-repeat;
}
.mainList ul li a[href*='disclaimer']:before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,7V5H5V4C5,2.89 5.9,2 7,2H13V9L15.5,7.5L18,9V2H19C20.05,2 21,2.95 21,4V20C21,21.05 20.05,22 19,22H7C5.95,22 5,21.05 5,20V19H3V17H5V13H3V11H5V7H3M7,11H5V13H7V11M7,7V5H5V7H7M7,19V17H5V19H7Z' fill='currentColor'/%3E%3C/svg%3E") center/24px no-repeat;
}
.mainList ul li a[href*='about']:before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z' fill='currentColor'/%3E%3C/svg%3E") center/24px no-repeat;
}

/* MenuList Bagian Category */
.listButton .catIcon {
  display: block;
  padding: 13px 0;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.catIcon svg {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  vertical-align: middle;
  transition: all .3s ease-out;
}
.catIcon span svg {
  margin-right: 0;
  position: absolute;
  right: 0;
  top: 13px;
}
.catIcon span svg.open {
  opacity: 1;
  visibility: visible;
}
.catIcon span svg.close {
  opacity: 0;
  visibility: hidden;
}
.listButton .catIcon svg path {
  fill: red;
}
.listButton .catIcon span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.listButton+ul {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.menu-list:checked~ul {
  max-height: 1000px;
}
.listButton .catIcon:hover .open {
  transform: rotate(90deg)
}
.menu-list:checked + .listButton .catIcon .close {
  opacity: 1;
  visibility: visible;
}
.menu-list:checked + .listButton .catIcon .open {
  opacity: 0;
  visibility: hidden;
}
.nav-menu:checked+header+main+aside .listButton .catIcon svg, .nav-menu:checked+header+main+aside .mainList ul li a:before {
  margin-right: 0;
}
.nav-menu:checked+header+main+aside .sosmed ul, .sosmed .icon, .nav-menu:checked+header+main+aside .menuList ul {
  display: none;
}
.nav-menu:checked+header+main+aside .sosmed .icon {
  display: block;
}

/* Menu List Bagian Sosmed */
.sosmed {
  position: fixed !important;
  bottom: 0;
  left: 0;
  padding: 20px 20px 30px 25px;
  background: #fefefe;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
.sosmed ul {
  display: flex;
}
.sosmed ul li {
  padding: 0;
}
.sosmed ul li svg {
  width: 24px;
  height: 24px;
}

/* Media Screen Mobile Responsive */
@media screen and (max-width:920px) {
  main, .nav-menu:checked+header+main {padding: 0 20px;}
  header .MenuButton .icon .close, .nav-menu:checked+header .MenuButton .icon .open {display: none;}
  header .MenuButton .icon .open, .nav-menu:checked+header .MenuButton .icon .close {display: block;}
  aside,.mainList ul li.sosmed {margin-left: -100%;}
  .nav-menu:checked+header+main+aside, .nav-menu:checked+header+main+aside .mainList ul li.sosmed {margin-left: unset;}
  .nav-menu:checked+header+main+aside {width: 225px;z-index: 3}
  .nav-menu:checked+header+main+aside .menuList ul li, .nav-menu:checked+header+main+aside .mainList ul li {text-align: unset}
  .nav-menu:checked+header+main+aside .sosmed .icon {display: none;}
  .sosmed .icon, .nav-menu:checked+header+main+aside .menuList ul {display: block;}
  .nav-menu:checked+header+main+aside .sosmed ul {display: flex;}
  .nav-menu:checked+header+main+aside .mainList ul li span {display: unset}
  .nav-menu:checked+header+main+aside .mainList ul li.menuList {padding: 0 20px 0 25px;}
  .nav-menu:checked+header+main+aside .listButton .catIcon {padding: 13px 0;}
  .menuOverlay {display: block;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;-webkit-transition: all .2s ease-in;transition: all .2s ease-in;background: transparent;opacity: 0;visibility: hidden;}
  .nav-menu:checked+header+main+aside+.menuOverlay {background: rgba(0,0,0,.25);opacity: 1;visibility: visible;}
}
@media screen and (max-width:680px) {
  .searchBar {display: none;}
}

/* Scrollbar view */
@media screen and (min-width:768px) {
  ::-webkit-scrollbar {-webkit-appearance: none;width: 3px;height: 5px;}
  ::-webkit-scrollbar-track {background-color: transparent}
  ::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, .15);border-radius: 10px}
  ::-webkit-scrollbar-thumb:hover {background-color: rgba(0, 0, 0, .45)}
  ::-webkit-scrollbar-thumb:active {background-color: rgba(0, 0, 0, .45)}
}

Jika sudah, save lah kedua file tersebut dan buka kembali file "index.html" dengan Chrome dan lihatlah hasil nya.

Catatan: pelajarilah html dan css tersebut jika ingin menerapkan nya ke dalam blog kalian, ok. Sekian dari saya terima Kasih.

https://median-ui.jagodesain.com/

Comments

Blogger Disqus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!