5.2.15
27
CSS Menu Navigasi Title Dengan 6 Pilihan - Banyak cara menampilkan label-label blog kepada pengunjung, salah satunya adalah dengan tampilan Menu Navigasi. Barang kali sahabat semua sudah bosan dengan bentuk desain menu navigasi blog saat ini, ingin mengubah tampilannya.?. Berikut tampilan CSS Menu Navigasi Title Dengan 6 Pilihan yang terspesial buat sahabat semua pecinta SAHABAT BLOGGER 77.




DEMO SHOW




Menu Navigasi




BACA JUGA
Elemen Data HTML Template Halaman Komentar


Anda cukup pilih salah satu bentuk tampilan menu navigasi title pada elemen CSS dibawah ini. Agar lebih mudah, nama menu sudah saya beri warna MERAH, kode lengkapnya seperti ini:



.navigasi {margin: 0 auto}
#menu1 {
  background: #000;border-bottom: 3px solid #DC143C;
  display: inline-block;margin: 10px 0;
  position: relative;width: 100%;z-index: 999}

#menu1 ul {list-style: none;margin: 0;padding: 0;position: relative}
#menu1 ul li {border-right:1px dotted #999;float:left;margin:0;padding:0;position:relative}
#menu1 ul li a {
  color: #fff;display: block;font: italic 18px "Georgia";
  min-width: 5.5em;padding: .25em .5em;transition: all 0.5s ease 0s}

#menu1 ul li a span {display: block}
#menu1 ul li a .title {border-bottom: 1px dotted #999;padding: 0 0 .25em}
#menu1 ul li a .exp {
  font-size: 12px;padding: .25em 0 0;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);-khtml-opacity: 0;
  -moz-opacity: 0;opacity: 0;text-align: right}

#menu1 ul li a:hover {background:#DC143C;color:#fff;text-shadow:1px 2px 1px #111}
#menu1 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);-khtml-opacity: 1;-moz-opacity: 1;
  opacity: 1;color:#FFFF00}

#menu2 {
  background-image:linear-gradient(#ccc, #888, #ccc);
  border-bottom: 2px solid #666;border-top: 2px solid #666;
  display: inline-block;position: relative;
  width: 100%;height:38px;z-index: 999}

#menu2 ul {list-style: none;margin: 0;padding: 0;position: relative}
#menu2 ul li {float: left;margin: 0;padding: 0;position: relative}
#menu2 ul li a {
  font:bold 17px/30px sans-serif;transition:all 0.5s linear 0s;
  color:#111;display:block}

#menu2 ul li a span {display: block;}
#menu2 ul li a .title {text-align:center}
#menu2 ul li a .exp {
  background: rgba(0, 0, 0, 0.75);bottom: -5px;
  color: #f0f0f0;font: bold italic 12px/1 sans-serif;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);opacity: 0;
  padding: 5px;position: absolute;right: 0;
  height:38px;width:92%;text-align: right;
  transition: all 0.5s linear 0s}

#menu2 ul li a:hover {background: #e0e0e0;color: #000;}
#menu2 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);opacity: 1}

#menu3 {
  background: #DC143C;display: inline-block;margin: 10px 0;
  position: relative;width: 100%;z-index: 999}

#menu3 ul {list-style: none;margin: 0;padding: 0;position: relative}
#menu3 ul li {float: left;margin: 0;padding: 0;position: relative}
#menu3 ul li a {
  color: #fff;text-shadow:1px 2px 1px #111;
  display: block;font: 18px Georgia;min-width: 6em;
  margin: 0;padding: .5em .5em;transition: all 0.3s linear 0s}

#menu3 ul li a span {display: block;transition: all 0.3s linear 0s}
#menu3 ul li a .title {
  border-bottom: 1px solid;border-top: 3px double;
  padding-bottom:3.5px;margin-bottom: .5em;text-align: center}

#menu3 ul li a .exp {
  color: #fff;font: 11px/1 Georgia;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);opacity: 0;
  text-align: center;text-transform: uppercase}

#menu3 ul li a:hover {background: rgba(255, 0, 0, 0.1);}
#menu3 ul li a:hover .title {color:yellow;}
#menu3 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);opacity: 1}

#menu4 {
  background: #00FF7F;display: inline-block;margin: 10px 0;
  padding: 0;position: relative;width: 100%;z-index: 999}

#menu4 ul {list-style: none;margin: 0;padding: 0;position: relative}
#menu4 ul li {float: left;margin: 0;padding: 0;position: relative}
#menu4 ul li a {
  color: #333;display: block;font: bold 17px/1.5em sans-serif;
  min-width: 6em;margin: 0;padding: .25em .5em;transition: all 0.3s linear 0s}

#menu4 ul li a span {display: block;transition: all 0.3s linear 0s}
#menu4 ul li a .title {text-align: center}
#menu4 ul li a .exp {
  background: #FFC730;color: #333;font: bold 11px/1.5 Calibri;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);opacity: 0;
  padding: 0 .75em 0 0;text-align: center;border-radius:8px}

#menu4 ul li a:hover {background:#DC143C;border-radius:25px;box-shadow:inset 0 3px 0 0 #fff;}
#menu4 ul li a:hover .title {color: #fff;text-shadow:1px 2px 1px #111}
#menu4 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);opacity: 1}

#menu5 {
  background: #FFF;display: inline-block;margin: 10px 0;
  padding: 0;position: relative;width: 100%;z-index: 999}

#menu5 ul {list-style: none;margin: 0;padding: 0;position: relative;}
#menu5 ul li {
  border-left: 5px solid #888;float: left;margin: 0;
  padding: 0;position: relative}

#menu5 ul li:last-child {border-right: 5px solid #888}
#menu5 ul li a {
  color: #888;display: block;font: bold 18px/1.5em sans-serif;
  min-width: 6em;margin: 0}

#menu5 ul li a span {display: block;transition: all 0.5s linear 0s}
#menu5 ul li a .exp {
  color: #c00;font: bold 11px/1.5 sans-serif;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);opacity: 0;padding: .25em 0 0;text-align: right;
  text-transform: uppercase}

#menu5 ul li a .exp:before {content: attr(data-hex) "\00a0";font: 18px/1 sans-serif}
#menu5 ul li a:hover .title {
  color: #fff;text-shadow:1px 2px 1px #111;
  background:#DC143C;width:6em;padding-left:5px}

#menu5 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);opacity: 1}

#menu6 {
  background: #39f;border-radius: 10em;display: inline-block;
  margin: 10px 0;padding: 0;position: relative;width: 100%;z-index: 999}

#menu6 ul {
  float: right;list-style: none;margin: 0;
  padding: 0;position: relative;right: 50%}

#menu6 ul li {float: left;left: 50%;margin: 0;padding: 0;position: relative}
#menu6 ul li a {
  color: #00008B;display: block;border:4px double #39f;
  font:bold 14px/1.5em "Georgia";min-width: 8em;
  margin: 0;padding: .25em;text-align: center;
  text-transform: uppercase;transition: all 0.5s linear 0s}

#menu6 ul li a span {display: block;transition: all 0.5s linear 0s}
#menu6 ul li a .title {border-bottom: 2px solid #ccc}
#menu6 ul li a .exp {
  color: #FFFF00;font: 10px Georgia;letter-spacing: 1px;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);opacity: 0;
  padding: .25em 0 0;text-align: center}

#menu6 ul li a:hover {background: #DC143C;border:4px double #ccc}
#menu6 ul li a:hover .title {color: #fff;text-shadow:1px 2px 1px #111}
#menu6 ul li a:hover .exp {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100); opacity: 1}


Untuk Pemanggil HTML, cukup gunakan 1 atribut id pada menu navigasi title pilihan Anda, lalu ganti teks link-Url sesuai nice blog Anda pada kode yang saya beri warna Orange seperti ini:


<div class="navigasi">
   <div id="menu1"> <!..Tampilan Menu Navigasi 1 ..!>
<ul>
<li><a href="/"><span class="title">menu1</span><span class="exp">menu1</span></a></li>
<li><a href="/"><span class="title">menu2</span><span class="exp">menu2</span></a></li>
<li><a href="/"><span class="title">menu3</span><span class="exp">menu3</span></a></li>
<li><a href="/"><span class="title">menu4</span><span class="exp">menu4</span></a></li>
<li><a href="/"><span class="title">menu5</span><span class="exp">menu5</span></a></li>
</ul>
   </div>

   <div id="menu2">  <!..Tampilan Menu Navigasi 2 ..!>
<ul>
<li><a href="/"><span class="title">menu1</span><span class="exp">menu1</span></a></li>
<li><a href="/"><span class="title">menu2</span><span class="exp">menu2</span></a></li>
<li><a href="/"><span class="title">menu3</span><span class="exp">menu3</span></a></li>
<li><a href="/"><span class="title">menu4</span><span class="exp">menu4</span></a></li>
<li><a href="/"><span class="title">menu5</span><span class="exp">menu5</span></a></li>
</ul>
   </div>

   <div id="menu3"> <!..Tampilan Menu Navigasi 3 ..!>
<ul>
<li> .... </li>
.....
....
//dan seterusnya....
</ul>
   </div>
</div><!..ending navigasi..!>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= CSS Menu Navigasi Title Dengan 6 Pilihan
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

27 komentar

  1. Munu navigasinya banyak variannya (h) keren, tapi lebih lengkap lagi kalo ditambah efek dropdown/megamenu kan mba :)

    BalasHapus
    Balasan
    1. tinggal menambahkan CSS untuk mengatur tampilan sub menunya saja mas,

      <ul>
      <li><a href="#">Menu 1</a></li>
      </ul>
      <ul class="submenu">
      <li><a href="sub menu 1</a></li>
      </ul>

      Hapus
  2. Jujur saya belum berani merambah ke dunia css, jadi gak bisa otak-atik isi css hehe

    BalasHapus
    Balasan
    1. mungkin karena belum mencoba mas, jadinya sudah terpikirkan dahulu takut error,hehe..

      Hapus
    2. kaya saya dund, template tanpa diutak-atik bisa error (recent comment) :d

      Hapus
  3. menu navigasi bisa mempermudah pengunjung untuk membuka-buka artikel lain apalagi kalo menunya dibikin semenarik mungkin

    BalasHapus
  4. kalo saya masih tertarik ama menunya blog ini mbak :)
    bisakah dishare :)

    BalasHapus
  5. arghhhh pusing... saya semakin ngak bisa paham apa yg dibicarakan...

    BalasHapus
    Balasan
    1. kalau kode memang dengan penulisan teks bahasa inggris, tetapi kan tulisan artikel pakai bahasa lokal.

      mungkin belum terbiasa dengan Dunia Kode seperti ini tuan Najib, hehe..
      ntar juga terbiasa kok kalau mau mencoba.

      Hapus
  6. Wah scripnyt ribut juga ya

    BalasHapus
  7. devi ni jago amat :)
    mantap :D

    BalasHapus
  8. bisa diterapin di wp ga mbak :d
    hehe

    BalasHapus
  9. bgsu menu navigasi nya ,,, bisa menjadi rekomdasi buat temen ,,, hehe
    devy boleh gk tny diluar judul ? hehe
    ttp ttg blogspot juga sih ,,,hehe :D

    BalasHapus
    Balasan
    1. silahkan mas, tetapi jangan sering-sering ya, hehe..(just kidding)

      mau tanya apa mas, kalau bisa pasti Devy bantu.!

      Hapus
    2. di home page blog sy kn ada menu / bbrp judul yang tampil, suaya itu auto slide gimana yah ? hehe

      Hapus
    3. judl yang tampil paling atas dibawah menu navigasi ,,,

      Hapus
    4. blog yang choppie88 atau yang inspirasi hebat mas, soalnya kan kedua blog itu milik mas fiu, yang mana satu neh yang mas tanyakan.?

      kalau pada choppie88 ada judul dan thumbanail gambar, apakah itu yang mas fiu maksud.?

      Hapus
    5. iya bner yg di choppie88 ,,,yg ada judul dn thumbnail gmbar ,, itu biar auto slide gimana yah ? hehe

      Hapus
    6. wani piro..!!? hehe..

      Ok dech, dari bentuk widget itu dengan format variable axis:"x" (slide auto dari kanan ke kiri),namun karena perintahnya untuk menampilkan URL link posting blog, scriptnya seperti ini mas:

      <script>
      var tinycarousel_config = {
      url: '#',//ganti dengan URL Blog Anda
      numPosts: 9,//tentukan jumlah posting
      labelName: null,
      ....,
      nav: {prevText: 'Prev',nextText: 'Next',},
      carousel: {
      axis: "x",
      itemwidth: 190,
      itemheight: 360,
      itemmargin: 10,
      itempadding:10,
      visible: 4,
      display: 1,
      start: 1,
      interval: true,
      intervaltime: 3000,
      animation: true,
      duration: 1000,
      easing: "swing",
      callback: function() {}
      }
      };
      </script>


      Script diatas dalam tampilan completed show, seperti comment, date-post dan descripsi teks post, semua pengaturan ada pada js.

      hmmm...kalau gak salah widget seperti ini, sudah pernah Devy share dengan 2 varian style, untuk selengkapnya seperti keterangan kode, mas fiu bisa lihat disini:

      » Widget Popular Post With Slideshow Effect

      Hapus
    7. wani piro ? es doger deh ,,, gimana ? :)

      bntr tak pelajari dulu yah ,,hehe
      itu scritp diats peletakannya ada semua di judul yg direkomndasikan yah ,,, hehe

      Hapus
    8. sebelumnya tadi Devy sudah memeriksa Template kode blog mas fiu, tetapi samapi 2 kali saya tidak menemukan pengaturan apapun yang diletakkan pada tempalte untuk widget itu, apakah semua kode diletakkan langsung dalam halaman widgetnya kah mas.?

      Hapus
    9. iya bgtu ,,, sy juga mw tanyak hl itu ,,, di tutorial devy pelatakannya pada tambah widget ,,,sdngkan pelatakan bkn dstu ,,, jdi gmn yah ,,,heh

      Hapus
    10. soalnya Devy kagak tahu elemen apa yang digunakan pada bentuk CSS nya mas, apakah atribut id atau class.

      kalau mas fiu mau, coba kirimkan semua kodenya ke inbox email Devy saja, nanti devy periksa. (email: 77devy@gmail.com)

      Hapus
    11. boleh ... sy kirm yah ke email devy ,,,

      Hapus
    12. dah sy kirim ke emailnya devy ,,, :)

      Hapus
  10. Masih bingung dengan kod html nya...Perlu ambil masa utk install CSS menu navigasinya

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK