Cara Membuat Navigasi Menu dan Kotak Pencarian Responsive

kali ini saya ingin membuat tutorial tentang cara untuk membuat navigasi menu beserta kotak pencarian yang responsive. Untuk membuat navigasi responsive ini mungkin tidak semudah yang dibayangkan. Tidak terlalu sulit juga. Karena navigiasi ini tidak otomatis responsive, namun juga membutuhkan media query untuk membuatnya responsive.
ada 3 Codding yang harus ditambahkan pada Codding Blog anda. Untuk itu, saya akan menunjukannya satu per satu .

1) CSS

Letakkan codding di bawah ini tepat diatas ]]</b:skin>. Untuk mempermudah pencarian di jendela Codding, klik Ctrl+f untuk memunculkan kotak search.

nav {
text-transform:uppercase;
position:relative;
font:bold 12px Arial,Sans-Serif;
background: #e74c3c;
}
nav * {
margin:0 0 0 0;
padding:0 0 0 0;
list-style:none;
}
nav ul {
overflow: hidden;
    background:rgba(231, 76, 60, 0.84);
    float:left;
}
nav li {
float:left;
display:inline;
}
nav li a {
padding:3px 15px;
line-height:40px;
color:#fff !important;
display:block;
text-decoration:none;
}
nav li a:hover {
background:rgba(231, 76, 60, 0.84) !important;
}
nav li ul {
display:block;
width:170px;
position:absolute;
left:auto;
z-index:10;
visibility:hidden;
opacity:0;
height:auto;
transition:all 0.26s ease-out 0.2s;
}
nav li li {
display:block;
float:none;
width:100%;
}
nav li:hover > ul {
visibility:visible;
width:200px;
opacity:1;
}
nav li li ul {
left:200px;
margin-top:
-40px;
}
nav li.sub > a {
position:relative;
padding-right:30px;
}
nav li.sub > a:after {
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:#eee transparent transparent transparent;
position:absolute;
top:20px;right:10px;
}
nav li.sub li.sub > a:after {
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:transparent transparent transparent #eee;
position:absolute;
top:16px;
right:10px;
}

2) Responsive

untuk membuatnya Responsive, anda juga perlu menambahkan media query ke template anda. Terdapat 2 media query, yaitu pada ukuran 600px dan 380px. Letakkan media query ini sesuai dengan media query yang ada di template anda tepat dibawah Codding CSS yang sudah kita ketik sebelumnya.

3) HTML

Kemudian letakkan kode dibawah ini tepat di bawah header jika anda ingin tampilan navigasi ini berada di bawah header.

<nav>
<ul>
<li><a href="/search/label/Tutorial">Tutorial</a></li>
<li class="sub"><a href="/search/label/Template">Template</a><ul>
<li><a href="/search/label/CSS3">CSS3</a></li>
<li><a href="/search/label/HTML5">HTML5</a></li>
<li><a href="/search/label/Responsive">Responsive</a></li>
<li><a href="/search/label/SEO">SEO</a></li>
</ul>
</li>
</ul>
<select class="nav2" id="nav2" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="/">Home</option>
<option value="/search/label/Tutorial">Tutorial</option>
<option value="/search/label/Template">Template</option>
<option value="/search/label/CSS3">- CSS3</option>
<option value="/search/label/HTML5">- HTML5</option>
<option value="/search/label/Responsive">- Responsive</option>
<option value="/search/label/SEO">- SEO</option>
</select>
<form action="/search" id="search-top" method="get">
<input name="q" placeholder="Search..." type="text"/><input id="search-button-top" type="submit" value=""/></form>
</nav> <br>

Setelah sudah, anda tinggal menyimpannya dan bisa langsung melihat hasilnya di Blog anda.

*catatan ( usahakan anda sudah membackup script html awal anda agar jika terjadi kesalahan dalam memasukan script di atas anda bisa mengembalikannya )

Cara Membuat Navigasi Menu dan Kotak Pencarian Responsive

Ryan Pace

No comments:

About Me

Total Pageviews

STT-PLN JAKARTA

Labels

Popular Posts

Pengunjung Blog