Kreasi Menu dengan CSS3

Halo, apa kabar nya hari ? Semoga baik yah, aminn 🙂

Ketemu lagi dengan saya, pada kesempatan kali ini saya akan berbagi tutorial mengenaiÂ Kreasi Menu Dengan CSS3, maksud nya apa yah ? 😀

Maksudnya adalah kita akan berkreasi membuat tampilan menu yang berbeda tentunya, penasaran seperti apa membuat nya ? Yuk simak langkah-langkah nya berikut ini.1. Seperti biasa, silahkan buka teks editor nya masing-masing.

2. Kalo sudah silahkan ketikan kode HTML berikut ini:

<body>
    <div style="width: 1000px; margin: 0 auto; text-align:center; ">
        <ul id="menu">
            <li><a class="anchor" href="#welcomeanchor">Home</a></li>
            <li><a class="anchor" href="#aboutusanchor">About Us </a></li>
            <li><a class="anchor" href="#classesanchor">Classes </a> </li>
            <li><a class="anchor" href="#scheduleanchor">Schedule</a></li>
            <li><a class="anchor" href="#newsanchor">News</a></li>
            <li><a class="anchor" href="#programsanchor">Programs</a></li>
            <li><a class="anchor" href="#contactanchor">Contact</a></li>
        </ul>
    </div>
</body>

3. Kalo sudah di ketikan, kemudian lanjutkan untuk kode CSS berikut:

#menu {
    	width: 940px; 
   		margin: 0 auto;
	}
    ul li {
    	background:#000;
    	list-style: none;
    	height: 50px;
    	float:left;
    	padding:0 0;
    }
    ul li a {
		font-family: font3;
		width: 134px;
		height: 50px;
		line-height: 53px;
		border-bottom: 6px solid #636393;
		color: #fff;
		font-size:13px;
		text-transform: uppercase;
		text-align:center;
		text-decoration: none;
		display: block;
		-webkit-transition: .2s all linear;
		-moz-transition: .2s all linear;
		-o-transition: .2s all linear;
		transition: .2s all linear;
    }
    li:nth-child(1) a {
    	border-color: #fff;
    }
    li:nth-child(2) a {
    	border-color: #FF6;
    }
    li:nth-child(3) a {
    	border-color: #F60;
    }
    li:nth-child(4) a {
    	border-color: #00F;
    }
    li:nth-child(5) a {
    	border-color: #0C6;
    }
    li:nth-child(6) a {
    	border-color: #63C;
    }
    li:nth-child(7) a {
    	border-color: #F00;
    }
    li:nth-child(1) a:hover {
		color: #000;
		border-bottom: 55px solid #fff;
		height: 1px;
    }
    li:nth-child(2) a:hover {
		color: #000;
		border-bottom: 55px solid #ff6;
		height: 1px; 
	}
    li:nth-child(3) a:hover {
		border-bottom: 55px solid #f60;
		height: 1px; 
	}
    li:nth-child(4) a:hover {
		border-bottom: 55px solid #00f;
		height: 1px; 
	}
    li:nth-child(5) a:hover {
		border-bottom: 55px solid #0c6;
		height: 1px; 
	}
    li:nth-child(6) a:hover {
		border-bottom: 55px solid #63c;
		height: 1px; 
	}
    li:nth-child(7) a:hover {
		border-bottom: 55px solid #f00;
		height: 1px; 
	}

4. Setelah itu, jangan lupa disimpan kemudian coba jalankan di browsernya masing-masing dan lihat hasil nya. Selesai

Bagus yah tampilan nya, dan cukup mudah membuat nya, silahkan modifikasi sesuai selera masing-masing 🙂

Baiklah sampai disini pertemuan kali ini, Semoga bermanfaat, amin.

Selamat mencoba :).

Demo

Kategori