Simple Sidebar Navigation
~Selamat Malam
Navigasi pada website adalah penting pada sebuah website . Sistem navigasi website seperti peta jalan untuk semua daerah dan informasi yang berbeda yang terkandung dalam situs web.
Menggunakan skema navigasi yang konsisten dari halaman ke halaman membantu pengunjung situs mempelajari sistem navigasi website Anda.
dan malam ini saya akan memberikan salah satu Sidebar Navgation
Contoh :
Navigasi pada website adalah penting pada sebuah website . Sistem navigasi website seperti peta jalan untuk semua daerah dan informasi yang berbeda yang terkandung dalam situs web.
Menggunakan skema navigasi yang konsisten dari halaman ke halaman membantu pengunjung situs mempelajari sistem navigasi website Anda.
dan malam ini saya akan memberikan salah satu Sidebar Navgation
Contoh :
Pertama mari kita buat struktur htmlnya
HTML
<div class="container">
<div class="profile">
<div class="profile-img">
<img src="images/taylor.jpeg"/>
</div>
<span> Taylor Swift</span>
</div>
<ul>
<!-- Navigasi -->
<li><a href="#">Dashborad</a></li>
<li><a href="#">Notification</a></li>
<li><a href="#">Entry</a></li>
<li><a href="#">Setting</a></li>
</ul>
</div>
sekarang kita tambahkan CSS
*{
margin:0;
padding:0;
box-sizing:border-box;
}
*:after,*:before{
box-sizing:border-box;
}
body,html{
font-family:arial;
background:#bfbfbf;
}
ul,li{
list-style:none;
}
a{
text-decoration:none;
}
.container{
width:4.5%;
height:100%;
background:rgba(255, 255, 255,1);
transition:all 0.30s ease 0.30s;
cursor:pointer;
}
.container:hover{
width:15%;
transition:all 0.30s ease 0.30s;
}
.profile{
width:100%;
height:150px;
padding-top:10px;
transform:translateX(-100px);
transition:all 0.30s ease 0.30s;
}
.container:hover .profile{
transform:translateX(50px);
transition:all 0.30s ease 0.30s;
}
.profile-img img{
padding:10px;
width:100px;
height:100px;
border-radius:100px;
}
.profile span{
color:#212121;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
margin-top:5px;
}
.container ul li{
padding:10px;
cursor:pointer;
border-top:1px solid rgba(2,2,2,.10);
box-shadow:inset 0px 0px 0px 0px #bfbfbf;
transition:all 0.30s ease 0.30s;
}
.container ul li:hover{
box-shadow:inset -10px 0px 0px 0px #212121;
transition:all 0.30s ease 0.30s;
}
.container ul li:first-child{
background:url(images/Dasboard.png);
background-repeat:no-repeat;
background-size:contain;
background-position:10px;
}
.container ul li:nth-child(2){
background:url(images/Notif.png);
background-repeat:no-repeat;
background-size:contain;
background-position:10px;
}
.container ul li:nth-child(3){
background:url(images/Write.png);
background-repeat:no-repeat;
background-size:contain;
background-position:10px;
}
.container ul li:nth-child(4){
background:url(images/setting.png);
background-repeat:no-repeat;
background-size:contain;
background-position:10px;
}
.container ul li:last-child{
border-bottom:1px solid rgba(2,2,2,.10);
}
.container ul li:first-child{
margin-top:10px;
}
.container ul li a{
opacity:0;
color:#212121;
width:100px;
padding:0px 45px;
transition:all 0.30s ease 0.30s;
}
.container:hover ul li a{
opacity:1;
transition:all 0.30s ease 0.30s;
}
@media only screen and (min-width:600px) and (max-width: 1024px){
.container{
width:6%;
}
.container:hover .profile{
transform:translateX(16%);
transition:all 0.30s ease 0.30s;
}
}
Tadaaaa sudah selesai ,,,
bagaimana?mudah bukan ?
~Selamat Mencoba
No comments: