Langsung ke konten utama

membuat menu horisontal dan vertikal dengan css

membuat menu vertikal sederhana dengan mengunakan css
buat fail index.html dan style.css dalam satu polder

index.html

==================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bikinmenubarlianno</title>
<link rel="stylesheet"  type="text/css" href="barlianno.css"/>
</head>

<body>
<ul id="menu">
 <li><a href="#">Menu 1  </a></li>
 <li><a href="#">Menu 2</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 3</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 4</a>
  <ul class="sub-menu">
   <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 5</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
   <li><a href="#">Sub Menu 4</a></li>
  </ul>
 </li>
</ul>
</body>
</html>
===================================================
fail barlianno.css
===================================================
@charset "utf-8";
/* CSS Document */

#menu, ul#menu ul.sub-menu {
 padding:0;
 margin:50;
 text-align:center;
 width:200px; /*agar menjadi menu horijontal wide di hilangkan*/
 opacity:.9
}

#menu li, ul#menu ul.sub-menu li {
 list-style-type:none;
 display:inline-block;
 width:120px
}

ul#menu li a, ul#menu li ul.sub-menu li a {
 text-decoration:none;
 color:#8557FB;/*warna tek*/
 background:#666;
 padding:6px;
 display:block
}

ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
 background:#33FF66; /*kalow di dekatkan mose warna akan berubah jadi hijau muda */
}

ul#menu li {
 position:relative
}

ul#menu li ul.sub-menu {
 position:right;/*kalow untuk menu horisontal pakai absolute*/
 top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
 display:none
}

ul#menu li:hover ul.sub-menu {
 display:block
}
==============================================================
lihat di boser
semoga bermangpaat.

cara membuat menu horisontal

bikin fail dengan nama index.html dan style.css

index.html
==============================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bikinmenubarlianno herisontal</title>
<link rel="stylesheet"  type="text/css" href="style.css"/>
</head>

<body>
<ul id="menu">
 <li><a href="#">Menu 1  </a></li>
 <li><a href="#">Menu 2</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 3</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 4</a>
  <ul class="sub-menu">
   <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 5</a>
  <ul class="sub-menu">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
   <li><a href="#">Sub Menu 4</a></li>
  </ul>
 </li>
</ul>
</body>
</html>
========================================================
fail style.css
========================================================
 @charset "utf-8";
/* CSS Document */

#menu, ul#menu ul.sub-menu {
 padding:0;
 margin:0;
 text-align:center;
 opacity:.9
}

#menu li, ul#menu ul.sub-menu li {
 list-style-type:none;
 display:inline-block;
 width:120px
}

ul#menu li a, ul#menu li ul.sub-menu li a {
 text-decoration:none;
 color:#8557FB;/*warna tek*/
 background:#666;
 padding:5px;
 display:block
}

ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
 background:#33FF66; /*kalow di dekatkan mose warna akan berubah jadi hijau muda */
}

ul#menu li {
 position:relative
}

ul#menu li ul.sub-menu {
 position: absolute;
 top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
 display:none
}

ul#menu li:hover ul.sub-menu {
 display:block
}
=================================================================
lihat di broser

kolow kita perhatikan dalam pembuatan menu horisontal dan pertikal sama, kita haya mengedit sedikit fail css pada css horisontal yaitu

kita haya merubah
=================================
#menu, ul#menu ul.sub-menu {
 padding:0;
 margin:0;
 text-align:center;
 opacity:.9
}
=================================
agar jadi menu vertikal ditambah dengan width 200px dirubah menjadi:
=================================
#menu, ul#menu ul.sub-menu {
 padding:0;
 margin:50;
 text-align:center;
 width:200px; /*agar menjadi menu horijontal wide di hilangkan*/
 opacity:.9
}
=================================
 posisi:absolut dirubah menjadi posisi: right maka droup menu menjadi tidak bertabrakan.pada menu pertikal.
=================================
ul#menu li ul.sub-menu {
 position: absolute;
 top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
 display:none
}
===============================
dirubah menjadi
===============================

ul#menu li ul.sub-menu {
 position:right;/*kalow untuk menu horisontal pakai absolute*/
 top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
 display:none
}
=============================
selamat mencoba dan semoga bermanfaat.


telah di uji coba di lab barlianno

Komentar

Posting Komentar

Postingan populer dari blog ini

agar phpmyadmin bisa di akses dari luar

Setting local server XAMPP agar bisa di panggil dari komputer lain dalam jaringan katika akan membuat aplikasi client server dengan mengandalkan localserver XAMPP hal yang apling penting yaitu XAMPP pada komputer server dapat dipanggil dari komputer client. Agar XAMPP komputer server dapat dipanggil maka perlu kita lakukan pengaturan sebagai berikut: Buka file httpd.conf   di folder C:\xampp\apache\conf , ggunakan notepad atau notepad++ untuk lebih mudahnya Cari tulisan LoadModule vhost_alias_module modules/mod_vhost_alias.so  dan hilangkan tanda pagar (#) didepannya. Cari tulisan Include "conf/extra/httpd-vhosts.conf" apabila didepanya masih ada tanda # hilangkan tanda tersebut. Selanjutnya kita perlu mengatur siapa saja yang dapat mengakses XAMPP pada komputer server, langkah-langkahnya seperti berikut. Buka file httpd-xampp.conf di C:\xampp\apache\conf\extra . Dibagian paling bawah terdapat tulisan seperti berikut view plain print ?
2 komentar
Baca selengkapnya

CARA MENGHITUNG Solar Charge Controller

CARA MENGHITUNG SOLAR CHARGE CONTROLLER Untuk menghitung kebutuhan solar charge controller, maka kita harus mengetahui dulu karakteristik dan spesifikasi dari solar panel, pada solar panel terdapat spesifikasi sebagai berikut : maximum power (Pm)                            = 110 Wp Optimum Power Voltage (Vmp)             = 16,7 VDC Optimum Operation Current (Imp)        = 6,6 A Open Circuit Voltage (Voc)                    = 20,7 A short circuit current (Isc)                      = 7,5 A yang harus diperhatikan adalah angka Isc (short circuit current) , nilainya dikalikan dengan jumlah panel surya, hasilnya merupakan nilai berapa nilai minimal dari charge controller yang dibutuhkan contoh kita menngunakan 1 panel surya 110 wp maka kita memakai controler 10 A. kalow kita memakai dua buah panel surya dipasang paraler maka kita butuk kontroler 7,5 X 2 = 15 A. maka sebaiknya kita menggunakan controler yang 20 A agar aman. cara kerja controler.   Solar charge controller , ad
Posting Komentar
Baca selengkapnya

cara pasang jarum dot matrix lq 2180

memasang jarum 24 pin dotmatrik merupakan hal yang paling sulit, dan memerlukan kesabaran, apalagi jika kita tidak mengetahui urutan pemasangan jarum nya. di bawah ini saya akan mencoba memasang jarum serta tahapan tahapannya. kunci dari pemasangan terletak pada pemasangan jarum pendek. kita harus memastikan jarum pendek terpasang secara sempurna pada titik lobang yang telah ditentukan.kita harus memasang jarum pendek dari urutan pertama dan meloncati satu lobang untuk nantinya dipasang jarum panjang.kalow pemasangan jarum pendek tidak terpasang dengan sempurna maka pada waktu pemasangan jarum panjang akan susah masuk. dan harus di ulang dari awal capepee dehhh.   gambar di atas memperlihatkan tahap pemasangan jarum pendek sampai ke jarum panjang. setelah pemasangan jarum selesai dan head sdiap di coba . selamat mencoba telah di uji di lab barlianno. http://www.sewadpc.com/
9 komentar
Baca selengkapnya