#
Anda membaca...
Komputer

Cara Membuat Menu Website dengan CSS3 (1)


Dengan adanya CSS3 dapat membuat menu Website atau Blog yang kita buat menjadi lebih interaktif dengan menambahkan sub menu item yang ingin kita tambahkan dari menu utama. Dimana pada satu menu utama, biasanya terdiri atas beberapa sub menu yang terdiri dari beberapa kategori yang ingin kita tampilkan kepada pembaca website atau blog agar lebih mudah ditelusuri.

Nah, bagaimana caranya?

Dengan cara menggunakan tag HTML sederhana seperti scripting HTML <ul> <li> </li> </ul> akan tampil pada browser dengan dengan tampilan standar seperti tampilan di bawah ini :

HTML Menu

Uhm, tentunya terlalu sederhana dan tentunya tidak menarik, bukan? :mrgreen:

Supaya tampilan seperti gambar di atas menjadi lebih menarik, kita dapat menambahkan dan membuat scripting CSS3 yang berfungsi untuk mengatur layout dan format menu dan sub menu yang dapat menghubungkan link URL pada halaman yang satu dengan halaman website lainnya, sehingga akan tampil lebih interaktif lagi, seperti pada pada contoh scripting HTML dan CSS ( yang digunakan untuk mengatur tampilan menu interaktif secara horizontal ) berikut ini :

[ Script CSS ]

/* CSS3 Menu Horizontal */

ul#css3,ul#css3 ul {
	margin:0;
	list-style:none;
	padding:0;
	border-width:3px;
	border-style:solid;
	border-color:#000000;
}

ul#css3 ul {
	display:none;
	position:absolute;
	left:0;
	top:100%;
	padding:0 10px 10px;
	background-color:#BCD0ED;
	border-color:#4C77B6;
}

ul#css3 li:hover>* {
	display:block;
}

ul#css3 li:hover {
	position:relative;
}

ul#css3 ul ul {
	position:absolute;
	left:100%;
	top:0;
}

ul#css3 {
	display:block;
	font-size:0;
	float:left;
}

ul#css3 li {
	display:block;
	white-space:nowrap;
	font-size:0;
	float:left;
}

ul#css3>li,ul#css3 li {
	margin:0;
}

ul#css3 a:active, ul#css3 a:focus {
	outline-style:none;
}

ul#css3 a {
	display:block;
	vertical-align:middle;
	text-align:left;
	text-decoration:none;
	font:bold 14px Verdana;
	color:#4C77B6;
	text-shadow:#FFF 0 0 3px;
	cursor:pointer;
	padding:10px;
	background-color:#FFCC00;
	background-position:0 0;
	border-width:0 0 0 1px;
	border-style:solid;
	border-color:#000000;
}

ul#css3 ul li {
	float:none;
	margin:10px 0 0;
}

ul#css3 ul a {
	text-align:left;
	padding:4px;
	background-color:#BCD0ED;
	background-image:none;
	border-width:0;
	font:14px Tahoma;
	color:#000;
	text-decoration:none;
}

ul#css3 li:hover>a {
	background-color:#4C77B6;
	border-color:#C0C0C0;
	border-style:solid;
	font:bold 14px Verdana;
	color:#CCE9FD;
	text-decoration:none;
	text-shadow:#FFF 0 0 1px;
	background-position:0 100px;
}

ul#css3 img {
	border:none;
	vertical-align:middle;
	margin-right:10px;
}

ul#css3 img.over {
	display:none;
}

ul#css3 li:hover > a img.def {
	display:none;
}

ul#css3 li:hover > a img.over {
	display:inline;
}

ul#css3 span {
	display:block;
	overflow:visible;
	background-position:right center;
	background-repeat:no-repeat;
	padding-right:0px;
}

ul#css3 ul li:hover>a {
	background-color:#BCD0ED;
	background-image:none;
	font:14px Tahoma;
	color:#4C77B6;
	text-decoration:underline;
}

ul#css3 li.top_pertama>a {
	height:22px;
	line-height:22px;
}

ul#css3 li.top_pertama:hover>a {
	line-height:22px;
}

ul#css3 li.top_menu>a {
	height:22px;
	line-height:22px;
}

ul#css3 li.top_menu:hover>a {
	line-height:22px;
}

ul#css3 li.top_akhir>a {
	height:22px;
	line-height:22px;
}

ul#css3 li.top_akhir:hover>a {
	line-height:22px;
}

[ Script HTML ]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="css/cssnavh.css" type="text/css" />
</head>
<body style="background-color:#FFFFFF;">
<ul id="css3" class="top_menu">
	<li class="top_pertama"><a href="#">Beranda</a></li>
	<li class="top_menu"><a href="#">Info Blog</a></li>
	<li class="top_menu"><a href="#"><span>Kategori</span></a>
	<ul>
		<li><a href="#">Telepon Selular</a>
			<ul>
				<li><a href="#">Nokia</a>
					<ul>
						<li><a href="#">Symbian S60V5</a></li>
						<li><a href="#">Symbian S60V3</a></li>
					</ul>
				</li>
				<li><a href="#">Motorola</a></li>
				<li><a href="#">Samsung</a></li>
			</ul>
		</li>
		<li><a href="#">Komputer</a>
			<ul>
				<li><a href="#">Software</a></li>
				<li><a href="#">Hardware</a></li>
			</ul>
		</li>
		<li><a href="#">Internet</a></li>
		<li><a href="#">Buku Digital</a></li>
		<li><a href="#">Lain-lain</a></li>
	</ul>
	</li>
	<li class="top_akhir"><a href="#">Buku Tamu</a></li>
</ul>
</body>
</html>

Hasilnya akan tampil pada browser seperti screenshot ini :

HTML Menu dengan CSS3 (1)

HTML Menu dengan CSS3 (2)

Maka menu ( yang sebelumnya sangat ) sederhana seperti contoh diatas akan menjadi lebih menarik dan oke jika dilihat oleh pembaca website atau blog yang kita buat. Selain itu juga mempermudah pembaca website atau blog untuk menelusuri link URL yang ingin mendapatkan informasi yang sesuai dengan kategori yang diinginkan.

Catatan :

HTTP Localhost

Tes dilakukan dengan server lokal ( localhost atau 127.0.0.1 ) di Laptop gw. Untuk pengaturan menu yang lebih baik lagi bisa disesuaikan dengan tampilan website atau blog yang kamu buat. Silahkan dioprek dech! πŸ˜€

Enjoy πŸ˜‰

Iklan

About devry

Just the way I am

Diskusi

7 thoughts on “Cara Membuat Menu Website dengan CSS3 (1)

  1. thanks berat…

    Posted by sansan | 19 Juli 2011, 4:36 pm
  2. makasi banyak tas infonya..

    Posted by agenjellygamat | 13 Mei 2011, 3:10 pm
  3. mkasi ilmunya mas

    Posted by arief | 4 Mei 2011, 8:12 am
  4. cara gunainnya masih bingung eh.. maklum newbie..

    kalo di masukin ke wordpress gmn..? saia kurang paham gan…!!

    Posted by aling aling | 15 Februari 2011, 3:42 pm
  5. boleh mampir kan?
    ma’af ni gan, aku sama sekali gak faham dengan begituan (bhs HTML), ada cara lain gak untuk membuat menu dan sub menu?

    Posted by Asy-Syifa | 27 Januari 2011, 11:51 pm
  6. Nuhun pisan, ini yang aku cari-cari akhirnya ketemu juga disini.
    Thank ….

    Posted by Turino | 20 Januari 2011, 1:12 pm

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Other Languages?

Tentang Blog Ini?

Semua tulisan sederhana pada blog ini merupakan tulisan personal bersifat Open Source. Terbuka bagi semua netter untuk pembelajaran kita bersama. Terutama bagi netter yang suka membaca, mencari dan menambah informasi serta wawasan yang membuka cakrawala dunia di internet. SEMOGA BERMANFAAT...

Total Track?

  • 1,287,453 visitors

Sharing This Blog?

Info Track?

%d blogger menyukai ini: