Memasang kode Mobile Menu Design
Kode ini menampilkan gambar berbentuk handphon yang berisikan front menu serta rear menu.
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru
buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kode ini menampilkan gambar berbentuk handphon yang berisikan front menu serta rear menu.
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru
buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
@import url(https://fonts.googleapis.com/css?family=Lato);
* {
margin: 0;
padding: 0;
}
*,
*:after,
*:before {
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
html {
line-height: 1.2;
}
body {
background-color: #fff;
color: #333;
font-family: "Lato", arial, sans-serif;
font-size: 16px;
}
.mobile {
background-color: #19b698;
border: 0 solid #333;
border-width: 50px 15px;
border-radius: 12px;
box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.6);
margin: 20px auto;
max-width: 300px;
height: 560px;
overflow: hidden;
position: relative;
}
header {
background-color: #fff;
background-color: rgba(255, 255, 255, 0);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
height: 50px;
}
.logo {
color: #fff;
font-size: 20px;
line-height: 50px;
padding: 0 0 0 20px;
text-transform: capitalize;
}
/* menu button */
.menuBtn {
height: 30px;
width: 30px;
position: absolute;
right: 20px;
top: 10px;
z-index: 101;
}
.menuBtn > span {
background-color: #fff;
border-radius: 1px;
height: 2px;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
margin: -1px 0 0 -15px;
-webkit-transition: height 100ms;
transition: height 100ms;
}
.menuBtn > span:after,
.menuBtn > span:before {
content: '';
background-color: #fff;
border-radius: 1px;
height: 2px;
width: 100%;
position: absolute;
left: 50%;
margin-left: -15px;
-webkit-transition: all 200ms;
transition: all 200ms;
}
.menuBtn > span:after {
top: -7px;
}
.menuBtn > span:before {
bottom: -7px;
}
.menuBtn.act > span {
height: 0;
}
.menuBtn.act > span:after,
.menuBtn.act > span:before {
background-color: #008877;
top: 1px;
}
.menuBtn.act > span:after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menuBtn.act > span:before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* main menu block */
.mainMenu {
background-color: #fff;
position: absolute;
left: 0;
top: 0;
z-index: 100;
height: 100%;
width: 100%;
display: table;
text-align: center;
opacity: 0;
-webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
transform: scale(0);
}
.mainMenu.act {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.mainMenu.act ul li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.mainMenu ul {
display: table-cell;
vertical-align: middle;
}
.mainMenu li {
padding: 8px 0;
-webkit-transition: all 400ms 510ms;
transition: all 400ms 510ms;
opacity: 0;
}
.mainMenu li:nth-child(odd) {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.mainMenu li:nth-child(even) {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.mainMenu li:last-child {
-webkit-transform: none;
transform: none;
}
.mainMenu a {
color: #19b698;
display: inline-block;
font-size: 18px;
}
.mainMenu a.suBtn {
color: #fff;
}
/* sign up button */
.suBtn {
background-color: #19b698;
border-radius: 5px;
padding: 10px 20px;
}
<div class="mobile"> <div class="mainContainer"> <header> <a href="#" class="logo">logo</a> <a href="#" class="menuBtn"> <span class="lines"></span> </a> <nav class="mainMenu"> <ul> <li> <a href="Link Title">Intro</a> </li> <li> <a href="Link Title">Services</a> </li> <li> <a href="Link Title">Team</a> </li> <li> <a href="Link Title">Pricing</a> </li> <li> <a href="Link Title" class="suBtn">Sing Up</a> </li> </ul> </nav> </header> <div class="container"> </div> <footer> </footer> </div> </div>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
<script>
$(document).ready(function () {
$('.menuBtn').click(function () {
$(this).toggleClass('act');
if ($(this).hasClass('act')) {
$('.mainMenu').addClass('act');
} else {
$('.mainMenu').removeClass('act');
}
});
});
//# sourceURL=pen.js
</script>
Edited by. Myscript2010
Sources by. Vijayakumar on Codepen
Sources by. Vijayakumar on Codepen
