Membuat Navigasi di blog atau pu Website adalah sebuah kebutuhan bagi yang ingin memudahkan pengunjung untuk mengakses isi content yang ada pada blog tersebut. Membuat navigasi stylish mungkin dapat menjadi solusi bagi yang ingin memasang menu navigasi akan tetapi takut akan menambah berat loading blog. walaupun menu navigasi ini juga menggunakan JQuery, akan tetapi tidak akan menambah lama loading blog, karena menu ingin termasuk paling ringan menurut saya.Untuk demonya silahkan dilihat pada link berikut :
Ikuti langkah-langkah dibawah, cara Membuat Menu Accordion Dengan JQuery :
- Seperti biasa Log-In dulu ke blog anda.
- Lanjut ke "Tata Letak" kemudian "Edit HTML".
- Centang "Expand Template Widget".
- Cek dulu pada blog anda, apakah sudah termasang JQuery berikut :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
- Jika belum termasang, pasang dulu dan letakkan di bawah <head>
- Kemudian copy script di bawah ini dan letakkan di bawah script di atas.
- Selanjutnya cari code CSS ]]></b:skin> letakkan script di bawah ini di atasnya.
ul{ /* the unordered list */
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0px;
margin-left:-40px;
}
ul li{
border:1px solid #444;
display:inline-block; /* changing the display property */
float:left; /* floating the list items to the left */
height:25px;
list-style-type:none; /* disabling the list icon */
overflow:hidden; /* hiding the overflowing content */
}
ul li a, ul li a:hover,
ul li a:visited{
text-decoration:none; /* removing the underline text-decoration */
}
/* styling the links */
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */
outline:none;
padding:5px 10px;
display:block;
}
/* styles that are assigned individually */
.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
margin-top:-25px;
background:#eee;
color:#333;
}
.selectedMenu,.selectedMenu:visited {
margin:0;
}
.normalMenu, .normalMenu:visited{
color:#fff;
background: #333;
}
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0px;
margin-left:-40px;
}
ul li{
border:1px solid #444;
display:inline-block; /* changing the display property */
float:left; /* floating the list items to the left */
height:25px;
list-style-type:none; /* disabling the list icon */
overflow:hidden; /* hiding the overflowing content */
}
ul li a, ul li a:hover,
ul li a:visited{
text-decoration:none; /* removing the underline text-decoration */
}
/* styling the links */
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */
outline:none;
padding:5px 10px;
display:block;
}
/* styles that are assigned individually */
.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
margin-top:-25px;
background:#eee;
color:#333;
}
.selectedMenu,.selectedMenu:visited {
margin:0;
}
.normalMenu, .normalMenu:visited{
color:#fff;
background: #333;
}
- Kemudian cari code <div id='content-wrapper'> copy dan pate script di bawah ini, dan letakkan di bawah code <div id='content-wrapper'>
<ul id="navigationMenu">
<li><a href="#" class="normalMenu">Home</a></li>
<li><a href="#" class="normalMenu">Services</a></li>
<li><a href="#" class="selectedMenu">Our clients</a></li>
<li><a href="#" class="normalMenu">The team</a></li>
<li><a href="#" class="normalMenu">About us</a></li>
<li><a href="#" class="normalMenu">Contact us</a></li>
</ul>
<li><a href="#" class="normalMenu">Home</a></li>
<li><a href="#" class="normalMenu">Services</a></li>
<li><a href="#" class="selectedMenu">Our clients</a></li>
<li><a href="#" class="normalMenu">The team</a></li>
<li><a href="#" class="normalMenu">About us</a></li>
<li><a href="#" class="normalMenu">Contact us</a></li>
</ul>
- Selesai.
- Klik Simpan.
- Semoga bermanfaat Yaw... !!!
