IT CODE: Mei 2014

HOW TO MAKE SIMPLE MENU WITH HTML AND CSS

Bagi para mahasiswa tingkat awal di Fakultas Teknik Komputer pasti akan belajar tentang css, html dan bagaimana membuat design web. Kamu-kamu bisa membaca postingan yang terdahulu jika anda baru ingin belajar design web dengan html , sebenarnya banyak cara dalam membuat design web...bisa menggunakan template yang banyak di internet atau membuat design sendiri.

Sekarang saya akan memberikan tutorial yang simple untuk membuat menu dengan html dan css.

Step - 1

Buat file css di folder (example : tiweb)

lalu buat script seperti :

/* CSS Document */

body{

}
.content{
       height: 25px;
    }
#nav, #nav ul{
       margin:0;
       padding:0;
       list-style-type:none;
       list-style-position:outside;
       position:relative;
       line-height:1.5em;
    }

    #nav a{
       display:block;
       padding:5px 5px;
       border:1px solid #1C5BA1;
       color:#FFFFFF;
       text-decoration:none;
       background-color: #1C5BA1;
       font-weight:bold;
    }

    #nav a:hover{
       background-color:#fff;
       color:#333;
    }

    #nav li{
       float:left;
       position:relative;
    }

    #nav ul {
       position:absolute;
       display:none;
       width:12em;
       top:2.3em;
    }

    #nav li ul a{
       width:12em;
       height:auto;
       float:left;


    }

    #nav ul ul{
       top:auto;
    }

    #nav li ul ul {
       left:12em;
       margin:0px 0 0 10px;
    }

    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
       display:none;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
       display:block;
    }

Step - 2 buat folder index.html dengan script :

<!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=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />

<title>Untitled Document</title>
</head>

<body>
<table align="center">
                 <TR>
                 <td><img src="it_header4.jpg" /></td>
                </TR>
                <TR>
                <TD height="25" width="800"><div class="content">
                  <nav>
                    <ul id="nav">
                      <li><a href="#"> Home  </a>

                      </li>
                      <li><a href="#">  News  </a></li>
                      <li><a href="#">  Project  </a>
                        <ul>
                            <li ><a href="#">PHP</a></li>
                            <li><a href="#">JAVA</a></li>



                        </ul>
                    </li>

                      <li><a href="#" >  Market  </a></li>
                       <li><a href="#" >  Join Us  </a></li>
                    </ul>

                  </nav>
                </TD>
                </TR>

        </table>

</body>
</html>