Sample Menu: Menu Horizontal

Tampilkan postingan dengan label Menu Horizontal. Tampilkan semua postingan

Jumat, 11 Agustus 2017

Membuat Menu Horizontal Dropdown dengan CSS

Menu web/blog sangat bervariasi salah satunya dibuat dengan css, ada bentuk menu berupa text maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada artikel kali ini anda akan mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css.

Langkah-langkanya sebagai berikut :

Membuat susunan list menu untuk dropdown dalam html, kodenya berikut ini :

<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
    <ul>
    <li><a href="#11">Sub Menu 1</a></li>
    <li><a href="#22">Sub Menu 2</a></li>
    </ul>
</li>
<li><a href="#2">Menu 2</a>
    <ul>
    <li><a href="#21">Sub Menu 1</a></li>
    <li><a href="#22">Sub Menu 2</a></li>
    <li><a href="#23">Sub Menu 3</a></li>
    <li><a href="#24">Sub Menu 4</a></li>
    </ul>
</li>
<li><a href="#3">Menu 3</a>
    <ul>
    <li><a href="#31">Sub Menu 1</a></li>
    <li><a href="#32">Sub Menu 2</a></li>
    <li><a href="#33">Sub Menu 3</a></li>
    <li><a href="#34">Sub Menu 4</a></li>
    </ul>
</li>
</ul>

Dari kode html di atas menampilkan hasil sementara sebagai berikut :

Kemudian kita buat kode css berikut, dengan menambahkannya pada bagian <head>..</head>

<style type="text/css">
.dropmenu {
    background: #616161;
    height: 30px;
    list-style-type: none;
    margin: 0;
    padding: 0px;
}
.dropmenu li {
    border-right: solid 1px white;
    float: left;
    height: 30px;
}
.dropmenu li a {
    color: #fff;
    display: block;
    font: 12px arial, verdana, sans-serif;
    font-weight: bold;
    padding: 9px 20px;
    text-decoration: none;
}
.dropmenu li:hover { background: #778899; position: relative; }
.dropmenu li:hover a { text-decoration: underline; }
.dropmenu li:hover ul {
    background-color: #3f4a54;
    border: 1px solid grey;
    left: 0px;
    padding: 3px;
    top: 30px;
    width: 160px;
}
.dropmenu li:hover ul li { border: none; height: 18px; }
.dropmenu li:hover ul li a {
    background-color: #778899;
    border: 1px solid transparent;
    color: #fff;
    display: block;
    font-size: 11px;
    height: 18px;
    line-height: 18px;
    padding: 0px;
    text-decoration: none;
    text-indent: 5px;
    width: 158px;
    padding: 3px;
}
.dropmenu li:hover ul li a:hover {
    background: silver;
    border: solid 1px #444;
    color: #000;
    height: 18px;
    padding: 3px;
}
.dropmenu ul {
    left: -9999px;
    list-style-type: none;
    position: absolute;
    top: -9999px;
}
</style>

Kode-kode diatas akan menghasilkan tampilan seperti berikut :

Menu ini sudah dicobakan menggunakan Browser firefox, google chrome, dan internet explorer. Semuanya dapat dijalankan dengan normal yang artinya menu dropdown yang dibuat dengan css lebih kompatibel dan lebih ringan jika ditampilkan.

Re-share from http://script-media.net/

Label: Dropdown Menu, Menu, Menu Horizontal, Script menu

Sabtu, 05 Agustus 2017

Menu dan Sub Menu Cantik dan Sederhana

Berikut ini adalah salah satu Script dan Preview Menu Horizonatal beserta Sub menu yang cukup sederhana namun kelihatan cantik dan elegan untuk mempercantik tamiplan menu Blog/ Website sobat. Dan cara memasangnyapun cukup simple tanpa melalui proses edit HTML.

Ikuti langkah-langkah berikut :

Login ke Blogger
Pilih Tata Letak => Add Gadget => HTML/ Java Script
Masukkan Script dibawah ini
<style>/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #fff; }
#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu + Sub Menu</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a></li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
</ul>
</div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/script-menu-horizontal-sub-menu.html" target="_blank"><span style="font-size: small;">[ Get Widget ]</span></a></div>
Edit Sesuai keinginan
Klik Save ( Simpan )

Hasilnya seperti dibawah ini :

[ Get Widget ]

Demikian semoga bermanfaat dan silahkan di COBA.

Label: Menu, Menu Horizontal, Script menu

Kamis, 16 Maret 2017

Cara Mudah membuat Menu Horizontal Dengan Mudah dan Praktis

Berikut ini adalah cara termudah membuat Menu Horizontal dan Sub Menu di Blog, Silahkan simak dan ikuti dengan seksama :

1. Login ke Account Blogger sobat
2. Pilih Tata Letak ==> Pilih Tambah Gadget
3. Pilih HTML/ Java Script
4. Copy Paste kode dibawah ini

<pre data-codetype="HTML" title="HTML"><code class="html"><style type="text/css">
/*CSS MENU*/
#menu{background:#343434;color:#eee;height:35px;border-bottom:4px solid #eeeded}
#menu ul,#menu li{margin:0 0;padding:0 0;list-style:none;z-index:9999;}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;border-left: 1px solid #111;text-transform:uppercase}
#menu li:first-child{border-left: none}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#eee;}
#menu li:hover > a,#menu li a:hover{background:#111}
#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:12px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#111;position:absolute;z-index:99;display:none;border:0;}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.home {background: #c00;}
#menu a.sub{padding:0 27px 0 14px}
#menu a.sub::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:#333;}
</style>

<nav id="menu">
<input type="checkbox" />
<label>≡Navigation</label>
<ul>
<li><a class="home" href="/">Home</a></li>
<li><a href="<mark>#</mark>"><mark>About</mark></a></li>
<li><a href="<mark>#</mark>"><mark>Daftar Isi</mark></a></li>
<li><a href="<mark>#</mark>"><mark>Menu</mark></a></li>
<li><a href="<mark>#</mark>"><mark>Menu 2</mark></a></li>
<li><a href="<mark>#</mark>"><mark>Menu 3</mark></a></li>
<li><a href="<mark>#</mark>"><mark>Login Admin</mark></a></li>

<li><a class="sub" href="<mark>#</mark>"><mark>Menus</mark></a>  <ul class="menus">
<li><a href="<mark>#</mark>" title="Menus"><mark>Menus 1</mark></a></li>
<li><a href="<mark>#</mark>"><mark>Page</mark></a></li>
<li><a href="<mark>#</mark>"><mark>Menus2</mark></a></li>
<li><a href="<mark>#</mark>"><mark>Menus 3</mark></a></li>
<li><a href="<mark>#</mark>"><mark>Menus 4</mark></a></li>
<li><a href="<mark>#</mark>"><mark>Menus 5</mark></a></li>
</ul>
</li>
  </ul>
</nav>

</code></pre>
<br />

5. Save ( Simpan )
6. Lihat hasilnya.

Demikian tutorial ini Semoga bermanfaat ...

Label: Menu, Menu Horizontal, Script menu

Script Menu Horizontal Cantik Untuk Memperindah Blog

Berikut ini adalah tutorial cara memasang script menu Horizontal cantik di Blog :

1. Login ke akun Blogger anda

2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript

3. Masukkan script dibawah ini

4. Edit sesuai keinginan anda , saya rasa anda sudah tau

5. Klik simpan

Maka hasilnya kurang lebih seperti dibawah ini :

[ Get Widget ]

Label: Menu, Menu Horizontal

Sample Menu

Jumat, 11 Agustus 2017

Membuat Menu Horizontal Dropdown dengan CSS

Sabtu, 05 Agustus 2017

Menu dan Sub Menu Cantik dan Sederhana

Kamis, 16 Maret 2017

Cara Mudah membuat Menu Horizontal Dengan Mudah dan Praktis

Script Menu Horizontal Cantik Untuk Memperindah Blog

Subscribe now!

Labels

Popular Posts

Follow us!

StatCounter

Archive

About

Links

Label

Labels