Desain Cara Membuat Menu, Drop Down Menu

Desain Cara Membuat Menu, Drop Down Menu - Hallo Kawan REZAMA SHARE, Pada Artikel yang anda baca kali ini dengan judul Desain Cara Membuat Menu, Drop Down Menu, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel design, Artikel PHP, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Desain Cara Membuat Menu, Drop Down Menu
link : Desain Cara Membuat Menu, Drop Down Menu

Baca juga


Desain Cara Membuat Menu, Drop Down Menu

Usahawan-maju | Desain Cara Membuat Menu, Drop Down Menu - Membuat agar menu pada aplikasi web yang kita buat bisa drop down kita membutuhkan script CSS untuk mengatur tampilan menu tersebut. Jadi pada dasarnya kita akan membuat script HTML yang menggunakan tag <ul> dan <li> sehingga akan membentuk seperti pola gambar sebagai berikut : 

http://usahawan-maju.blogspot.com/2015/04/usahawan-maju-desain-cara-membuat-menu-drop.html

Namun tampilan tersebut tidak cocok jika kita gunakan untuk membuat menu yang posisinya horizontal, karena akan sangat kacau tampilan yang kita dapatkan. Disini kita memerlukan script CSS agar tampilan menu horizontal yang kita butuhkan bisa sesuai dengan keinginan dan rapih dalam halam web kita. Perhatikan script berikut :

<style>
#menutop nav ul ul {
display: none;
}

#menutop nav ul li:hover > ul {
display: block;
}
#menutop nav ul {
background: #356b87;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
#menutop nav ul:after {
content: ""; clear: both; display: block;
}
#menutop nav ul li {
float: left;
}
#menutop nav ul li:hover {
background: #4b545f;
}
#menutop nav ul li:hover a {
color: #fff;
}

#menutop nav ul li a {
display: block; padding: 2px 30px;
color: #FFFFFF; text-decoration: none;
}
#menutop nav ul ul {
background: #356b87; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#menutop nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#menutop nav ul ul li a {
padding: 2px 30px;
color: #fff;
}
#menutop nav ul ul li a:hover {
background: #4b545f;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
}
</style>
<div id="menutop">
  <nav>
    <ul>
      <li><a href="?page=home"> Depan</a></li>
      <li><a href="?page=about" >Conto Agenda</a>
        <ul>
          <li><a href="#">Agenda1 </a></li>
          <li><a href="#">Agenda 2</a></li>
        </ul>
      </li>
      <li><a href="?page=help"> Pengguna </a></li>
      <li><a href="?page=contact"> Organisasi Contoh</a>
        <ul>
          <li><a href="#">Umum1</a></li>
          <li><a href="#">Umum2</a></li>
          <li><a href="#">Umum3</a></li>
          <li><a href="#">Umum4</a></li>
          <li><a href="#">Umum5</a></li>
        </ul>
      </li>
    </ul>
 </nav>
</div>

Jika sudah selesai dengan script diatas, Anda bisa coba lihat hasilnya kurang lebih sebagai berikut :

http://usahawan-maju.blogspot.com/2015/04/usahawan-maju-desain-cara-membuat-menu-drop.html

Sederhana bukan. Anda bisa mengubah warna, font dsb sesuai dengan bentuk yang anda inginkan, namun pada postingan kali ini sudah tersampaikan  Cara Membuat Menu, Drop Down Menu. Semoga bisa bermanfaat


Demikianlah Artikel Desain Cara Membuat Menu, Drop Down Menu

Sekianlah artikel Desain Cara Membuat Menu, Drop Down Menu kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Desain Cara Membuat Menu, Drop Down Menu dengan alamat link https://rezamashare.blogspot.com/2015/04/desain-cara-membuat-menu-drop-down-menu.html

0 Response to "Desain Cara Membuat Menu, Drop Down Menu"

Posting Komentar