Cara Membuat Menu Navigasi Slide Ke samping Blog dengan mudah

byHaikal -

Strukturpedia - Cara Membuat Menu Navigasi Slide Ke samping Blog dengan mudah Jika ingin melihat salah satu model navigasi ini kalian bisa lihat sendiri di template saya dan blog bagus.co . Seperti kita ketahui banyak sekali model navigasi pada Blog / Web. Seperti yang biasa umunya kita lihat  menu Dropdown, Menu Horizontal atau menu lainnya.

 Untuk tutorial kali ini saya akan membuat Menu navigasi slide samping dengan berbagai variasi Seperti efek buram (opacity), push content, dan lainnya. Berikut cara membuat Meni navigasi Dengan posisi tombol menu navigasi di atas header Blog.
  • Login ke Blogger
  • Masuk ke menu TEMPLATE ⇨ Edit HTML
  • Lalu Cari code </body>
  • Kemudian pasang kode penutup </div> di atas kode </body>.
Kode HTML


<body>

.....

.....

  <div id='main-nav'>
    <div class='navisa' id='myNavix'>
      <a class='closebtn' href='javascript:void(0)' onclick='closeNav()'>&amp;times;</a>
      <a href='#'>Tentang</a>
      <a href='#'>Layanan</a>
      <a href='#'>Kebijakan</a>
      <a href='#'>Kontak</a>
    </div>

    <div class='topnav'>
      <button class='tnav' onclick='openNav()'>&#8801;</button>
      <span class='thome'><a expr:href='data:blog.homepageUrl'>Home</a></span>
      <!-- tambahkan element lain di sini -->
    </div>
    <div class='content'>

.....

.....

    <!-- content -->
    </div>
    </div>
    <div class='content-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
    </div>
 </div>

.....

.....

</body>

Keterangan:
  • Baris kode pertama (<div class='main-nav'>) dan penutupnya (</div>) hanya berlaku jika Anda memilih untuk membuat menu navigasi push content.
  • Kode tersebut digunakan untuk mendorong semua element yang terbungkus di dalamnya.
  • Anda juga bisa menambahkan element lain di samping tombol navigasi. Sepeti kotak pencarian, tombol berbagi, judul Blog, atau yang lainnya.
  • Ganti kode # dengan url halaman Anda.
Kode CSS
Tambahkan kode CSS berikut. Letakkan di atas kode ]]></b:skin> atau </style>.

  
/*Navigasi Samping*/



.navisa {

    position: absolute;

    height: 100%;

    width: 0;

    z-index: 1;

    top: 0;

    left: 0;

    background-color: #111;

    overflow-x: hidden;

    padding-top: 60px;

    transition: 0.5s;}



.topnav {

    overflow: hidden;

    margin: 0;

    width: 100%;

    padding: 4px 0 0 0;

    position: relative;

    height: 45px;

    line-height: 45px;

    background: #666666;}



.thome {

    font-size: 20px;

    padding: 5px;

    font-weight: 400;

    margin-left: 10px;}



.thome a {

    color: #ffffff;

    text-decoration: none;}



.tnav {

    color: #ffffff;

    cursor: pointer;

    box-sizing: border-box;

    padding: 0 10px;

    border: none;

    border-radius: 20px;

    background: #888;

    margin-left: 10px;

    font-size: 25px;

    font-weight: 600;}



.navisa a {

    padding: 8px 8px 8px 32px;

    text-decoration: none;

    font-size: 25px;

    color: #818181;

    display: block;

    transition: 0.3s}



.navisa a:hover, .offcanvas a:focus{

    color: #f1f1f1;}



.navisa .closebtn {

    top: 0;

    right: 25px;

    position: absolute;

    font-size: 36px;

    margin-left: 50px;}



#main-nav {

    transition: margin-left .5s;}



@media screen and (max-height: 450px) {

    .navisa a {font-size:18px;}

    .navisa {padding-top:15px;}}



@media screen and (max-width: 1024px) {
    .navisa {position: fixed;}}

Keterangan:
  • Kode CSS di atas digunakan untuk membuat menu navigasi berada di sisi kiri.
  • Jika Anda memilih untuk membuat menu navigasi di samping kanan, ganti semua kode CSS yang berbau left menjadi right dan right menjadi left.
Tags

Posting Komentar

Lebih baru Lebih lama