18%
25%
50%
75%

Kripkorn Studios | Komuniti Drupal phpBB Malaysia

Membina menu dengan CSS

Laman Web Penulis: kripkorn (Dec 02, 2008)
kemas kini Kemas kini: Mar 17, 2012
Artikel bebas-Membina menu dengan CSS

Sinopsis

Dalam tutorial ini, saya akan tunjukkan untuk menghasilkan tiga jenis menu yang menarik dengan menggunakan CSS dalam Dreamweaver. Jika tiada perisian Dreamweaver, tutorial ini boleh dilakukan menerusi perisian teks editor seperti Notepad.

Kesemuanya sangat senang, sekadar "copy & paste" sahaja dalam Dreamweaver. Tag-tag yang terlibat ialah h1, ul, dan li.

Sampel 1

Masukkan kod-kod ini dalam fail HTML biasa: File > New > HTML 

<div id = "style1">
<h1>Laman Saya:</h1>
<ul>
<li><a href ="#">Utama</a></li>
<li><a href ="#">Profil</a></li>
<li><a href ="#">Hubungi</a></li>
</ul>

</div>

<div class = "content_box1">
Style 1: Isi Kandungan Di Sini
</div>

Kemudian, bina satu fail CSS yang baru: File > New > CSS Files.

Masukkan semua koding ini dalam fail tersebut. 

#style1 {
font-family: Arial;
}

#style1 h1 {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
background-color: #FF6600;
width: 120px;
text-align: right;
padding: 5px;
margin: 0px;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #FF6600;
border-left: 1px solid #FF6600;
}

#style1 ul {
font-size: 14px;
font-weight: bold;
margin: 0px;
padding: 0px;
list-style: none;
}

#style1 li {
background-color: #FF9900;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #FF6600;
}

#style1 li a {
width: 100px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 5px 0px 5px 5px;
text-transform: uppercase;
}

#style1 li a:visited {
color: #FFFFFF;
text-decoration: none;
}

#style1 li a:hover {
color: #000000;
text-decoration: none;
background-color: #FFCC33;
}

.content_box1 {
font-family: Arial;
font-size: 11px;
clear: left;
background-color: #FFFF91;
border: 1px solid #FF6600;
width: 720px;
padding: 15px;
}

Sampel 2

Masukkan koding ini dalam fail HTML: 

<div id = "style2">
<h1>Laman Saya:</h1>
<ul>
<li><a href ="#">Utama</a></li>
<li><a href ="#">Profil</a></li>
<li><a href ="#">Hubungi</a></li>
</ul>

</div>

<div class = "content_box2">
Style 2: Isi Kandungan Di Sini

</div>

Masukkan koding ini dalam fail CSS: 

#style2 {
font-family: Arial;
} 

#style2 h1 {
font-size: 16px;
font-weight: bold;
background-color: #FF6600;
width: 120px;
padding: 5px;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #BB4A00;
border-bottom: 1px solid #FF6600;
border-left: 1px solid #FF6600;
margin: 10px 0px 0px 0px;
} 
#style2 ul {
margin: 0px;
padding: 0px;
list-style: none;
float: left;
clear: left;
} 
#style2 li {
width: 130px;
font-size: 14px;
font-weight: bold;
background-color: #FF9900;
border-right: 1px solid #DF5900;
border-bottom: 1px solid #FF6600;
border-left: 1px solid #FF6600;
}

#style2 li a {
width: 120px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 5px;
}

#style1 li a:visited {
color: #FFFFFF;
text-decoration: none;
}

#style2 li a:hover {
color: #000000;
text-decoration: none;
background-color: #FFCC33;
} 
.content_box2 {
width: 586px;
font-family: Arial;
font-size: 11px;
background-color: #FFFF91;
border: 1px solid #FF6600;
padding: 15px;
float: left;
}
Aspek: dalam fail html
mad