Label

Membuat menu website sederhana

8 April 2023

image

note

Cloud Hosting Indonesia

Penjelasan

deskripsi

Html 
<section class="section-header">
    <div class="topmenu">
      <nav>
        <div class='toggle-wrap' onclick='toggleMenu(this)'>
        <span class='toggle-bar'/>
        </div>
    <hgroup>
      <div class="title-brand">
        <a href="#">Global</a>
      </div>
    </hgroup>
   </nav>
    </div>
    <aside>
      <div class="menu-tap">
        <a href="#">Beranda</a>
        <a href="#">Layanan</a>
        <a href="#">Informasi</a>
        <a href="#">Tentang</a>
        <a href="#">Cerita</a>
        <a href="#">Inovasi</a>
        <a href="#">Visi & Misi</a>
        <a href="#">Mitra Bisnis</a>
      </div>
    </aside>
    </div>
  </section>

Css 
.topmenu {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  position: fixed;
  background: #000;
  justify-content: center;
}
nav {
padding: 10px;
top: 0px;
width: 100%;
max-width: 800px;
}
nav::after {
content: "";
display: block;
clear: both;
}
hgroup {
float: left;
text-decoration: none;
margin: 2px 2px 2px 10px;
}
aside {
position: fixed;
width: 100%;
max-width: 400px;
height: 100%;
background: #383838;
color: #fff;
left: -100%;
top: 0;
bottom: 0;
z-index: 50;
box-sizing: border-box;
padding-top: 65px;
transition: all 0.4s ease;
}
aside.active {
 left: 0;
}
aside a {
display: block;
padding: 0.8rem;
text-decoration: none;
font-size: 1.30rem;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #414141;
}
.title-brand {
font-size: 1.50em;
color: #fff;
padding: 5px;
}
.title-brand a {
  color: #fff;
  text-decoration: none;
  font-family: 'Lato';
}
.menu-tap {
border-top: 70px;
max-height: calc(100% - 0px);
height: calc(100% - 0px);
overflow-y: auto;
z-index: 400;
position: relative;
}
.menu-tap.desktop {
overflow-y: hidden;
}
.toggle-wrap {
padding: 10px;
position: relative;
z-index: 400;
cursor: pointer;
float: right;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.toggle-bar,
.toggle-bar::before,
.toggle-bar::after,
.toggle-wrap.active .toggle-bar,
.toggle-wrap.active .toggle-bar::before,
.toggle-wrap.active .toggle-bar::after {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.toggle-bar {
width: 33px;
display: block;
margin: 10px 0px;
position: relative;
border-radius: 5px;
border-top: 4px solid #fff;
}
.toggle-bar::before,
.toggle-bar::after {
content: "";
border-radius: 5px;
display: block;
background: #fff;
height: 4px;
width: 26px;
position: absolute;
top: -11px;
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-ms-transform-origin: 13%;
-webkit-transform-origin: 13%;
transform-origin: 13%;
}
.toggle-bar::after {
top: 3px;
}
.toggle-wrap.active .toggle-bar {
border-top: 4px solid transparent;
border-radius: 5px;
}
.toggle-wrap.active .toggle-bar::before {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.toggle-wrap.active .toggle-bar::after {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.viewbar {
  margin-top: 80px;
  }

Js 
function toggleMenu(e) {
  e.classList.toggle("active");
  document.querySelector("aside").classList.toggle("active");
}

Contoh


See the Pen Menu Simpel- by Firmansyah (@firmansyahbio) on CodePen.


Label