Skip to content Skip to sidebar Skip to footer

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.
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">&#169; 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;
}

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.

Berlangganan via Email