Membuat 3D menu hanya dengan html dan css

Salam pagi, kali ini di pagi hari ini kita akan membuat 3D menu hanya dengan html dan css saja. Menu bar yang sederhana namun sangat menarik.

Untuk script CSS-nya lumayan panjang, namun sebanding dengan hasil yang cantik dan menarik. Jika Anda tertarik untuk membuatnya, silahkan simak script-nya di bawah ini.

3D menu CSS

.menuHolder {
	margin:0; 
	text-align:left; 
	position:relative; 
	height:40px; 
	z-index:20; 
	background:#069;
	background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
	background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
	background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
	background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
	border-radius:8px;
	box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
	-moz-perspective: 100px;
	-webkit-perspective: 100px;
	-o-perspective: 100px;
	perspective: 100px; 
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {
	padding:0; 
	margin:0; 
	list-style:none; 
	display:inline-block;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuHolder ul.nav li:hover a.top-a {
	background:#09c; border-radius:8px 8px 0 0;
	-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
	-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
	box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {
	position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; 
	border-radius:0 0 15px 15px;
	box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	-moz-transform-origin: 0px 0px;
	-moz-transform: rotateX(-90deg);
	-webkit-transform-origin: 0px 0px;
	-webkit-transform: rotateX(-90deg);
	-o-transform-origin: 0px 0px;
	-o-transform: rotateX(-90deg);
	transform-origin: 0px 0px;
	transform: rotateX(-90deg);
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {
	padding:10px 0; 
	list-style:none; 
	width:140px; 
	margin:10px 5px 0 5px; 
	float:left; 
	display:inline; 
	text-align:left; 
	background:#fff; 
	border-radius:6px;
	-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
	-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
	box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {
	display:block; 
	width:105px; 
	text-decoration:none; 
	font:13px/16px arial, sans-serif; 
	color:#069; margin:0; 
	padding:4px 0 4px 15px; 
	background:transparent url(https://my-id.site/images/arrow.gif) no-repeat left center;
}
.menuHolder ul.nav div ul li a:hover {
	color:#09c; 
	background:transparent url(https://my-id.site/images/arrow.gif) no-repeat 1px center;
}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav li:hover div {
	-moz-transform: rotateX(0deg);
	-webkit-transform: rotateX(0deg);
	-o-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

3D menu html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title>Membuat 3D menu hanya dengan html dan css</title>

<style>
/* Kode CSS tempatkan disini */
</style>

</head>
<body>

<div class="menuHolder">
	<ul class="nav">
		<li><a class="top-a" href="#"><b>Home</b></a></li>
		<li><a class="top-a" href="#"><b>Tutorial</b></a>
		<div class="col2">
			<ul class="colLeft">
				<li><a href="#">HTML</a></li>
				<li><a href="#">CSS</a></li>
				<li><a href="#">PHP</a></li>
				<li><a href="#">MySQL</a></li>
				<li><a href="#">JavaScript</a></li>
			</ul>
			<ul class="col">
				<li><a href="#">Blogger</a></li>
				<li><a href="#">Wordpress</a></li>
				<li><a href="#">Jomla</a></li>
				<li><a href="#">Windows</a></li>
				<li><a href="#">Linux</a></li>
			</ul>
		</div>
		</li>
		<li><a class="top-a" href="#"><b>Internet</b></a>
		<div class="col1">
			<ul class="colLeft">
				<li><a href="#">News</a></li>
				<li><a href="#">Article</a></li>
				<li><a href="#">Tips &amp; Trik</a></li>
			</ul>
		</div>
		</li>
		<li><a class="top-a" href="#"><b>Contact</b></a>
		<div class="col1">
			<ul class="colSingle">
				<li><a href="#">Email</a></li>
				<li><a href="#">Telephone</a></li>
				<li><a href="#">Address</a></li>
			</ul>
		</div>
		</li>
	</ul>
</div>

</body>
</html>

Gunakan Realtime HTML Editor ↗ untuk melihat dan mengedit hasil script diatas.

Cukup lumayan panjang bukan CSS untuk 3D menu diatas, silahkan Anda sesuaikan warna dan posisinya jika ingin menempatkan 3D menu tersebut pada website Anda.

Silahkan Anda gabungkan script CSS dan HTML diatas, Anda bisa menggunakan metode Embedded css atau External CSS.

Pembahasan tentang Embedded CSS dan External CSS Anda bisa kunjungi halaman: Tutorial dasar css

Sampai disini saja pembahasan tentang membuat 3D menu hanya dengan html dan css, semoga bermanfaat, dan salam sukses selalu untuk Anda semua.

Mungkin Anda Menyukai