Membuat Menu Navigasi Responsive Pure CSS Di Blog
Menu Navigasi merupakan sebuah bagian yang penting untuk di pasang di blog, yakni untuk meletakkan tombol pintas untuk menuju salah satu konten-konten yang ada di blog kita.
Seperti halnya menu navigasi yang ada di blog ini, sudah saya susun untuk memudahkan sobat melihat daftar menu yang ada di blog ini, jika sobat tertarik ingin memasang navigasi responsive pure css ini silahkan di simak tutorialnya :
Langkah pertama adalah dengan meletakkan CSS Menu Navigasinya, letakkan di atas]]></b:skin> atau </style>
#menu{background:#464646;color:#eee;height:35px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#BABABA;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}
Lalu letakkan CSS untuk membuat navigasi ini menjadi Responsive, letakkan di atas]]></b:skin> atau </style>
@media screen and (max-width: 768px){
#menu{position:relative}
#menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}
Langkah terakhir adalah meletakkan kode HTML pemanggilannya, letakkan di bawah bagian header </header>
<nav id='menu'> <input type='checkbox'/> <label>≡<span>Navigation</span></label> <ul> <li><a href='/' title="Home">Home</a></li> <li><a href='#' title="Menu 1">Menu 1</a></li> <li><a class='prett' href='#' title="Drop Menu">Drop Menu</a> <ul class='menus'> <li><a href='#' title="Drop Menu1">Drop Menu 1</a></li> <li><a href='#' title="Drop Menu2">Drop Menu 2</a></li> <li><a href='#' title="Drop Menu3">Drop Menu 3</a></li> </ul> </li> <li><a href='#' title="Menu 2">Menu 2</a></li> <li><a class='prett' href='#' title="Drop Menu1">Drop Menu 1</a> <ul class='menus'> <li><a href='#' title="Drop Menu 1">Drop Menu 1</a></li> <li><a href='#' title="Drop Menu 2">Drop Menu 2</a></li> <li><a href='#' title="Drop Menu 3">Drop Menu 3</a></li> </ul> </li> <li><a class='trigger2' href='#' onclick='window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cen&amp;hl=en'); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li> </ul> </nav>
Silahkan ganti tanda # dengan link tujuan, dan silahkan ganti daftar menu navigasinya sesuai dengan keinginan sobat
Semoga Bermanfaat.
.jpg "Bagaimana Cara Mengetahui Scam")
