Membuat Tampilan Menu Dengan Menggunakan Display Inline

Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di Kursus Web design. Kali ini saya akan membahas tentang cara Membuat Tampilan Menu Dengan Menggunakan Display Inline. Membuat sebuah menu di dalam website, biasanya kita menggunakan ul li. Nah kemudian di tag ul diberi property list style dengan value none, lalu di css tag li diberi property float dengan value left. Lumayan ribet bukan teman-teman.

Nah kali ini kita akan Membuat Tampilan Menu Dengan Menggunakan Display Inline tanpa menggunakan float dan tanpa mengatur list stylenya. Oke langsung saja kita membuat struktur htmlnya terlebih dahulu ya teman-teman. Seperti pada script di bawah ini.

<!DOCTYPE html>
<html>
<head>
	<title>Membuat Tampilan Menu Dengan Menggunakan Display Inline</title>
</head>
<body>
	<header>
		<h1>Membuat Tampilan Menu Dengan Menggunakan Display Inline</h1>
	</header>
	<menu>
		<ul>
			<li>Home</li>
			<li>Gallery</li>
			<li>About Us</li>
			<li>Contact Us</li>
		</ul>	
	</menu>
</body>
</html>

Nah, jika sudah maka kita tinggal membuat style cssnya. Berikut scriptnya ya teman-teman.

<style>
		header{
			width: 400px;
			margin: auto;
		}
		menu{
			width: 400px; 
			margin:auto; 
			padding: 10px;
			 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
			background: #1e5799; /* Old browsers */
			background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
		}
		li{
			display: inline; 
			padding: 0 10px; 
			color:white; 
			font-weight: bold;
		}
</style>

Teman-teman bisa perhatikan di cssnya pada bagian tag li. Nah di siNI saya menggunakan display inline dimana berfungsi untuk mengatur posisi tag li pada baris yang sama atau sejajar dengan li lainnya. Dan secara otomatis list style yang ada pada tag ul akan hilang. Jika teman-teman jalankan pada browsernya masing-masing maka tampilannya akan seperti pada gambar di bawah ini ya teman-teman.

Gimana? Mudah bukan teman-teman. Demikian artikel tentang cara Membuat Tampilan Menu Dengan Menggunakan Display Inline. Semoga bisa bermanfaat dan selamat mencoba ya teman-teman.