apa - apa an ini

              

A B C D
  Disini Gambar LInk Bm Bm Bm Bm

Percobaan ajalah

Buka Gambar Chord Gitar

A7  

Contoh membuat navigation responsive

Cara Membuat Navigasi Menu Responsive plus Kotak Pencarian (Search Box).

JIKA menu yang dipasang di navigasi menu blog Anda tidak terlalu banyak, Anda bisa manfaatkan ruang sebelah kanan untuk menampilkan kotak pencarian. Bisa juga menampilkan ikon media sosial (Lihat: Memasang Navigasi menu Responsive plus Media Sosial).

Contoh atau demo Navigasi Menu Responsive plus Kotak Pencarian ada di blog demo MotoGP Crash.

Jika Anda ingin mengganti navigasi menu blog Anda dengan tampilan seperti itu, berikut ini kode-kodenya yang harus dipadang di template.

Jangan lupa pasang link Awesome Font karena kode-kode Navigasi Menu Responsive plus Kotak Pencarian (Search Box) berikut ini ada elemen yang menggunakan font tersebut.

KODE CSS:
Simpan di atas kode </head>

<style>
/* NAVIGATION MENU */
.toggleMenu {
    display:none;
    background:#555;
    padding:0 15px;
height:45px;
line-height:45px;
    color: #fff !important;
}
#nav {
background:#48d;
text-transform:uppercase;
height:48px;
line-height:45px;
    font-family:Arial;
    font-size: 12px;
}
.nav-menu2 {
background:#48d;
    list-style: none;
margin:0 0 0 0;
     *zoom: 1;
float:left;  
}
.nav-menu2:before,
.nav-menu2:after {
    content: " "; 
    display: table; 
}
.nav-menu2:after {
    clear: both;
}
.nav-menu2 ul {
    list-style: none;
margin:0 0 0 0;
    width:12em;
}
.nav-menu2 a {
display:block;
    padding:0 15px;
}
.nav-menu2 li {
    position: relative;
margin:0 0;
}
.nav-menu2 > li {
    float: left;
}
.nav-menu2 > li > a {
    display: block;
height:48px;
line-height:48px;
color:#fafafc;
}
.nav-menu2 > li > a.active {
background:#c00;
}
.nav-menu2 > li:hover > a {
background:#c00;
}
.nav-menu2 li ul {
background:#fff;
display:block;
position:absolute;
left:0;
z-index:10;
visibility:hidden;
opacity:0;
    -webkit-transition:all .25s ease-out;
       -moz-transition:all .25s ease-out;
        -ms-transition:all .25s ease-out;
         -o-transition:all .25s ease-out;
            transition:all .25s ease-out;
border: 1px solid #d9d9d9;
border: 1px solid rgba(217,217,217,1);
box-shadow:0 0 2px rgba(0,0,0,0.2);
}
.nav-menu2 li li ul {
left:100%;
top:-1px;
}
.nav-menu2 > li.hover > ul {
visibility:visible;
opacity:10;
}
.nav-menu2 > li > ul:before {
content:"";
width:0px;
height:0px;
position:absolute;
bottom:100%;
left:20px;
border-width:8px;
border-style:solid;
border-color:transparent transparent #fff transparent;
display:block;
}

.nav-menu2 li li.hover ul {
visibility:visible;
opacity:10;
}
.nav-menu2 li li a {
    display: block;
color:#333;
    position: relative;
    z-index:100;
line-height:32px;
}
.nav-menu2 li li a:hover {
background:#f0f0f0;
}
.nav-menu2 li li li a {
    background:#fff;
    z-index:20;
color:#333;
}
.nav-menu2 li .parent:after {
    content: "\f107"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding-left:6px;