BELAJAR WEB DESAIN

Membuat menu navigasi

kursus web design

Untuk membuat menu navigasi ikuti langka-langka berikut ini:

Buat kode html seperti berikut ini:

<div class="navigasi">
<ul>
<li> <a class="menu" href="#"> <img src="img/forum.png" width="38" height="38" border="0" align="left" hspace="5" />Home </a>  </li>
<li> <a class="menu" href="#"> <img src="img/forum.gif" width="32" height="32" align="left" border="0"  hspace="5" />Product </a>  </li>
<li> <a class="menu" href="#"> Download </a>  </li>


</ul>
</div>

Siapkan gambar icon yang akan anda pakai

 

Buat kode css seperti berikut ini.

 

.navigasi li {
     list-style:none;
    
     text-decoration:none;
     text-align: center;
    
 }
 
  .menu
 {
     color:#F00;    
     width:130px;
     list-style:none;
     height:30px;
     float:left;         
     background-color:#666;
     margin:5px;
     padding-top:10px;
     text-decoration:none;
     box-shadow:2px 2px 5px 1px #F90;
     border-radius:10px 10px 10px 10px;
     }

 .menu img  {
     margin-top:-8px;
      text-align:left;
      margin-right:-15px;
    
            
     }
 
 
 .menu:hover{
     background-color:#030;
     color:White;    
 }


 Download kode lengkapnya disini