Cara Membuat Menu Utama dengan Efek Hover Keren
Dunia Programming - Halo Sahabat Dunia Programming, lama tidak posting artikel ya hehehe, kali ini saya akan memberikan tutorial bagaimana sih cara membuat Menu Utama dengan Efek Hover Keren.
 |
| Tampilan Menu Utama |
Fungsi dari pembuatan Menu Utama pada Website
Memang, jarang website yang menggunakan Menu Utama pada Websitenya, akan tetepi tidak ada salahnya apabila kalian mencobanya bukan...?
dan kebanyakan Menu Utama ini digunakan oleh para Siswa yang berkecimpung didunia pemrograman alias anak RPL, apa sih RPL itu...?
Oke, langsung saja kita mulai pembuatan Menu Utamanaya.
Buat Foldernya terlebih dahul dengan nama Menu, kemudian bukak Folder Menunya, setelah itu copy script HTML dibawah ini, dan simpan file tesebut dengan nama index.html
HTML
<html>
<head>
<title>Dunia Programming</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<audio autoplay="autopla">
<source src="music/Glorious Days-ED3GIN-Samehadaku.net.mp3">
</audio>
<div id="header">
<nav>
<ul>
<a href="#"><li><p class="navtext">HOME</p></li></a>
<a href="#"><li><p class="navtext">HTML</p></li></a>
<a href="#"><li><p class="navtext">PHP</p></li></a>
<a href="#"><li><p class="navtext">CSS</p></li></a>
</ul>
</nav>
</div>
<div class="konten">
<div id="page_title"><a href="#"><h2>MENU</h2></a></div><hr class="garis">
<div id="menu_body">
<div id="home_menu">
<a href="#"><div id="menu_body1"><p class="text1">HOME</p></div></a>
</div>
<div id="about_us">
<a href="#"><div id="menu_body2"><p class="text2">HTML</p></div></a>
</div>
<div id="tutorial">
<a href="#"><div id="menu_body3"><p class="text3">PHP</p></div></a>
</div>
<div id="download">
<a href="#"><div id="menu_body4"><p class="text4">CSS</p></div></a>
</div>
</div>
<div class="menu_share">
<a href="#"><div class="share_fb"><p class="fbtext">f</p></div></a>
<a href="#"><div class="share_tw"><p class="twtext">t</p></div></a>
<a href="#"><div class="share_g"><p class="gtext">g+</p></div></a>
<a href="#"><div class="share_p"><p class="ptext">P</p></div></a>
</div>
</div>
<div class="footer"><p class="footertext">© 2016 Rekayasa Perangkat Lunak 2 | Created By Dunia Programming</p></div>
</body>
</html>
<head>
<title>Dunia Programming</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<audio autoplay="autopla">
<source src="music/Glorious Days-ED3GIN-Samehadaku.net.mp3">
</audio>
<div id="header">
<nav>
<ul>
<a href="#"><li><p class="navtext">HOME</p></li></a>
<a href="#"><li><p class="navtext">HTML</p></li></a>
<a href="#"><li><p class="navtext">PHP</p></li></a>
<a href="#"><li><p class="navtext">CSS</p></li></a>
</ul>
</nav>
</div>
<div class="konten">
<div id="page_title"><a href="#"><h2>MENU</h2></a></div><hr class="garis">
<div id="menu_body">
<div id="home_menu">
<a href="#"><div id="menu_body1"><p class="text1">HOME</p></div></a>
</div>
<div id="about_us">
<a href="#"><div id="menu_body2"><p class="text2">HTML</p></div></a>
</div>
<div id="tutorial">
<a href="#"><div id="menu_body3"><p class="text3">PHP</p></div></a>
</div>
<div id="download">
<a href="#"><div id="menu_body4"><p class="text4">CSS</p></div></a>
</div>
</div>
<div class="menu_share">
<a href="#"><div class="share_fb"><p class="fbtext">f</p></div></a>
<a href="#"><div class="share_tw"><p class="twtext">t</p></div></a>
<a href="#"><div class="share_g"><p class="gtext">g+</p></div></a>
<a href="#"><div class="share_p"><p class="ptext">P</p></div></a>
</div>
</div>
<div class="footer"><p class="footertext">© 2016 Rekayasa Perangkat Lunak 2 | Created By Dunia Programming</p></div>
</body>
</html>
Setelah itu, copy script css dibawah ini, kemudian simpan file tersebut dengan nama style.css
CSS
@font-face{
font-family: gplus;
src: url("font/CreditValleybold.ttf") format("truetype");
}
@font-face{
font-family: pinterest;
src: url("font/GrandHotel-Regular.otf") format("opentype");
}
@font-face{
font-family: destroy;
src: url("font/DEVROYE_.ttf") format("truetype");
}
@import url(http://fonts.googleapis.com/css?family=ABeeZee);
*{
padding: 0;
margin: 0;
}
html, body{
height: auto;
}
body{
background: #3498db;
}
#header{
background: #2980b9;
width: 100%;
height: 40px;
}
nav ul{
background: #2980b9;
width: 400px;
height: 40px;
}
nav ul a li{
margin-right: -4px;
background: #2980b9;
width: 100px;
height: 40px;
display: inline-block;
}
nav ul a li:hover{
background: #ffffff;
}
nav ul li .navtext:hover{
color: #3498db;
}
nav ul li .navtext{
text-align: center;
font-family: aBeeZee;
font-size: 12pt;
color: #ffffff;
margin: 10px 0 0 0;
}
#page_title, h2{
margin: 15px 0 0 0 ;
text-align: center;
font-family: aBeeZee;
color: #ffffff;
margin: 13px 0 0 0;
}
h2:hover{
color: #49ACEF;
}
page_title, h2, a{
text-decoration: none;
}
.garis{
margin: 15px 0 0 250px;
width: 850px;
background-color: #2980b9;
}
#menu_body{
background: transparent;
width: 850px;
height: 160px;
float: left;
margin: 80px 0 0 250px;
}
#home_menu{
background: #60B9E5;
width: 150px;
height: 150px;
border-radius: 100%;
display: inline-block;
margin: 0 0 0 90px;
}
#menu_body1{
background: #ffffff;
width: 130px;
height: 130px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#home_menu:hover{
background: #2980b9;
}
#about_us{
background: #60B9E5;
width: 150px;
height: 150px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body2{
background: #ffffff;
width: 130px;
height: 130px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#about_us:hover{
background: #2980b9;
}
#tutorial{
background: #60B9E5;
width: 150px;
height: 150px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body3{
background: #ffffff;
width: 130px;
height: 130px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#tutorial:hover{
background: #2980b9;
}
#download{
background: #60B9E5;
width: 150px;
height: 150px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body4{
background: #ffffff;
width: 130px;
height: 130px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#download:hover{
background: #2980b9;
}
.text1{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 55px;
left: 33px;
}
.text2{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 55px;
left: 38px;
}
.text3{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 55px;
left: 45px;
}
.text4{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 55px;
left: 45px;
}
.menu_share{
background: transparent;
width: 240px;
height: 40px;
margin: 330px 0 0 550px;
border-radius: 5px;
}
.share_fb{
background: #2980b9;
width: 60px;
height: 40px;
float: left;
}
.fbtext{
text-align: center;
font-family: calibri;
font-size: 32pt;
color: #ffffff;
position: relative;
top: -5px;
font-weight: bold;
}
.share_fb:hover{
background: #ffffff;
}
.fbtext:hover{
color: #3370AA;
}
.share_tw{
background: #57C8F2;
width: 60px;
height: 40px;
float: left;
}
.twtext{
text-align: center;
font-family: calibri;
font-size: 32pt;
color: #ffffff;
position: relative;
top: -8px;
font-weight: bold;
}
.share_tw:hover{
background: #ffffff;
}
.twtext:hover{
color: #67EBF5;
}
.share_g{
background: #e74c3c;
width: 60px;
height: 40px;
float: left;
}
.share_p{
background: #c0392b;
width: 60px;
height: 40px;
float: left;
}
.gtext{
text-align: center;
font-family: gplus;
font-size: 32pt;
color: #ffffff;
position: relative;
top: -8px;
font-weight: bold;
}
.share_g:hover{
background: #ffffff;
}
.gtext:hover{
color: #e74c3c;
}
.ptext{
text-align: center;
font-family: pinterest;
font-size: 30pt;
color: #ffffff;
position: relative;
top: -5px;
font-weight: bold;
}
.share_p:hover{
background: #ffffff;
}
.ptext:hover{
color: #c0392b;
}
.footer{
background: #2980b9;
width: 100%;
height: 66px;
position: absolute;
top: 590px;
}
.footertext{
text-align: center;
font-family: aBeeZee;
position: relative;
top: 25px;
color: #ffffff;
font-size: 15px;
}
font-family: gplus;
src: url("font/CreditValleybold.ttf") format("truetype");
}
@font-face{
font-family: pinterest;
src: url("font/GrandHotel-Regular.otf") format("opentype");
}
@font-face{
font-family: destroy;
src: url("font/DEVROYE_.ttf") format("truetype");
}
@import url(http://fonts.googleapis.com/css?family=ABeeZee);
*{
padding: 0;
margin: 0;
}
html, body{
height: auto;
}
body{
background: #3498db;
}
#header{
background: #2980b9;
width: 100%;
height: 40px;
}
nav ul{
background: #2980b9;
width: 400px;
height: 40px;
}
nav ul a li{
margin-right: -4px;
background: #2980b9;
width: 100px;
height: 40px;
display: inline-block;
}
nav ul a li:hover{
background: #ffffff;
}
nav ul li .navtext:hover{
color: #3498db;
}
nav ul li .navtext{
text-align: center;
font-family: aBeeZee;
font-size: 12pt;
color: #ffffff;
margin: 10px 0 0 0;
}
#page_title, h2{
margin: 15px 0 0 0 ;
text-align: center;
font-family: aBeeZee;
color: #ffffff;
margin: 13px 0 0 0;
}
h2:hover{
color: #49ACEF;
}
page_title, h2, a{
text-decoration: none;
}
.garis{
margin: 15px 0 0 250px;
width: 850px;
background-color: #2980b9;
}
#menu_body{
background: transparent;
width: 850px;
height: 160px;
float: left;
margin: 80px 0 0 250px;
}
#home_menu{
background: #60B9E5;
width: 150px;
height: 150px;
border-radius: 100%;
display: inline-block;
margin: 0 0 0 90px;
}
#menu_body1{
background: #ffffff;
width: 130px;
height: 130px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#home_menu:hover{
background: #2980b9;
}
#about_us{
background: #60B9E5;
width: 150px;
height: 150px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body2{
background: #ffffff;
width: 130px;
height: 130px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#about_us:hover{
background: #2980b9;
}
#tutorial{
background: #60B9E5;
width: 150px;
height: 150px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body3{
background: #ffffff;
width: 130px;
height: 130px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#tutorial:hover{
background: #2980b9;
}
#download{
background: #60B9E5;
width: 150px;
height: 150px;
border-radius: 100%;
display: inline-block;
margin-left: 20px;
}
#menu_body4{
background: #ffffff;
width: 130px;
height: 130px;
border-radius: 100%;
position: relative;
top: 10px;
left: 10px;
}
#download:hover{
background: #2980b9;
}
.text1{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 55px;
left: 33px;
}
.text2{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 55px;
left: 38px;
}
.text3{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 55px;
left: 45px;
}
.text4{
font-size: 16pt;
text-align: center;
font-family: aBeeZee;
color: #2980b9;
position: absolute;
top: 55px;
left: 45px;
}
.menu_share{
background: transparent;
width: 240px;
height: 40px;
margin: 330px 0 0 550px;
border-radius: 5px;
}
.share_fb{
background: #2980b9;
width: 60px;
height: 40px;
float: left;
}
.fbtext{
text-align: center;
font-family: calibri;
font-size: 32pt;
color: #ffffff;
position: relative;
top: -5px;
font-weight: bold;
}
.share_fb:hover{
background: #ffffff;
}
.fbtext:hover{
color: #3370AA;
}
.share_tw{
background: #57C8F2;
width: 60px;
height: 40px;
float: left;
}
.twtext{
text-align: center;
font-family: calibri;
font-size: 32pt;
color: #ffffff;
position: relative;
top: -8px;
font-weight: bold;
}
.share_tw:hover{
background: #ffffff;
}
.twtext:hover{
color: #67EBF5;
}
.share_g{
background: #e74c3c;
width: 60px;
height: 40px;
float: left;
}
.share_p{
background: #c0392b;
width: 60px;
height: 40px;
float: left;
}
.gtext{
text-align: center;
font-family: gplus;
font-size: 32pt;
color: #ffffff;
position: relative;
top: -8px;
font-weight: bold;
}
.share_g:hover{
background: #ffffff;
}
.gtext:hover{
color: #e74c3c;
}
.ptext{
text-align: center;
font-family: pinterest;
font-size: 30pt;
color: #ffffff;
position: relative;
top: -5px;
font-weight: bold;
}
.share_p:hover{
background: #ffffff;
}
.ptext:hover{
color: #c0392b;
}
.footer{
background: #2980b9;
width: 100%;
height: 66px;
position: absolute;
top: 590px;
}
.footertext{
text-align: center;
font-family: aBeeZee;
position: relative;
top: 25px;
color: #ffffff;
font-size: 15px;
}
Setelah langkah diatas kalian lakukan, buka file index.htm tadi kemdian lihat hasilnya
Bagaimana, keren bukan, pastinya dong keren, lalu bagaimana kita memfungsikan menu-menu diatas agar bisa terhubung dengan file yang lain...?
Baca :
Sekian Tutorial Singkat mengenai Cara Membuat Menu Utama dengan Efek Hover Keren, semoga apa yang saya berikan bermanfaat bagi kalian semua, terimakasih.
