Light Hover Horizontal Menu With CSS For Blogger
Membuat sebuah menu horizontal yang di sisipi effect jQuery, saat Kursor mouse menyorot menu ini, maka salah satu menu ini akan terselip atau berjungkir balik secara otomatis :
Untuk demo nya bisa dilihat disini
Cara membuat nya yaitu sebagai berikut :
- Login Blogger2
- Pilih Rancangan ---> EDIT HTML
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
Simpan kode berikut di bawah kode di atas(Sesuai tema blog kawan):
<ul class='v2' id='topnav'>
<li><a href='#' title='HOME'>HOME</a></li>
<li><a href='#' title='MENU 1'>MENU 1</a></li>
<li><a href='#' title='MENU 2'>MENU 2</a></li>
<li><a href='#' title='MENU 3'>MENU 3</a></li>
<li><a href='#' title='MENU 4'>MENU 4</a></li>
<li><a href='#' title='MENU 5'>MENU 5</a></li>
<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>
Yang berwarna biru # (alamat link) MENU 3 (nama menu) Silahkan ganti sesuai keinginan......<li><a href='#' title='HOME'>HOME</a></li>
<li><a href='#' title='MENU 1'>MENU 1</a></li>
<li><a href='#' title='MENU 2'>MENU 2</a></li>
<li><a href='#' title='MENU 3'>MENU 3</a></li>
<li><a href='#' title='MENU 4'>MENU 4</a></li>
<li><a href='#' title='MENU 5'>MENU 5</a></li>
<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>
<style type='text/css'>
#nav {
width:100%;
margin-left:-40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPA-hpvpDYnt_bGssOse0sW_N1rArTfhfWEcJJsK7-1MzBdWwGIiAO2oFNkLTBxKqrZAAXlpCkzlYEDA9YmMqFUGEjg4-1XV3yVeNxCoOhLZ_bkOp8B14dneos5XVSznHEBwIrmR-_6G4e/) repeat-x;
}
#nav li {
float: left;
display: block;
}
#nav li a {
float: left;
display: block;
padding: 12px 18px 12px 18px;
text-transform: uppercase;
text-decoration:none;
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat top right;
color:#ffffff;
}
#nav li a:hover {
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat right -40px;
color:#ffffff;
text-decoration:none;
}
ul#nav li.activee a, ul#nav li.current-cat a {
color: #fff;
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat right -80px;
}
#nav li ul {
display: none;
}
</style>
#nav {
width:100%;
margin-left:-40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPA-hpvpDYnt_bGssOse0sW_N1rArTfhfWEcJJsK7-1MzBdWwGIiAO2oFNkLTBxKqrZAAXlpCkzlYEDA9YmMqFUGEjg4-1XV3yVeNxCoOhLZ_bkOp8B14dneos5XVSznHEBwIrmR-_6G4e/) repeat-x;
}
#nav li {
float: left;
display: block;
}
#nav li a {
float: left;
display: block;
padding: 12px 18px 12px 18px;
text-transform: uppercase;
text-decoration:none;
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat top right;
color:#ffffff;
}
#nav li a:hover {
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat right -40px;
color:#ffffff;
text-decoration:none;
}
ul#nav li.activee a, ul#nav li.current-cat a {
color: #fff;
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat right -80px;
}
#nav li ul {
display: none;
}
</style>
Show
0 Comments
prev
next
