Powered by Blogger.
RSS

Membuat Menu dengan HTML dan CSS

Menu Vertikal


Langkah membuat menu vertikal seperti tampilan di atas:

1.  Buat file HTML sebagai berikut :
            <ul>

            <li><a href="#">Product</a></li>
            <li><a href="#">Galery</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Logout</a></li>
</ul>


 
      (Hasil Koding langkah I)


2.  
Buat perintah CSS untuk menghilangkan style list dan margin text



      #vertical ul


            {
                        list-style-type:none;
                        margin:0;
                        padding:0;
            }
       Perintah list-style-type:none; digunakan untuk menghilangkan style list. Kemudian untuk 



       menghilangkan margin digunakan perintah margin:0 dan padding:0



   



       (Hasil Koding langkah II)




      3. Atur batas kiri list dengan perintah padding:


    #vertical ul li
            {
                        padding-left:.1em;
            }

4. 
Berikan perintah formatting dan pewarnaan pada list yang digunakan sebagai link




#vertical ul li a
                        {
                                    font-family:"Times New Roman", Times, serif;
                                    text-decoration:none;
                                    color:#000066;
                                    background-color:transparent;
                                    width:8em;
                                    display:block;
                                    border-bottom:dotted 1px #000033;
                                    border-left:solid 1px #FFFFFF;
                                    border-top:solid 1px #FFFFFF;
                                    padding: .3em .5em;
                        }
         Keterangan:
    
      Perintah CSS
           Fungsi
      font-family:"Times New Roman", Times, serif;
       Menentukan jenis font text yang digunakan
      text-decoration:none;
       Menghilangkan garis bawah pada text
      color:#000066;
       Menentukan warna text
      background-color:transparent;
       Memberikan warna background transparan pada text
      width:8em;
       Menentukan lebar menu sebanyak 8 x karakter
      display:block;
       Menentukan agar yang dijadikan link tidak textnya saja, melainkan satu kotak selebar 8em.
      border-bottom:dotted 1px #000033;    
      border-left:solid 1px #FFFFFF;
      border-top:solid 1px #FFFFFF;
      Menentukan ketebalan garis sebesar 1px dan warnanya masing-masing baik bawah, kiri, atas
      padding: .3em .5em;
      Mengatur jarak text dengan blok(Kotak)


         


(   Hasil Koding Langkah IV)




    5.  Memberikan perintah css saat kursor didekatkan ke menu:


     #vertical ul li a:hover
            {
                        font-weight:bold;
                        border-right:solid 1px #000033;
                        border-bottom:solid 1px #000033;
                        border-left:solid 1px #FFFFFF;
                        border-top:solid 1px #FFFFFF;
            }

       Perintah  #vertical ul li a:hover, merupakan event saat mouse berada di atas menu, kemudian  diberikan perintah cetak tebal terhadap textnya dengan perintah : font-weight:bold; dan border pada masing-masing sisinya.

6. Melengkapi Tag HTML dengan perintah css yang dudah dibuat, tentunya harus dilinkkan terlebih dahulu kalau cssnya dibuat secara external.


<div id="vertical">
            <ul>
                        <li><a href="#">Product</a></li>
                        <li><a href="#">Galery</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">Logout</a></li>
            </ul>
</div>

(Hasil Akhir)


KODE SELENGKAPNYA:



Kode HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>
<body>
<div id="vertical">
<ul>
<li><a href="#">Product</a></li>
<li><a href="#">Galery</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</body>
</html>

Kode CSS
#vertical ul
                {
                                list-style-type:none;
                                margin:0;
                                padding:0;
                }
#vertical ul li  {padding-left:.1em;}
#vertical ul li a
                                {
                                                font-family:"Times New Roman", Times, serif;
                                                text-decoration:none;
                                                display:block;
                                                color:#000066;
                                                background-color:transparent;
                                                width:8em;
                                                border-bottom:dotted 1px #000033;
                                                border-left:solid 1px #FFFFFF;
                                                border-top:solid 1px #FFFFFF;
                                                padding: .3em .5em;
                                               
                                }
#vertical ul li a:hover
                                {
                                                font-weight:bold;
                                                border-right:solid 1px #000033;
                                                border-bottom:solid 1px #000033;
                                                border-left:solid 1px #FFFFFF;
                                                border-top:solid 1px #FFFFFF;










  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS