Tutorial animasi drop down menu
Selamat sejahtera kepada semua rakan.
 |
| Animasi Drop Down Menu |
Ada banyak tutorial yang ada jika dibuat carian melalui Google. Boleh pilih mengikut kehendak dan kesesuaian. Drop down menu yang Sop guna sangat simple kerana hanya menggunakan add widget sahaja untuk menambah atau membuangnya. Ada tutorial yang menggunakan penambahan dan pengurangan dibuat pada edit HTML.
Untuk memasukkan menu ini, sila masukkan kod di bawah ke add a gadjet:
<!--Animasi Menu Mula | sop.name.my-->
<link rel="stylesheet" type="text/css" href="https://mybloggerlab.com/StyleSheet/MBLNAV.css"/>
<nav id="mbl-menu-wrap">
<ul id="mbl-menu">
<li><a href="URL-Here">Home</a></li>
<li>
<a href="URL-Here">Categories</a>
<ul>
<li>
<a href="URL-Here">CSS</a>
<ul>
<li><a href="URL-Here">Item 11</a></li>
<li><a href="URL-Here">Item 12</a></li>
<li><a href="URL-Here">Item 13</a></li>
<li><a href="URL-Here">Item 14</a></li>
</ul>
</li>
<li>
<a href="URL-Here">Graphic design</a>
<ul>
<li><a href="URL-Here">Item 21</a></li>
<li><a href="URL-Here">Item 22</a></li>
<li><a href="URL-Here">Item 23</a></li>
<li><a href="URL-Here">Item 24</a></li>
</ul>
</li>
<li>
<a href="URL-Here">Development tools</a>
<ul>
<li><a href="URL-Here">Item 31</a></li>
<li><a href="URL-Here">Item 32</a></li>
<li><a href="URL-Here">Item 33</a></li>
<li><a href="URL-Here">Item 34</a></li>
</ul>
</li>
<li>
<a href="URL-Here">Web design</a>
<ul>
<li><a href="URL-Here">Item 41</a></li>
<li><a href="URL-Here">Item 42</a></li>
<li><a href="URL-Here">Item 43</a></li>
<li><a href="URL-Here">Item 44</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="URL-Here">Work</a>
<ul>
<li><a href="URL-Here">Work1</a></li>
<li><a href="URL-Here">Work2</a></li>
<li><a href="URL-Here">Work3</a></li>
<li><a href="URL-Here">Work4</a></li>
</ul>
</li>
<li><a href="URL-Here">About</a></li>
<li><a href="URL-Here">Contact</a></li> <li><a href="https://www.mybloggerlab.com">MyBloggerLab</a> </li> </ul>
</nav>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').css('visibility','visible');
}).mouseout(function(){
$(this).children('ul').css('visibility','hidden');
})
}
/* Mobile */
$('#mbl-menu-wrap').prepend('<div id="mbl-menu-trigger">mbl-Menu</div>');
$("#mbl-menu-trigger").on("click", function(){
$("#menu").slideToggle();
});
// iPad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) $('#mbl-menu ul').addClass('no-transition');
});
</script>
<!--Animasi Menu Tamat | sop.name.my-->
Update: Berikut adalah kod menu yang Sop guna pakai sekarang:
<!-- Menu Start | sop.name.my -->
<style>
#mmenu, #mmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
#mmenu {
width: auto;
margin: auto;
background-color: #0080FF;
background-image: -moz-linear-gradient(#2ECCFA, #0080FF);
background-image: -webkit-gradient(linear, left top, left bottom, from(#2ECCFA), to(#0080FF));
background-image: -webkit-linear-gradient(#2ECCFA, #0080FF);
background-image: -o-linear-gradient(#2ECCFA, #0080FF);
background-image: -ms-linear-gradient(#2ECCFA, #0080FF);
background-image: linear-gradient(#2ECCFA, #0080FF);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
#mmenu:before,
#mmenu:after {
content: "";
display: table;
}
#mmenu:after {
clear: both;
}
#mmenu {
zoom:1;
}
#mmenu li {
float: left;
border-right: 1px solid none;
position: relative;
}
#mmenu a {
float: left;
padding: 12px 30px;
color: #FFFFFF;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
}
#mmenu li:hover > a {
color: #00FF09;
}
*html #mmenu li a:hover { /* IE6 only */
color: #00FF09;
}
#mmenu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #2ECCFA;
background: -moz-linear-gradient(#2ECCFA, #0080FF);
background-image: -webkit-gradient(linear, left top, left bottom, from(#2ECCFA), to(#0080FF));
background: -webkit-linear-gradient(#2ECCFA, #0080FF);
background: -o-linear-gradient(#2ECCFA, #0080FF);
background: -ms-linear-gradient(#2ECCFA, #0080FF);
background: linear-gradient(#2ECCFA, #0080FF);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#mmenu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mmenu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
}
#mmenu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
}
#mmenu ul li:last-child {
}
#mmenu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mmenu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#mmenu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#mmenu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #2ECCFA;
}
#mmenu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mmenu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mmenu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mmenu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<div id="mmenu">
<li><a href='/'>Depan</a></li>
<li><a href='#'>Peribadi</a>
<ul class='children'>
<li><a href='http://www.sop.name.my/search/label/blog'>Kisah Sop</a></li>
<li><a href='http://www.sop.name.my/search/label/anak'>Anak-anak</a>
<ul class='children'>
<li><a href='http://www.sop.name.my/search/label/Azfar'>Azfar</a></li>
<li><a href='http://www.sop.name.my/search/label/Azwar'>Azwar</a></li>
<li><a href='http://www.sop.name.my/search/label/Auni'>Auni</a></li>
</ul>
</li>
<li><a href='http://www.sop.name.my/search/label/Melancong'>Melancong</a></li>
<li><a href='http://www.sop.name.my/search/label/ronda-ronda'>Ronda-ronda</a></li>
<li><a href='http://www.sop.name.my/search/label/Ride'>Ride</a></li>
<li><a href='http://www.sop.name.my/search/label/makan-makan'>Makan-makan</a></li>
</ul>
</li>
<li><a href='#'>Review</a>
<ul class='children'>
<li><a href='http://www.sop.name.my/search/label/produk'>Produk</a>
<ul class='children'>
<li><a href='http://www.sop.name.my/search/label/IKEA'>IKEA</a></li>
<li><a href='http://www.sop.name.my/search/label/Celcom'>Celcom</a></li>
</ul>
</li>
<li><a href='http://www.sop.name.my/search/label/hotel'>Hotel</a></li>
<li><a href='http://www.sop.name.my/search/label/Restoran'>Restoran</a></li>
<li><a href='http://www.sop.name.my/search/label/menu'>Makanan</a></li>
<li><a href='http://www.sop.name.my/search/label/Blog Review'>Blog Review</a></li>
<li><a href='http://www.sop.name.my/search/label/website'>Website</a></li>
</ul>
</li>
<li><a href='http://www.sop.name.my/search/label/Blogger'>Blogger</a>
<ul class='children'>
<li><a href='http://www.sop.name.my/search/label/Tutorial'>Tutorial</a></li>
<li><a href='http://www.sop.name.my/search/label/widget'>Widget</a></li>
<li><a href='http://www.sop.name.my/search/label/template'>Template</a></li>
<li><a href='http://www.sop.name.my/search/label/SEO'>SEO</a></li>
<li><a href='http://www.sop.name.my/search/label/review'>Review</a></li>
<li><a href='http://www.sop.name.my/search/label/Tips'>Tips</a></li>
<li><a href='http://www.sop.name.my/search/label/Domain'>Domain</a></li>
<li><a href='http://www.sop.name.my/p/top-20.html'>Top 20</a></li>
<li><a href='http://www.sop.name.my/search/label/pendapatan'>Pendapatan</a>
<ul class='children'>
<li><a href='http://www.sop.name.my/search/label/Google%20Adsense'>Google Adsense</a></li>
<li><a href='http://www.sop.name.my/search/label/Nuffnang'>Nuffnang</a></li>
<li><a href='http://www.sop.name.my/search/label/ChurpChurp'>ChurpChurp</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Informasi</a>
<ul class='children'>
<li><a href='http://www.sop.name.my/search/label/Acara'>Acara</a></li>
<li><a href='http://www.sop.name.my/search/label/alkisah'>Alkisah</a></li>
<li><a href='http://www.sop.name.my/search/label/Automotif'>Automotif</a></li>
<li><a href='http://www.sop.name.my/search/label/Kesihatan'>Kesihatan</a></li>
<li><a href='http://www.sop.name.my/search/label/Pendidikan'>Pendidikan</a></li>
<li><a href='http://www.sop.name.my/search/label/Permotoran'>Permotoran</a></li>
<li><a href='http://www.sop.name.my/search/label/Pekerjaan'>Pekerjaan</a></li>
<li><a href='http://www.sop.name.my/search/label/Keagamaan'>Keagamaan</a></li>
</ul>
</li>
<li><a href='#'>Teknologi</a>
<ul class='children'>
<li><a href='http://www.sop.name.my/search/label/Android'>Android</a></li>
<li><a href='http://www.sop.name.my/search/label/aplikasi'>Aplikasi</a></li>
<li><a href='http://www.sop.name.my/search/label/komputer'>Komputer</a></li>
<li><a href='http://www.sop.name.my/search/label/internet'>Internet</a></li>
</ul>
</li>
<li><a href='#'>Hiburan</a>
<ul class='children'>
<li><a href='http://www.sop.name.my/p/tonton-tv-online.html'>TV Online</a></li>
<li><a href='http://www.sop.name.my/p/dengar-radio-online.html'>Radio Online</a></li>
<li><a href='http://www.sop.name.my/search/label/Filem'>Filem</a></li>
<li><a href='http://www.sop.name.my/search/label/Lawak'>Lawak</a></li>
</ul>
</li>
</div>
<!-- Menu End | sop.name.my -->
Sila ubah URL-Here dengan URL anda dan nama link tersebut. Jika hendak buang salah satu link, pastikan buang dari pembuka kod dan penamat kod menu. Begitu juga hendak tambah, copy kod awal hingga akhir. Boleh cuba, try dan test :)
Untuk ubah warna, sila bermain dengan kod warna yang ada di atas.
Sumber asal tutorial ini boleh dilihat dari sini.
EmoticonEmoticon