Ekspresi | Belajar HTML dan PHP | Sunda | Kontak | Gmail | Uang Adsense
Kemahasiswaan Kilas Santai
PMB Online STMIK Jabar 2021
STMIK JABAR
LP3I Tasikmalaya
STAI Al-Falah
Pengobatan Ruqyah
Belajar Pemrograman PHP, MySQL, Framework CI, Domain, Hosting, CMS Wordpress, Framework Laravel. Yang Penting ada menu DAFTAR ISI
Inkubator | Daftar Isi | Bisnis Bitcoin | Tools Penting | PrivacyPolicy | Inggris Arab

Monday, November 15, 2021

HTML: Menu Utama Dropdown

Buatlah file name: menu.html

Ketik kode ini:

<!DOCTYPE html>
<html>
<head>

    <title>Menu Dropdown CSS3 dan HTML5</title>

</head>
<body>

    <style type="text/css">
    html,body{
        padding: 0;
        margin:0;
        font-family: sans-serif;
    }

    .menu-malasngoding{
        background-color: green; <!--#3141ff-->
    }

    .menu-malasngoding ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .menu-malasngoding > ul > li {
        float: left;
    }

    
    .menu-malasngoding li a {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .menu-malasngoding li a:hover{
        background-color: red; <!--#2525ff-->
    }

    li.dropdown {
        display: inline-block;
    }

    .dropdown:hover .isi-dropdown {
        display: block;
    }

    .isi-dropdown a:hover {
        color: #fff !important;
    }

    .isi-dropdown {
        position: absolute;
        display: none;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        background-color: yellow; <!--#f9f9f9-->
    }

    .isi-dropdown a {
        color: #3c3c3c !important;
    }

    .isi-dropdown a:hover {
        color: #232323 !important;
        background: #f3f3f3 !important;
    }
</style>


<header class="header">
    <div class="menu-malasngoding">

        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="menu1.html">Profil</a></li>           
            <li class="dropdown"><a href="#">Menu 2</a>
                <ul class="isi-dropdown">
                    <li><a href="submenu1.html">Sub Menu 1</a></li>
                    <li><a href="submenu2.html">Sub Menu 2</a></li>                   
                </ul>
            </li>
            <li><a href="menu3.html">Menu 3</a></li>
        </ul>

    </div>
</header>

<br/>

<center>
    <h3>Ini belajar membuat Menu Dropdown Dengan CSS3 dan HTML5</h3>
</center>

<!--Sumber: www.malasngoding.com-->

</body>
</html>


***

 

Jalankan di browser

Silakan klik menu-menu yang muncul agar tahu error-nya. :)

 

***

Selanjutnya, buat lagi file name: menu1.html

Isinya: Haiii, Menu 1!

 

Buat lagi file name: menu3.html

Isinya: Haiii, Menu 3!

 

Buat lagi file name: submenu1.html

Isinya: Ini submenu 1

 

Buat lagi file name: submenu2.html

Isinya: Ini submenu 2 


Hasilnya seperti ini (Youtube)





"Bitcoin and Forex are high risk business. We must join them smartly."
Belajar Bahasa Inggris dan Arab di Telegram dan FB Gratis!
Youtube: Katabah Com: Menuju 1 jt Konten :)

No comments:

Post a Comment