Pure Css Responsive Dropdown Sajian Navigation
Membuat Menu Navigation Responsive Only CSS Membuat sajian dropdown responsive dengan css . Kali ini blog mas tamvan akan membuatkan sa...
https://tutorialcarapintar.blogspot.com/2019/02/pure-css-responsive-dropdown-sajian.html
Membuat Menu Navigation Responsive Only CSS
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 sajian bar.
Sebelumnya aku juga sudah membuatkan tutorial Memasang Menu Navigation Bar Responsive
Bedanya sajian kafe yang aku share kali ini... sajian ini hanya memakai css untuk tampilan yang simple dan tidak memberatkan loading blog..
yang lain juga sih tidak terlalu memberatkan, alasannya yaitu jquery / javascript yang dipakai tidak terlalu banyak /atau berat.
Okeh lah, eksklusif 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, sempurna 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 kemudian masukan instruksi 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> #untuk logo
<div id="logo">Your Logo here</div> 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 </a></li> Cukup sekian dan terimakasih, semoga artikel wacana Responsive Menu Navigation Drop Down With CSSini bermanfaat.
Jangan lupa tinggalkan jejak d kolom komentar ya :)
