Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



9. MELETAKKAN MENU DI BAHAGIAN NAVIGATION
December 30, 2009
Posted by: Fauzie


Ini adalah bahagian terakhir cara-cara memberi style untuk web contoh ini. Bagi tujuan ini saya telah menggunakan "sexy menu" yang dibina oleh web designer Soh Tanaka. Bagi membolehkan menu ini berfungsi dengan baik, script jQuery telah digunakan.

Cari kod ini:

#main-nav {
background: lime;
height: 50px;
}


Kemudian padam/delete perkataan "height: 50px;" dan tukar perkataan "lime" kepada kod #fff (untuk mendapatkan warna putih).

Copy kod-kod CSS berwarna maroon ini dan paste di bahagian bawah kod di atas seperti yang ditunjukkan di bawah ini:

#main-nav {
background: #fff;
}
ul.topnav {
list-style: none;
padding: 0px 20px;
margin: 0;
float: left;
width: 410px;
background: #222;
font-size: 11px;
background: url(http://i425.photobucket.com/albums/pp331/fauzi6009/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(http://i425.photobucket.com/albums/pp331/fauzi6009/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

Anda klik Preview dan jika tiada terdapat kesilapan, klik Save Template.

Apa yang anda dapat lihat ialah satu blok kotak putih sahaja. Kita akan meletakkan maklumat menu dalam kotak ini.

Sekarang cari kod ini pula:

<div id='main-nav'>Main Nav</div>


Anda padam atau delete perkataan Main Nav itu dan di tempatnya anda perlu paste kod berwarna maroon seperti di bawah ini:

<div id='main-nav'>
<ul class='topnav'>
<li><a href='#'>Home</a></li>
<li>
<a href='#'>Tutorials</a>

<ul class='subnav'>
<li><a href='#'>Sub Nav Link</a></li>
<li><a href='#'>Sub Nav Link</a></li>
<li><a href='#'>Sub Nav Link</a></li>
<li><a href='#'>Sub Nav Link</a></li>
<li><a href='#'>Sub Nav Link</a></li>

</ul>
</li>
<li>
<a href='#'>Resources</a>
<ul class='subnav'>
<li><a href='#'>Sub Nav Link</a></li>
<li><a href='#'>Sub Nav Link</a></li>

<li><a href='#'>Sub Nav Link</a></li>
<li><a href='#'>Sub Nav Link</a></li>
<li><a href='#'>Sub Nav Link</a></li>
<li><a href='#'>Sub Nav Link</a></li>
</ul>
</li>
<li><a href='#'>About Us</a></li>

</ul>
</div>


Klik Preview, kalau anda telah memasukkan kod dengan betul, tadaa! kita telah berjaya membuat satu template. Klik Save Template.

Menu kita masih belum berfungsi dengan baik. Kita perlu memasukkan script jQuery.

Sila ke bahagian akhir tutorial ini.