Maful Prayoga Arnandi: css

<div class="separator" style="clear: both; text-align: center;">
<a href="http://line25.com/wp-content/uploads/2012/css-menu/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="206" src="http://line25.com/wp-content/uploads/2012/css-menu/5.jpg" width="320" /></a></div>
<span style="font-family: Verdana,sans-serif;">Halo teman, lama gak posting nih gara-gara ada kerjaan, dan juga disibukan setelah Ukangan Kenaikan Kelas.</span><br />
<span style="font-family: Verdana,sans-serif;">Pada kesempatan ini admin akan membuat contoh Web Design yaitu Dropdown, Drpdown merupakan hal yang sudah lazim yang ada pada website dari biasa maupun Luar Biasa, wkwkwk</span><br />
<br />
<a href="http://www.niagahoster.co.id/ref/7097" target="_blank"><img alt="Hosting Unlimited Indonesia" border="0" height="250" src="http://www.niagahoster.co.id/banners/Niaga_banner2_300x250.gif" width="300" /></a>
<br />
<span style="font-family: Verdana,sans-serif;"> Dalam tutorial ini admin akan membuat hanya dalam satu file saja karena kodenya tidak terlalu banyak.</span><br />
<span style="font-family: Verdana,sans-serif;">Kita mulai saja, pertama buat folder ( terserah mau dimana saja yang penting bisa diakses )</span><br />
<span style="font-family: Verdana,sans-serif;">Untuk membuatnya pastinya harus mempunyai Text Editor ( Notepad, Sublime Text ) dan Web Browser ( Firefox, Google Chrome ) </span><br />
<span style="font-family: Verdana,sans-serif;">Kedua buat file dengan nama index.html dan masukan kode berikut</span><br />
<span style="font-family: Verdana,sans-serif;"><br /></span>
<br />
<pre class="numbered" data-codetype="HTML" title="Click"><code class="xml">
<!DOCTYPE html>
<html>
<head>
 <title>Drop Down | Menu</title>
 <style type="text/css">
 *{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
 }/*simple CSS riset*/
 nav ul{
  list-style: none;
  background-image: -webkit-linear-gradient(top,#EBEBEB,#D7D7D7);
  background-color: #EBEBEB;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
 }
 nav ul:after{
  content: "";
  display: block;
  clear: both;
 }
 nav ul li{
  float: left;
  position: relative;
 }
 nav ul li a{
  color: #111;
  display: block;
  font-size: 12px;
  padding: 3px 20px;
  text-decoration: none;
 }
 nav ul ul{
  position: absolute;
  top: 100%;
  background: white;
  display: none;
 }
 nav ul ul li{
  float: none;
 }
 nav ul li:hover>ul{display: block;}
 nav ul li:hover>a, nav ul ul li:hover>a{
  color: white;
  background-image: -webkit-linear-gradient(top,#506def,#2041DE);
  background-color: #506def;
 }
 nav ul ul ul{
  position: absolute;
  left: 100%;
  top: 0;
 }
 </style>
</head>
<body>
<nav>
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Blog</a>
  <ul>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">Javascript</a>
   <ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Javascript</a></li>
   </ul>
   </li>
  </ul>
  </li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</nav>

</body>
</html></code></pre>
<br />
<span style="font-family: Verdana,sans-serif;">Setelah memasukan kode, untuk melihat hasilnay hanya double click pada file, jika menggunakan Firefox akan langsung terlihat hasilnya</span>

Membuat Dropdown dengan CSS dan HTML

Halo teman, lama gak posting nih gara-gara ada kerjaan, dan juga disibukan setelah Ukangan Kenaikan Kelas. Pada kesempatan ini admin akan...

Maful Prayoga Arnandi

Membuat Dropdown dengan CSS dan HTML

Mengenai Saya

Pasang Iklan

Popular Posts