Menu Horizontal Dengan 2 Submenu Sederhana

Menu Horizontal Dengan 2 Submenu Sederhana

Bola Hero Gawai

Menu Horizontal Dengan 2 Submenu Sederhana

Menu Horizontal Dengan 2 Submenu
Menu merupakan sebuah elemen blog yang tidak bisa dilepaskan. Menu merupakan sebuah navigasi untuk memudahkan pengunjung mencari artikel sesuai katagori yang disajikan. Sepertinya tidak akan habis bahasan dengan menu ini dengan beraneka ragam modifikasinya sehingga tampilannya menambah elegan sebuah blog.

Dan kali ini saya akan share sebuah menu yang saya bilang cukup sederhana karena hanya menggunakan kode CSS atau pure CSS.

Menu horizontal ini memiliki 2 sub menu sehingga memungkinkan untuk menampung banyak katagori di dalamnya. Karena menu ini menggunakan pure CSS, maka ini tidak akan memberatkan loading blog. Seperti biasa saya menggunakan background warna cerah yang bisa Anda lihat pada link demo di bawah ini.


Dan menu ini bisa Anda modif lagi pada background-nya agar lebih sesuai dengan tema blog Anda.

Kode CSS


#menutop ul,
#menutop li,
#menutop span,
#menutop a {
  margin: 0;
  padding: 0;
  position: relative;
}
#menutop {
  height: 49px;
  background: #D5D5D5;
  border-bottom: 4px solid #59c5ff;
  width: auto;
}
#menutop:after,
#menutop ul:after {
  content: '';
  display: block;
  clear: both;
}
#menutop a {
  background: #D5D5D5;
  color: #000;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#menutop ul {
  list-style: none;
}
#menutop > ul,#menutop > ul > li {
  float: left;
}
#menutop > ul > li > a {
  color: #000;
  font-size: 12px;
}
#menutop > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #59c5ff;
  margin-left: -10px;
}
#menutop > ul > li.active:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #59c5ff;
  margin-left: -10px;
}
#menutop > ul > li.active > a,#menutop > ul > li:hover > a {
  background: #ececec;
}
#menutop .menu-sub {
  z-index: 1;
}
#menutop .menu-sub:hover > ul {
  display: block;
}
#menutop .menu-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#menutop .menu-sub ul li {
  margin-bottom: 0px;
}
#menutop .menu-sub ul li a {
  background: #59c5ff;
  border-bottom: 1px solid #8cd7ff;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}
#menutop .menu-sub ul li:hover a {
  background: #26b3ff;
}
#menutop .menu-sub .menu-sub:hover > ul {
  display: block;
}
#menutop .menu-sub .menu-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#menutop .menu-sub .menu-sub ul li a {
  background: #26b3ff;
  border-bottom: 1px solid #8cd7ff;
}
#menutop .menu-sub .menu-sub ul li a:hover {
  background: #0daaff;
}

Kode HTML


<div id='menutop'>
<ul>
   <li class='active'><a href='/' target='_blank'><span>Home</span></a></li>
   <li class='menu-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='menu-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='menu-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
       <li class='menu-sub'><a href='#'><span>More Menu</span></a>
      <ul>
         <li class='menu-sub'><a href='#'><span>More Menu 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Menu 1</span></a></li>
               <li class='last'><a href='#'><span>Sub Menu 2</span></a></li>
            </ul>
         </li>
         <li class='menu-sub'><a href='#'><span>More Menu 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div>

Selamat mencoba dan berkreasi....

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

58 Comments Add Comment

Mantap kang menunya ... aktiv terus yeuh update'y hehe

Balas

Selamat siang aku kira aku di sini hanya bisa nyimak saja..
Karenanya aku nggak ngerti tentang ini CSS. dll...

Balas

Hehehehe muhun kang mumpung aya waktos =D

Balas

Tar lama-lama juga kalau sering lihat pasti ngerti sis =D

Balas

keren mas, oh ya share dong menu down yang ada gambar persis kayak okezone atau merdeka.com mas adhy :)

Balas

mantaff kang, *jujur saya gak ngerti :D

saya hanya posting, blogwalking :D udah gitu aja

Balas

Asa-asa bogoh kang kana menu na... :)
Mung menu resvonsive na masih tumpang tindih nya Kang, te sapertos modifan tinu maskolis.

Balas

Mega menu ya sis...biasanya cukup ribet... Nanti kalau ada yang gampang akan saya coba share :D

Balas

Tar lama-lama juga pasti ngerti sis Dwi hehehehe :D

Balas

Muhun kang nu ieu teu acan responsive heheehe :D

Balas

Mantap ya menunya sangat keren, bisa membuat blog jadi terlihat cantik. Apalagi dibuat dengan css, tentu lebih bersahabat lagi dengan loading blog.

Balas

itu kan pake CSS mas ditambah kerangkanya HTML :D

Balas

keren pisan menunya :D

Balas

Simak Kang Menu nya cukup Ramping dan elegan kelihatnya
Buat blog saya kayanya Pas gak yah. lagi nyari menu buat
Top blog saya Kang di raba dulu yah Kang Makasih :-d

Balas

Sob, kalau menu yg tampil di seluler gimana caranya?

Balas
This comment has been removed by the author.

nyimak, keren dan ringan :-d cocok buat yg lg ada proyek pembuatan template ^_^

Balas

Berkreasi tanpa batas. Good job mas adi, mungkin akan saya terapkan di blog lain :D

Balas

wah bagus banget nih mas menu nya

Balas

bagus mas menunya :) tapi lagi nggak edit2 template mas :D hehehe

Balas

mas ,request tutorial buat tampilan blog kaya blog mas...... http://4.bp.blogspot.com/-ANLe6fPPNyE/UqyMSq0_a8I/AAAAAAAAAyM/ZPbACWST9kU/s1600/KOMPI%2BAJAIB.png

Balas

Keren sekali mas tampilannya ... :) Terimakasih sudah berbagi :D

Balas

Mantap kang Adhy :-bd . Kapan2 saya coba ah di blog kedua, hehe:D

Balas

Kang Adhy saya mau request template dong, hehe :D Template yang valid html5 :)

Siapa tau templatenya tenar :D

Balas

Top dah menuna Kang, Muhun pisan nya

Balas

wah kren mas menunya.. kebetulan di tampat saya belum saya kasih menu.. jadi bisa buat referensi nih mas... terimakasih mas. kapan kapan tak praktekin....

Balas

Betul mas Felix, dengan pure CSS akan lebih bersahabat dengan loading blog.

Balas

Hatur nuhun kang Saeful :D

Balas

Mangga dicobian kang Saud =D Diutak-atik deui biar pas dengan blognya :D

Balas

Bisa dicoba di sini http://www.kompiajaib.com/2013/10/membuat-menu-header-responsive-pure-css.html atau di sini http://www.kompiajaib.com/2013/12/simple-menu-responsive-dengan-jquery.html

Balas

Iya sis lumayan ringan :D

Balas

Iya silahkan dicoba kang :D

Balas

Terima kasih sista =D

Balas

Bisa dicoba kapan-kapan =D

Balas

Itu scriptnya dari template Kompi Wide yang dishare di Maskolis mas... :D

Balas

Sama-sama mas :D

Balas

Iya silahkan dicoba mas =D

Balas

Sebenarnya saya sudah share beberapa template yang valid html5 dan css3, namun tentunya selanjutnya tergantung pengelola blognya dalam menambahkan widget atau memodifikasinya. Bisa aja template yang tadinya vaid menjadi tidak valid.

Balas

Sama-sama mas Cahyo :D Bagaimana bisnisnya lancar? =D mudah-mudahan lancar ya amiin.

Balas

Silahkan dicoba mas Nady :D

Balas

wah keren mas menu navigasi nya. ada variasi nya dengan sub menu atau apa itu namanya drop down. saya dulu pernah juga pasang menu drop down di blog saya, tapi malah erorr tempalte nya hehehe :D
ya udah akhir nya pasang menu horizontal biasa aja :)

Balas

Iyah Kang kalau saya bisa otak atik sesuaikan Script menu Horizontal ini
Akan saya pasang. tapi pernah coba pakai dapat dari teman gak cocok

Balas

Mampir lagi Kang harus baca bolak balik samapi 5 X Atau lebih
Agar saya betul-betul hapal memasang Menu keren ini makasih Kang Adhy :-d

Balas

kaynya kang kompi suka yg enteng2..

Balas

Mantap mas kreasinya :D hehe nyimak aja deh, soalnya blog saya udah ada navigasinya :D

Balas

Kang Adhy, Saya minta Link Download template valid html5 dong, atau share aja di blog kompi, siapa tau kedepannya template buatan Kang Adhy banyak peminat nya :D

Balas

Heheehe... kalau mau silahkan coba dengan yang ini, loadingnya ringan :D

Balas

Ah kang Saud suka merendah hehehe =D

Balas

Iya mas hehehee :D

Balas

Iya mas silahkan hehehehe :D

Balas

Nanti kalau ada waktu saya bikin lagi =D

Balas

Btw template kompiana valid html5 gak kang ???

Balas

Template Kompiana belum kang... itu udah lama saya bikinnya sebelum paham validasi HTML5

Balas

Tapi aneh kok.. Aku makin lama lihat malah makin pusing.
Karena aku cuma pakai hp

Balas

Sudah responsive atau belum Mas ??

Balas

Ok sip kang Adhy :-d Saya tunggu template buatan kang Adhy yang josss..

Balas

pagi mas, oya untuk kode css dan html ditaruh dimana ya mas.....buat newbie kaya gini bner2 gak tau
mohon penjelasan lengkapnya mas
terima kasih

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×