Modifikasi Logo Header Dengan Menu
Untuk mendapatkan hasil yang maksimal semua tergantung pada kreatifitas kita.
CSS#nav{
background-color: #248080;
width: 100%;
height: 70px;
border-bottom: 1px solid #e7e8e9;
box-shadow: 0 0 5px #ccc;
}
#innerNav{
max-width: 960px;
height: 70px;
margin: 0 auto;
}
#logo{
font-family: 'Grand Hotel', cursive;
font-size: 3em;
color: #e7e8e9;
padding-top: 5px;
padding-left: 5px;
float: left;
}
.toggleBtn{
float: right;
height: 30px;
border-left: 2px solid #e7e8e9;
padding: 20px;
font-family: 'Exo', sans-serif;
font-size: 1.4em;
font-weight: bold;
color: #e7e8e9;
cursor: pointer;
}
#menu{
width: 200px;
height: 100%;
background-color: #248080;
border-left: 1px solid #e7e8e9;;
float: right;
position: absolute;
right: -201px;
transition: all 0.3s ease-out;
}
.btn{
height: 30px;
width: 90%;
padding: 10px;
border-bottom: 2px solid #e7e8e9;
font-family: 'Exo', sans-serif;
font-size: 1.4em;
font-weight: bold;
color: #e7e8e9;
background-color: #248080;
}
.btn:hover, .toggleBtn:hover{
background-color: #e7e8e9;
color: #c63c41;
cursor: pointer;
}
.show{
right: 0px !important;
}
Perubahan posisi pada nav perhatikan kode yang diawali HTML
<div id="nav">
<div id="innerNav">
<div id="logo">Action Blog</div>
<div class="toggleBtn">Menu</div>
</div>
</div>
<div id="menu">
<div class="btn">jQuery</div>
<div class="btn">CSS</div>
<div class="btn">HTML</div>
</div>
JS$(".toggleBtn").click(function () {
$("#menu").toggleClass("show");
});
Silahkan sobat kreasikan kembali untuk hasil yang lebih maksimal yang sesuai dengan tema .
Resource : Peter Bork/denmark