Kali ini kita akan mempraktekkan penerapan header responsive dengan menu navigasi dan kotak search pada blog, untuk lebih jelasnya berikut screnshoot setelah penerapannya :
Berikut langkah-langkah penerapan header responsive dengan menu navigasi dan search pada blog.
Pertama : Sisipkan scritp berikut di atas <body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'/>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>
Script di atas bisa anda abaikan jika sudah terpasang pada blog anda, jadi sebaiknya di cek dulu, jika sudah selesai, kita ketahap selanjutnya bagian,
Kedua : Terapkan HTML berikut Pada header atau ganti bagian header dengan HTML berikut:
Bagian ketiag Sisipkan CCS berikut di bawah <head><div>
<div class='header-blue'>
<nav class='navbar navbar-default navigation-clean-search'>
<div class='container'>
<div class='navbar-header'><a class='navbar-brand navbar-link' href='#'>Cara Cara</a>
<button class='navbar-toggle collapsed' data-target='#navcol-1' data-toggle='collapse'><span class='sr-only'>Toggle navigation</span><span class='icon-bar'/><span class='icon-bar'/><span class='icon-bar'/></button>
</div>
<div class='collapse navbar-collapse' id='navcol-1'>
<ul class='nav navbar-nav'>
<li class='dropdown'><a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#'>Kontak <span class='caret'/></a>
<ul class='dropdown-menu' role='menu'>
<li role='presentation'><a href='#'>First Item</a></li>
<li role='presentation'><a href='#'>Second Item</a></li>
<li role='presentation'><a href='#'>Third Item</a></li>
</ul>
</li>
</ul>
<form class='navbar-form navbar-left' target='_self'>
<div class='form-group'>
<label class='control-label' for='search-field'><i class='glyphicon glyphicon-search'/></label>
<input class='form-control search-field' id='search-field' name='search' type='search'/>
</div>
</form>
</div>
</div>
</nav>
</div>
</div>
Selesai, untuk lebih jelas anda bisa cek hasil penerapannya pada mode DEMO<style>
.header-blue{
background:linear-gradient(135deg, #172a74, #21a9af);
background-color:#184e8e;
padding-bottom:80px;
font-family:'Source Sans Pro', sans-serif;
}
@media (max-width:767px) {
.header-blue{
padding-bottom:30px;
}
}
.header-blue .navbar{
background:transparent;
padding-top:12px;
padding-bottom:10px;
color:#fff;
border-radius:0;
box-shadow:none;
border:none;
}
@media (max-width:767px) {
.header-blue .navbar{
padding-top:0;
padding-bottom:0;
}
}
@media (max-width:767px) {
.header-blue .navbar .navbar-header{
padding-top:10px;
padding-bottom:10px;
}
}
@media (max-width:767px) {
.header-blue .navbar .navbar-right{
margin-bottom:20px;
}
}
.header-blue .navbar .navbar-brand{
font-weight:bold;
color:inherit;
}
.header-blue .navbar .navbar-brand:hover{
color:#f0f0f0;
}
.header-blue .navbar .navbar-brand img{
height:100%;
display:inline-block;
margin-right:10px;
width:auto;
}
.header-blue .navbar .navbar-toggle{
border-color:rgba(255,255,255,0.3);
}
.header-blue .navbar .navbar-toggle:hover, .header-blue .navbar-toggle:focus{
background:none;
}
.header-blue .navbar .navbar-toggle .icon-bar{
background-color:#eee;
}
.header-blue .navbar .navbar-collapse, .header-blue .navbar .navbar-form{
border-color:rgba(255,255,255,0.3);
}
.header-blue .navbar .navbar-nav > .active > a, .header-blue .navbar .navbar-nav > .open > a{
background:none;
box-shadow:none;
}
.header-blue .navbar.navbar-default .navbar-nav > .active > a, .header-blue .navbar.navbar-default .navbar-nav > .active > a:focus, .header-blue .navbar.navbar-default .navbar-nav > .active > a:hover{
color:rgba(255,255,255,0.3);
box-shadow:none;
background:none;
pointer-events:none;
}
.header-blue .navbar.navbar .navbar-nav > li > a{
padding-left:18px;
padding-right:18px;
}
.header-blue .navbar.navbar-default .navbar-nav > li > a{
color:#d9d9d9;
}
.header-blue .navbar.navbar-default .navbar-nav > li > a:focus, .header-blue .navbar.navbar-default .navbar-nav > li > a:hover{
color:#fcfeff !important;
background-color:transparent;
}
.header-blue .navbar .navbar-nav > li > .dropdown-menu{
margin-top:-5px;
box-shadow:0 4px 8px rgba(0,0,0,.1);
background-color:#fff;
border-radius:2px;
}
.header-blue .navbar .dropdown-menu > li > a:focus, .header-blue .navbar .dropdown-menu > li > a{
line-height:2;
font-size:14px;
color:#37434d;
}
.header-blue .navbar .dropdown-menu > li > a:focus, .header-blue .navbar .dropdown-menu > li > a:hover{
background:#ebeff1;
}
@media (max-width:767px) {
.header-blue .navbar .navbar-nav .open .dropdown-menu{
box-shadow:none;
background:none;
color:#fff;
}
}
@media (max-width:767px) {
.header-blue .navbar .navbar-nav .open .dropdown-menu > li > a{
color:#fdfeff;
padding-top:12px;
padding-bottom:12px;
line-height:1;
}
}
.header-blue .action-button, .header-blue .action-button:active{
border:1px solid rgba(255,255,255,0.7);
border-radius:20px;
color:#ebeff1;
box-shadow:none;
text-shadow:none;
padding:6px 15px;
background:transparent;
transition:background-color 0.25s;
outline:none;
}
.header-blue .action-button:hover{
color:#fff;
}
.header-blue .action-button.btn-lg{
padding:7px 18px;
}
.header-blue .navbar .navbar-form label{
color:#ccc;
}
.header-blue .navbar .navbar-form .search-field{
background:none;
border:none;
border-bottom:1px solid transparent;
border-radius:0;
color:#ccc;
box-shadow:none;
color:inherit;
transition:border-bottom-color 0.3s;
}
@media (max-width:767px) {
.header-blue .navbar .navbar-form .search-field{
display:inline-block;
width:80%;
}
}
.header-blue .navbar .navbar-form .search-field:focus{
border-bottom:1px solid #ccc;
}
</style>
Makasi prakteknya
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDelete