Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog. Menu navigasi atau Menu bar merupakan penujuk arah yang
dipasang pada suatu situs yang ditujukan untuk memudahkan para
pengunjung blog dalam melakukan eksplorasi didalam situs yang kita
miliki. Fitur salah satu elemen yang memang harus dipasang disebuah
situs atau blog, karena dengan adanya fitur ini kalian sudah mampu
menciptakan user experience yang baik didalam blog atau situs kalian.
Bagi kalian yang tidak mau ribet dalam melakukan pembuatan menu navigasi atau menu bar pada blog, dalam artikel ini saya akan memberikan cara yang mudah untuk membuat menu bar atau menu navigasi di blog tanpa harus mengedit html.
Bagi kalian yang tidak mau ribet dalam melakukan pembuatan menu navigasi atau menu bar pada blog, dalam artikel ini saya akan memberikan cara yang mudah untuk membuat menu bar atau menu navigasi di blog tanpa harus mengedit html.
Langkah - Langkah Membuat Menu Bar Responsive Di blog
- Pertama silahkan kalian buka akun blogger kalian
- Mamsuk ke kemu layout atau Tata Letak .
- Selanjutnya, kalian pilih menu Tambahkan Gadget dan pilih Html/JavaScript .
- Untuk pemilihan tempat widget atau gadget, kalian harus memilih lokasi gadget paling atas. Contohnya seperti pada gambar dibawah ini.
- Kemudian kalian akan melihat tampilan widget html/JavaScript seperti pada gambar dibawah ini, dan kalian perhatikan keterangan dibawah ini :
- Untuk bagian judul biarkan kosong
- Pada bagian konten silahkan kalian pastekan kode yang akan saya berikan didalam artikel ini
- Setelah pengaturan telah kalian buat, langkah terakhir silahkan tekan tombol simpan
Pilihan Navigasi Menu responsive
1. Yellow Drop Down Menu Responsive
<!-- CSS -->
<style type='text/css'>
#menunav *{text-decoration:none;list-style:none;margin:0;padding:0;outline:none}
#menunav .section{width:100%;max-width:1200px;margin:0 auto;display:table;position:relative}
#menunav{width:100%;display:table;background-color:#fde428;margin-bottom:50px}
#menunav #logo{float:left;font-size:24px;text-transform:uppercase;color:#002e5b;font-weight:600;padding:20px 0}
#menunav nav{width:auto;float:right}
#menunav nav ul{display:table;float:right}
#menunav nav ul li{float:left}
#menunav nav ul li:last-child{padding-right:0}
#menunav nav ul li a{color:#002e5b;font-size:18px;padding:25px 20px;display:inline-block;transition:all 0.5s ease 0s}
#menunav nav ul li a:hover{background-color:#002e5b;color:#fde428;transition:all 0.5s ease 0s}
#menunav nav ul li a:hover i{color:#fde428;transition:all 0.5s ease 0s}
#menunav nav ul li a i{padding-right:10px;color:#002e5b;transition:all 0.5s ease 0s}
#menunav .toggle-menu ul{display:table;width:25px}
#menunav .toggle-menu ul li{width:100%;height:3px;background-color:#002e5b;margin-bottom:4px}
#menunav .toggle-menu ul li:last-child{margin-bottom:0}
#menunav input[type=checkbox],label{display:none}
@media only screen and (max-width:1440px){#menunav .section{max-width:95%}}
@media only screen and (max-width:980px){#menunav{padding:20px 0}#menunav #logo{padding:0}#menunav input[type=checkbox]{position:absolute;top:-9999px;left:-9999px;background:none}#menunav input[type=checkbox]:fous{background:none}#menunav label{float:right;padding:8px 0;display:inline-block;cursor:pointer}#menunav input[type=checkbox]:checked ~ nav{display:block}#menunav nav{display:none;position:absolute;right:0;top:53px;background-color:#002e5b;padding:0;z-index:99}#menunav nav ul{width:auto}#menunav nav ul li{float:none;padding:0;width:100%;display:table}#menunav nav ul li a{color:#FFF;font-size:15px;padding:10px 20px;display:block;border-bottom:1px solid rgba(225,225,225,0.1)}#menunav nav ul li a i{color:#fde428;padding-right:13px}}
@media only screen and (max-width:480px){#menunav .section{max-width:90%}}
@media only screen and (max-width:360px){#menunav label{padding:5px 0}#menunav #logo{font-size:20px}#menunav nav{top:47px}}
</style>
<!-- HTML -->
<div id="menunav">
<div class="section">
<a href="http://www.komputerdia.com/" id="logo" target="_blank">Logo Kalian</a>
<label for="toggle-1" class="toggle-menu"/>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</label>
<input type="checkbox" id="toggle-1">
<nav>
<ul>
<li><a href="#logo"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#about"><i class="fa fa-sitemap"></i>Networking</a></li>
<li><a href="#portfolio"><i class="fa fa-gavel"></i>Hardware</a></li>
<li><a href="#services"><i class="fa fa-gears"></i>Services</a></li>
<li><a href="#gallery"><i class="fa fa-picture-o"></i>Gallery</a></li>
<li><a href="#contact"><i class="fa fa-phone"></i>Contact</a></li>
</ul>
</nav>
</div>
</div>
2. Black Drop Down responsive
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
line-height: normal;
}
.nav-bar {
background: #000;
width: 100%;
}
.nav-bar__label {
color: #fff;
display: block;
padding: 10px 0;
text-align: center;
text-transform: uppercase;
width: inherit;
}
.nav-bar__label::after,
.nav-bar__sub-label::after {
content: " +";
}
.nav-bar__label,
.nav-bar__sub-label {
cursor: pointer;
}
.nav-bar__list {
background: #000;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.nav-bar__list,
[id^="toggle"] {
display: none;
}
[id^="toggle"]:checked + .nav-bar__list {
display: block;
}
.menu_navigation {
display: block;
}
.nav-bar__link,
.nav-bar__sub-label {
color: #fff;
display: block;
padding: 10px 20px;
text-decoration: none;
word-wrap: break-word;
}
.menu_navigation .menu_navigation .nav-bar__link,
.menu_navigation .menu_navigation .nav-bar__sub-label {
padding: 10px 10px 10px 30px;
}
.nav-bar__link:hover,
.nav-bar__link:active,
.nav-bar__sub-label:hover {
background: #666;
}
@media all and (min-width : 992px) {
.nav-bar > .nav-bar__label {
display: none;
}
.nav-bar > .nav-bar__list {
display: block;
}
.nav-bar > .nav-bar__list > .menu_navigation {
display: inline-block;
position: relative;
}
.menu_navigation .nav-bar__list {
position: absolute;
}
.menu_navigation .menu_navigation .nav-bar__link,
.menu_navigation .menu_navigation .nav-bar__sub-label {
padding: 10px 20px;
}
}
p{
width:100%;
display:block;
text-align:center;
font-size:200%
}
</style>
<nav class="nav-bar">
<label for="toggle" class="nav-bar__label"><b>Menu Keren Komputerdia</b></label>
<input type="checkbox" id="toggle" class="nav-bar__toggle"/>
<ul class="nav-bar__list">
<li class="menu_navigation">
<a href="http://www.komputerdia.com/2017/09/cara-membuat-menu-bar-keren-dan-responsive-di-blog.html" class="nav-bar__link">Menu Item 1</a>
</li>
<li class="menu_navigation">
<a href="#" class="nav-bar__link">Menu Item 2</a>
</li>
<li class="menu_navigation">
<a href="#" class="nav-bar__link">Menu Item 3</a>
</li>
<li class="menu_navigation">
<label for="toggle-sub-1" class="nav-bar__sub-label">Sub Menu</label>
<input type="checkbox" id="toggle-sub-1" class="nav-bar__toggle"/>
<ul class="nav-bar__list">
<li class="menu_navigation">
<a href="#" class="nav-bar__link">Sub Menu 1</a>
</li>
<li class="menu_navigation">
<a href="#" class="nav-bar__link">Sub Menu 2</a>
</li>
<li class="menu_navigation">
<a href="#" class="nav-bar__link">Sub Menu 3</a>
</li>
</ul>
</li>
<li class="menu_navigation">
<a href="#" class="nav-bar__link">Menu Item 4</a>
</li>
</ul>
</nav>
<br><br><br><br><br><br><br><br><br><br>
<p><a href="http://www.komputerdia.com/2017/09/cara-membuat-menu-bar-keren-dan-responsive-di-blog.html" target='_blank'>Kembali Ke Tutorial</a></p>
3. Simple Grey Navbar Responsive
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
line-height: normal;
}
nav#menunav {
margin: 0 auto;
max-width: 700px;
width: 95%;
}
nav#menunav #checkbox1,
nav#menunav .toggle {
display: none;
}
nav#menunav .menu {
padding: 0;
margin: 0;
max-width: 700px;
height: 50px;
border-radius: 5px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
list-style-type: none;
}
nav#menunav .menu li a {
text-decoration: none;
align-self: center;
border-radius: 5px;
font-size: 14px;
padding: 10px 15px;
transition: background .2s linear;
}
@media screen and (max-width: 600px) {
nav#menunav .menu li a {
font-size: 13px;
}
}
@media screen and (max-width: 550px) {
nav#menunav .toggle {
clear: both;
display: block;
text-align: center;
font-size: 14px;
line-height: 40px;
cursor: pointer;
width: 100%;
height: 40px;
font-size: 18px;
color: #595959;
background: #dbdbdb;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
transition: all .1s linear;
}
nav#menunav .toggle:hover {
background: #cecece;
}
nav#menunav #checkbox1:checked + label .demo li {
opacity: 1;
visibility: visible;
transition: all .7s linear;
}
nav#menunav #checkbox1:checked + label .demo {
height: 200px;
}
nav#menunav .menu {
border-radius: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height: 0px;
transition: height .3s linear;
}
nav#menunav .menu li {
display: flex;
/* magic */
align-self: center;
width: 95%;
opacity: 0;
visibility: hidden;
}
nav#menunav .menu li a {
width: 95%;
text-align: center;
align-self: center;
align-content: center;
}
}
nav#menunav .demo {
background: #625b60;
}
nav#menunav .demo li a {
color: #fff;
}
nav#menunav .demo li a:hover {
background: #6d6268;
}
p{
width:100%;
display:block;
text-align:center;
font-size:200%
}
</style>
<nav id="menunav">
<input type="checkbox" id="checkbox1" />
<label for="checkbox1">
<ul class="menu demo">
<li><a href="#"><b>HOME</b></a></li>
<li><a href="#"><b>NETWORK</b></a></li>
<li><a href="#"><b>HARDWARE</b></a></li>
<li><a href="#"><b>SOFTWARE</b></a></li>
</ul>
<span class="toggle">☰</span>
</label>
</nav>
4. Material Blue Drop Down Responsive
<style>
#materialmenu *{margin:0;padding:0;box-sizing:border-box}
#materialmenu{width:100%;height:50px;background-color:#3498DB;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
#materialmenu a{text-decoration:none}
#materialmenu > nav#menunav > div{float:left;width:16.6666%;height:100%;position:relative}
#materialmenu > nav#menunav > div > a{text-align:center;width:100%;height:100%;display:block;line-height:50px;color:#fbfbfb;transition:background-color 0.2s ease;text-transform:uppercase}
#materialmenu > nav#menunav > div:hover > a{background-color:rgba(0,0,0,0.1);cursor:pointer}
#materialmenu > nav#menunav > div > div{display:none;overflow:hidden;background-color:white;min-width:200%;position:absolute;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);padding:10px}
#materialmenu > nav#menunav > div:not(:first-of-type):not(:last-of-type) > div{left:-50%;border-radius:0 0 3px 3px}
#materialmenu > nav#menunav > div:first-of-type > div{left:0;border-radius:0 0 3px 0}
#materialmenu > nav#menunav > div:last-of-type > div{right:0;border-radius:0 0 0 3px}
#materialmenu > nav#menunav > div:hover > div{display:block}
#materialmenu > nav#menunav > div > div > a{display:block;float:left;padding:8px 10px;width:46%;margin:2%;text-align:center;background-color:#3498DB;color:#fbfbfb;border-radius:2px;transition:background-color 0.2s ease}
#materialmenu > nav#menunav > div > div > a:hover{background-color:#212121;cursor:pointer}
h1{margin-top:150px;font-weight:300}
@media (max-width:600px){#materialmenu > nav#menunav > div > div > a{margin:5px 0;width:100%}#materialmenu > nav#menunav > div > a > span{display:none}}
p{
width:100%;
display:block;
text-align:center;
font-size:200%
}
</style>
<div id="materialmenu">
<nav id="menunav">
<div> <a href="#"><span>Menu </span>1</a>
<div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>
</div>
<div> <a href="#"><span>Menu </span>2</a>
<div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>
</div>
<div> <a href="#"><span>Menu </span>3</a>
<div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>
</div>
<div> <a href="#"><span>Menu </span>4</a>
<div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>
</div>
<div> <a href="#"><span>Menu </span>5</a>
<div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>
</div>
<div> <a href="#"><span>Menu </span>6</a>
<div> <a href="#">Submenu 1</a> <a href="#">Submenu 2</a> <a href="#">Submenu 3</a> <a href="#">Submenu 4</a> <a href="#">Submenu 5</a> <a href="#">Submenu 6</a> </div>
</div>
</nav>
</div>
Demikian.