Technology

Membuat Menu Drop Down pada Website dengan CSS3

 

Loading...

Sering kita temukan website-website dengan menu yang unik, salah satunya dengan animasi dropdown. Nah, melalui tutorial ini saya akan coba membagikan bagaimana membuat Menu Drop Down  dengan CSS3, barangkali bisa diaplikasikan pada website anda :-)

Layout DropDown

Pertama kita buat dulu layout untuk dropdown. Kode layout berikut bisa jadi contoh aplikasi dropdown menu dengan CSS, nantinya bisa anda kembangkan sendiri.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Contoh DropDown Menu CSS 3</title>
</head>
<body>
	<header>
		<h1>Contoh Menu Dropdown</h1>
		<nav class="navigation">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Kategori</a>
					<ul>
						<li><a href="#">Artikel</a></li>
						<li><a href="#">Tutorial</a>
							<ul>
								<li><a href="#">HTML5</a></li>
								<li><a href="#">PHP</a></li>
								<li><a href="#">jQuery</a></li>
								<li><a href="#">CSS 3</a>

								</li>
							</ul>
						</li>
						<li><a href="#">Intermezzo</a></li>
						<li><a href="#">Web Development</a>
							<ul>
								<li><a href="#">HTML5</a></li>
								<li><a href="#">PHP</a></li>
								<li><a href="#">jQuery</a></li>
								<li><a href="#">DropDown Lagi</a>									
									<ul>
										<li><a href="#">HTML5</a></li>
										<li><a href="#">PHP</a></li>
										<li><a href="#">jQuery</a></li>
										<li><a href="#">CSS 3</a>

										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#">Author</a>
					<ul>
						<li><a href="http://www.jagoanweb.com" target="_blank">Jagoan Hosting</a></li>
						<li><a href="http://www.jagoanweb.com"target="_blank">Jagoan Web</a></li>
						<li><a href="http://www.jagoanstore.com"target="_blank">Jagoan Store</a></li>
					</ul>
				</li>
				<li class="clear"></li>
			</ul>
		</nav>
	</header>
</body>
</html>

Style Dropdown

Usai membuat layout, sekarang tambahkan CSS untuk membuat layout tersebut berjalan dengan baik. Berikut kode CSS:

body
{
	background:#f0f0f0;
	font-family:'Trebuchet MS'
}

*
{
	-webkit-transition:all .21s ease-in-out;
	-moz-transition:all .21s ease-in-out;
	-o-transition:all .21s ease-in-out;
	-ms-transition:all .21s ease-in-out;
	transition:all .21s ease-in-out
}

.clear
{
	clear:both
}

header
{
	width:600px;
	margin:100px auto 0
}

.navigation
{
	position:relative;
	background:#fefefe;
	box-shadow:0 1px 4px #e0e0e0;
	-webkit-box-shadow:0 1px 4px #e0e0e0;
	-moz-box-shadow:0 1px 4px #e0e0e0;
	border:1px solid #e0e0e0
}

.navigation ul
{
	margin:0;
	padding:0
}

.navigation ul li
{
	float:left;
	list-style:none;
	position:relative
}

.navigation ul li a
{
	display:block;
	color:#404040;
	text-decoration:none;
	padding:5px
}

.navigation ul li a:hover
{
	background:#404040;
	color:#fefefe
}

.navigation ul li ul
{
	position:absolute;
	display:none;
	width:150px;
	background:#fefefe;
	box-shadow:0 1px 4px #e0e0e0;
	-webkit-box-shadow:0 1px 4px #e0e0e0;
	-moz-box-shadow:0 1px 4px #e0e0e0;
	border:1px solid #e0e0e0;
	margin:0 auto
}

.navigation ul ul ul
{
	display:none;
	position:absolute;
	right:-150px;
	top:0
}

.navigation ul li:hover > ul,.navigation ul ul li:hover > ul
{
	display:block
}

.navigation ul li.clear,.navigation ul ul li
{
	float:none
}

Sekarang anda bisa mulai jalankan browser anda untuk test dropdown menu yang sudah jadi. Berikut screenshot jadinya:

Selamat mencoba :D

Loading...

13 komentar

  • 16 September 2012 - pukul 17:59

    kalau untuk model menu lain dengan css 3 apa ada mas??
    coba dishare???

    • 17 September 2012 - pukul 8:40

      kalau model lain pasti ada, di lain kesempatan akan saya share mengenai Menu CSS 3. :), terima kasih atas komentarnya.

  • 13 Oktober 2012 - pukul 19:09

    Bro CSS dasar untuk membuat dropdown itu apa yha..apakah harus di tambah hover,position,float ataukah yg lainnya..soalnya saya cuman butuh dropdownnya saja..jadi tampilan menunya tetep seperti yg ada di blg saya,,saya hanya ingin menambah dropdown saja tolong di bantu yha.

    • 15 Oktober 2012 - pukul 10:41

      Dasarnya berawal dari tag select yang biasa juga disebut dropdown list. Dropdown menu yang saya buat ini memang membutuhkan hover, position, dan float agar tampilannya lebih menarik.

  • 17 Desember 2012 - pukul 17:48

    pemanggilan css nya bagaimana?

    • 18 Desember 2012 - pukul 11:32

      Terima kasih atas aparesiasinya. Untuk pemanggilan css bisa dilakukan dengan metode inline atau langsung dimasukkan kode css pada halaman HTML.

  • 30 Desember 2012 - pukul 16:10

    Ijin sedot mas…..

  • lely
    8 Januari 2013 - pukul 9:24

    gan kalo mau bikin web langkah awal yg paling mudah apa gan ??
    mohon bantuannya ya :D
    ijin coba gan

  • Musa
    15 Februari 2013 - pukul 9:19

    Kalau membuat Menu Drop Down pakai animasi bergeser ke bawah, bagaimana?

    • 21 Februari 2013 - pukul 11:16

      thanks atas apresiasinya, untuk Menu Drop Down dengan animasi bergeser ke bawah, atau Vertical Dropdown akan saya bahas pada kesempatan lain. :)

  • 18 Desember 2019 - pukul 10:58

    Kodenya gk kelihatan mas.
    Apakah halamannya mobile freindly?
    Mohon maaf jika salah kata

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *