SayaLagi.Com Buat Forum Gratis

User info

Welcome, Guest! Please login or register.


You are here » SayaLagi.Com Buat Forum Gratis » Kode-Kode JS/CSS » Semi Rensponsive Menu Top Navbar Dengan Sub Menu (Dropdown)


Semi Rensponsive Menu Top Navbar Dengan Sub Menu (Dropdown)

Posts 1 to 1 of 1

Poll

Sukai Kode Semi Responsive Sub Menu dropdown!
Suka

0% - 0
Tidak Suka

0% - 0
Votes: 0

1

Secara default, sistem di Forum SL akan menampilkan beberapa link menu di bagian atas (top bar header halaman), antara lain:

home, rules, search, profile, messages, administration, login,dan logout.

Dalam versi dekstop, link menu utama top navbar otomatis ditampilkan dalam format teks, sementara pada versi mobiling, link menu utama otomatis ditampilkan dalam format gambar icon.

https://i.postimg.cc/WbqwvYgh/gambar-link-menu-top-nav-header-bar-dekstop.png
Catatan: Bentuk tampilan link menu topnavigation berbeda-beda mengikuti versi template (theme forum) yang anda gunakan. (Kami telah menyediakan 100 lebih theme  gratis yang dapat  anda gunakan sesuka anda dan bisa anda gonta-ganti sesuka anda). Untuk mengganti theme, silahkan login ke namaforumanda.sayalagi.com/admin_options.php kemudian pilih opsi Style by default yang tersedia.

Jika anda ingin menambahkan beberapa link menu baru dalam format yang bisa menampilkan link submenu (dropdown menu) pada bagian top navbar, maka anda bisa mencoba menerapkan kode CSS dan HTML Semi Rensponsive Menu Top Navbar Dengan Sub Menu (Dropdown) seperti contoh di bawah ini:

[sayalagi.com]<style>
.menuutama {
    overflow: hidden;
    background-color: #333;
    font-family: Arial, Helvetica, sans-serif;
}
.menuutama a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.menuturun {
    float: left;
    overflow: hidden;
}
.menuturun .linksayalagi {
    font-size: 16px;   
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}
.menuutama a:hover, .menuturun:hover .linksayalagi {
    background-color: red;
}
.menuturun-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.menuturun-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.menuturun-content a:hover {
    background-color: #ddd;
}
.menuturun:hover .menuturun-content {
    display: block;
}
</style>
<div class="menuutama">
  <div class="menuturun">
<button class="linksayalagi">Menu 1
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="menuturun-content">
      <a href="/viewforum.php?id=1">Link Dropdown 1</a>
      <a href="/viewforum.php?id=2">Link Dropdown 2</a> 
      <a href="/viewforum.php?id=3">Link Dropdown 2</a> 
  </div>
</div>
<div class="menuturun">
<button class="linksayalagi">Menu 2
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="menuturun-content">
       <a href="/viewforum.php?id=1">Link Dropdown 1</a>
      <a href="/viewforum.php?id=2">Link Dropdown 2</a> 
      <a href="/viewforum.php?id=3">Link Dropdown 2</a> 
   </div>
  </div>
<div class="menuturun">
     <button class="linksayalagi">Menu 3
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="menuturun-content">
       <a href="/viewforum.php?id=1">Link Dropdown 1</a>
      <a href="/viewforum.php?id=2">Link Dropdown 2</a> 
      <a href="/viewforum.php?id=3">Link Dropdown 2</a> 
    </div>
  </div>
<div id="lihat-sayalagi">
<div class="menuturun">
       <button class="linksayalagi">Menu 4
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="menuturun-content">
       <a href="/viewforum.php?id=1">Link Dropdown 1</a>
      <a href="/viewforum.php?id=2">Link Dropdown 2</a> 
      <a href="/viewforum.php?id=3">Link Dropdown 2</a> 
    </div>
  </div>     
</div>
</div>
[/sayalagi.com_copyright]

Cara penerapan:

Copy kode CSS di bawah ini dan Paste pada pada bagian paling atas di kolom HTML Header Forum SL anda.
Code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- CSS submenu dropdown -->
<style>
.menuutama {
    overflow: hidden;
    background-color: #333;
    font-family: Arial, Helvetica, sans-serif;
}
.menuutama a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.menuturun {
    float: left;
    overflow: hidden;
}
.menuturun .linksayalagi {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}
.menuutama a:hover, .menuturun:hover .linksayalagi {
    background-color: red;
}
.menuturun-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.menuturun-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.menuturun-content a:hover {
    background-color: #ddd;
}
.menuturun:hover .menuturun-content {
    display: block;
}
@media screen and (max-width:540px) {
#sayalagidotcom {display: none;}
}
</style>

[sayalagi.com]<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-2888653388390249"
     data-ad-slot="3298364496"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>[/sayalagi.com_copyright]

Kemudian copy kode di bawah ini dan paste tepat di bawah kode css di atas. Pastikan anda telah merubah teks berwarna merah dengan alamat URL link yang anda inginkan

Inilah Kodenya
Hidden text:

To view hidden text please login or register.

Jika anda bisa menerapkan kode css di atas dengan cara yang benar, maka menu top navbar di forum anda akan terlihat seperti contoh di atas. Anda bisa mengganti latar belakang warna hover, warna teks, dll.

Catatan Semi Responsive Sub Menu dropdown:
Untuk menyesuaikan dengan tampilan link di Mobiling, maka sebaiknya anda tidak menggunakan judul link yang panjang (disarankan Cuma 1 kata pendek)

Jika anda kesulitan dalam menerapkan kode CSS sub menu di atas di forum SL anda, atau anda menemukan eror saat pemasangan kode, maka silahkan tanyakan via komentar (reply) postingan tutorial CSS ini. Jelaskan eror yang anda temukan dengan menyertakan screenshot.

Jika anda memerlukan bantuan admin untuk memasangkan css di atas, silahkan gunakan pesan private tersedia.

Peringatan:
Menggunakan kode untuk menampilkan Link menu navbar seperti di atas tidak akan muncul jika anda menggunakan style default (bawaan instalasi). Anda harus memillih style yang cocok yang bisa menampilkan link menu di atas. Untuk itu, anda bisa mencoba satu persatu style template gratis yang tersedia melalui halaman admin, dan buka menu Options, kemudian atur pilihan Style by default.

Code:
<!-- link CSS submenu dropdown -->
<div class="menuutama">
  <div class="menuturun">
 <button class="linksayalagi">Menu 1
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="menuturun-content">
      <a href="/viewforum.php?id=1">Link Dropdown 1</a>
      <a href="/viewforum.php?id=2">Link Dropdown 2</a>  
      <a href="/viewforum.php?id=3">Link Dropdown 2</a>  
  </div> 
</div>
<div class="menuturun">
<button class="linksayalagi">Menu 2
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="menuturun-content">
       <a href="/viewforum.php?id=1">Link Dropdown 1</a>
      <a href="/viewforum.php?id=2">Link Dropdown 2</a>  
      <a href="/viewforum.php?id=3">Link Dropdown 2</a>  
   </div>
  </div>
<div class="menuturun">
     <button class="linksayalagi">Menu 3
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="menuturun-content">
       <a href="/viewforum.php?id=1">Link Dropdown 1</a>
      <a href="/viewforum.php?id=2">Link Dropdown 2</a>  
      <a href="/viewforum.php?id=3">Link Dropdown 2</a>  
    </div>
  </div>
<div id="sayalagidotcom">
<div class="menuturun">
       <button class="linksayalagi">Menu 4
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="menuturun-content">
       <a href="/viewforum.php?id=1">Link Dropdown 1</a>
      <a href="/viewforum.php?id=2">Link Dropdown 2</a>  
      <a href="/viewforum.php?id=3">Link Dropdown 2</a>  
    </div>
  </div>     
</div>
</div>

0


You are here » SayaLagi.Com Buat Forum Gratis » Kode-Kode JS/CSS » Semi Rensponsive Menu Top Navbar Dengan Sub Menu (Dropdown)