Pure css Responsive Dropdown Menu Navigation

Pure css Responsive Dropdown Menu Navigation

Membuat Menu Navigation Responsive Only CSS

Membuat menu dropdown responsive dengan css. Kali ini blog mas tamvan akan berbagi menu navigation bar yang simple dan juga responsive.

Menu Navigation Bar ini sangat mobile friendly, cocok buat blog kalian yang kebanyakan visitornya dari handpone (HP), yang tentunya akan memudahkan para pengunjung untuk melihat isi dari menu bar.

Sebelumnya saya juga sudah berbagi tutorial Memasang Menu Navigation Bar Responsive

Bedanya menu bar yang saya share kali ini... menu ini hanya menggunakan css untuk tampilan yang simple dan tidak memberatkan loading blog..
yang lain juga sih tidak terlalu memberatkan, karena jquery / javascript yang digunakan tidak terlalu banyak /atau berat.

Pure css Responsive Dropdown Menu Navigation Okeh lah, langsung saja ke tutorial cara pemasangannya ke blog.....
  • Login ke Blogger.com
  • Masuk ke tab Template Edit HTML Cari Kode ]]></b:skin> atau </style>
  • Masukan CSS di bawah ini, tepat di atasnya. 
    • 
.toggle,[id^=drop]{display:none;}nav{margin:0;padding:0;background-color:#1565C0;}nav ul li:hover{background:#2576D2;}
#logo{display:block;padding:0 30px;float:left;font-size:20px;line-height:60px;}
nav:after{content:"";display:table;clear:both;}
nav ul{float:right;padding:0;margin:0;list-style:none;position:relative;}
nav ul li{margin:0px;display:inline-block;float:left;background-color:#1565C0;}
nav a{display:block;padding:14px 20px;color:#FFF;font-size:17px;text-decoration:none;}
nav ul li ul li:hover{background:#2576D2;}
nav a:hover{background-color:#2576D2;}
nav ul ul{visibility:hidden;opacity:0;position:absolute;transform:translateZ(0);transform:translateY(10%);transition:all 0.5s ease 0s,visibility 0s linear 0.5s;}
nav ul li:hover>ul{display:inherit;visibility:visible;opacity:1;transform:translateX(0%);transition-delay:0s;}
nav ul ul li{width:170px;float:none;display:list-item;position:relative;}
nav ul ul ul li{position:relative;top:-60px;left:170px;}
li>a:after{content:'+';}
li>a:only-child:after{content:'';}
@media all and (max-width:808px){
 nav ul ul{display:none;position:absolute;top:60px;}
 nav ul li:hover>ul{display:inherit;}
 #logo{display:block;padding:0;width:100%;text-align:center;float:none;}
 nav{margin:0;}
 .toggle+a,.menu{display:none;}
 .toggle{display:block;background-color:#368DF0;padding:14px 20px;color:#FFF;font-size:17px;text-decoration:none;border:none;}
 .toggle:hover{background-color:#0E4584;}
 [id^=drop]:checked+ul{display:block;width:100%;}nav ul li{display:block;width:100%;}
 nav ul ul .toggle,nav ul ul a{padding:0 40px;}
 nav ul ul ul a{padding:0 80px;}
 nav a:hover,nav ul ul ul a{background-color:#000000;}
 nav ul li ul li .toggle,nav ul ul a,nav ul ul ul a{padding:14px 20px;color:#FFF;font-size:17px;}
 nav ul li ul li .toggle,nav ul ul a{background-color:#212121;}
 nav ul ul{float:none;position:static;color:#ffffff;visibility:visible;opacity:1;transform:none;}
 nav ul ul li:hover>ul,nav ul li:hover>ul{display:none;}
 nav ul ul li{display:block;width:100%;}
 nav ul ul ul li{position:static;}}
@media all and (max-width:330px){
 nav ul li{display:block;width:94%;}}
  • Langkah terakhir copy HTML dibawah ini lalu masukan kode ini di bawah </header> atau <body>. Atau terserah kalian mau ditaro dimana. 
    • 
        <nav>
        <div id="logo">Your Logo here</div>

        <label for="drop" class="toggle">Menu</label>
        <input type="checkbox" id="drop" />
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li>
                    <!-- First Tier Drop Down -->
                    <label for="drop-1" class="toggle">WordPress +</label>
                    <a href="#">WordPress</a>
                    <input type="checkbox" id="drop-1"/>
                    <ul>
                        <li><a href="#">Themes and stuff</a></li>
                        <li><a href="#">Plugins</a></li>
                        <li><a href="#">Tutorials</a></li>
                    </ul> 

                </li>
                <li>

                <!-- First Tier Drop Down -->
                <label for="drop-2" class="toggle">Web Design +</label>
                <a href="#">Web Design</a>
                <input type="checkbox" id="drop-2"/>
                <ul>
                    <li><a href="#">Resources</a></li>
                    <li><a href="#">Links</a></li>
                    <li>
                       
                    <!-- Second Tier Drop Down -->        
                    <label for="drop-3" class="toggle">Tutorials +</label>
                    <a href="#">Tutorials</a>         
                    <input type="checkbox" id="drop-3"/>

                    <ul>
                        <li><a href="#">HTML/CSS</a></li>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">Other</a></li>
                    </ul>
                    </li>
                </ul>
                </li>
                <li><a href="#">Graphic Design</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
    Silahkan taro html menu navigationnya sesuai keinginan kalian... Kalo kurang paham silahkan bertanya di kolom komentar.
    #untuk logo 
    
<div id="logo">Your Logo here</div>
    #untuk link dan judul
    Silahkan ganti tanda pagar (#) dengan link kalian dan home dengan judul yang kalian mau 
    
<li><a href="#">Home</a></li>
Contoh
<li><a href="http://mastamvan.blogspot.com/">Blog Mas Tamvan</a></li>

Cukup sekian dan terimakasih, semoga artikel tentang Responsive Menu Navigation Drop Down With CSSini bermanfaat.

Jangan lupa tinggalkan jejak d kolom komentar ya :)
Tinggalkan Komentar