Disesi ini saya akan membagikan sedikit pengetahuan tentang cara membuat tampilan mobile menu menggunakan html dan css.Untuk Text editor disini saya menggunakan software visual studio code.anda bisa juga menggunakan software text editor yang lain,seperti Notepad,Notepad++,Subleme text,atom dan yang lain-lain.Akan tetapi saya sangat merekomendasikan Software Visual Studio Code,karena memiliki fitur yang berbeda dari software Text editor yang lainnya dan juga sudah support berbagai macam bahasa pemrograman komputer yang lainnya.Selain itu software ini cocok untuk anda yang sedang belajar bahasa pemrograman komputer karena terdapat fitur yang dapat membantu anda dalam pengetikan coding,bahkan developer tingkat profesional pun menggunakan software Visual Studio Code.Anda dapat mendownload software Visual Studio Code di situs website resminya https://code.visualstudio.com/download .Berikut tampilan atau gambar Sofware Visual Studio Code setelah diinstal.
Setelah anda menginstall dan membuka software vs.code maka langkah selanjutnya silahkan tuliskan code berikut ini:
Berikut Untuk Code HTML nya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>App Menu UI</title>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<nav class="nav" role="navigation">
<div class="nav__container">
<div class="toggle-menu">
<input type="checkbox" />
<span></span>
<span></span>
<div class="menu">
<ul class="menu__list">
<a href="#"><li class="menu__list-item">Home</li></a>
<a href="#"><li class="menu__list-item">Profile</li></a>
<a href="#"><li class="menu__list-item">Friends</li></a>
<a href="#"><li class="menu__list-item">Messages</li></a>
</ul>
<ul class="menu__footer">
<a href="#"><li class="menu__list-item">Settings</li></a>
<a href="#"><li class="menu__list-item">Logout</li></a>
</ul>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
Berikut Untuk Code CSS nya:
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
outline: none;
}
html {
font-family: sans-serif;
font-size: 10px;
-webkit-text-size-adjust: none;
font-feature-settings: "kern" off;
font-kerning: none;
cursor: pointer;
color: #131415;
}
body {
height: 100%;
min-height: 100vh;
color: rgb(233, 233, 233);
font-size: 1.2rem;
padding-top: calc(2rem * 3);
}
a,
a:focus,
a:active,
a:hover {
text-decoration: none;
color: inherit;
transition: 0.2s;
letter-spacing: 0.05rem;
}
.container {
position: relative;
margin: 0 auto;
max-width: 380px;
max-height: 608px;
overflow: hidden;
border-radius: 3rem;
background: #131415;
box-shadow: 0 0.5rem 5rem rgba(0, 0, 0, 0.3), 0 0rem 10rem rgba(0, 0, 0, 0.8);
}
nav {
width: 100%;
height: 608px;
position: relative;
}
nav .toggle-menu a {
color: rgb(233, 233, 233);
transition: color 0.27s ease;
}
nav .toggle-menu a:hover {
color: rgba(207, 0, 15, 1);
}
nav .toggle-menu input {
display: block;
width: 3.5rem;
height: 3.5rem;
position: absolute;
left: 3rem;
top: 2rem;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
nav .toggle-menu input:checked ~ span {
opacity: 1;
transform: rotate(-45deg) translate(-2px, -1px);
background: rgba(207, 0, 15, 1);
margin-left: 5px;
}
nav .toggle-menu input:checked ~ span:nth-child(2) {
transform: rotate(45deg) translate(0, -1px);
}
nav .toggle-menu input:checked ~ .menu {
transform: none;
box-shadow: 0.5rem 0 0.9rem rgba(0, 0, 0, 0.5), 2rem 0 5rem rgba(0, 0, 0, 0.3);
}
nav .toggle-menu span {
display: block;
width: 27px;
height: 2px;
background: rgb(233, 233, 233);
border-radius: 3px;
z-index: 2;
position: absolute;
top: 3rem;
left: 3rem;
transform-origin: 7px -7px;
transition: transform 0.5s cubic-bezier(0.77, 0.22, 0.05, 1),
background 0.5s cubic-bezier(0.77, 0.22, 0.05, 1),
margin-left 0.5s cubic-bezier(0.77, 0.22, 0.05, 1),
margin-bottom 0.5s cubic-bezier(0.77, 0.22, 0.05, 1);
}
nav .toggle-menu span:nth-child(3) {
transform-origin: 0 100%;
margin-bottom: 0;
margin-top: 10px;
}
nav .menu {
position: absolute;
top: 0;
width: 80%;
height: 608px;
margin: 0 10rem 0 0;
padding: 7.5rem 0 2.5rem 3rem;
border-radius: 4rem;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
box-shadow 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
display: grid;
grid-template-rows: auto;
grid-template-columns: 100%;
}
nav .menu__list {
list-style-type: none;
display: flex;
flex-direction: column;
justify-content: space-around;
padding-bottom: 1.5rem;
}
.menu__list > *:last-child {
border-bottom: 1px solid #96281b;
padding-bottom: 3rem;
}
.menu__footer {
align-self: end;
list-style-type: none;
}
nav .menu li {
padding: 1.5rem 0;
}
Setelah anda menuliskan code html dan css,langkah selanjutnya silahkan simpan codingan tersebut di folder yang anda inginkan.Kemudian jalankan atau RUN codingan tersebut,maka hasil nya seperti gambar berikut ini:
Selamat Mencoba!!! 😇
Comments
Post a Comment