> Update >>
Home » , » Cara Membuat Slide Navigation dengan JQuery

Cara Membuat Slide Navigation dengan JQuery


Banyak cara membuat Navigation/Tab,kali ini kita akan membuat Cara Membuat  Slide Navigation dengan JQuery pula.

Cara-cara Membuat  Slide Navigation dengan JQuery.

Macam biasa mestilah membuka blog dengan ruang edit html.
Cari code berikut ]></b:skin>
Salin code css dibawah ini dan letak diatas ]></b:skin> tadi.


.headerfixed {
width:600px;
height:56px;
position:absolute;
top:50%;
left:10px;
background:#fff url(title.png) no-repeat top left
}

ul#navixed {
position:fixed;
top:0;
right:10px;
list-style:none;
z-index:999999;
width:721px;
margin:0;
padding:0
}

ul#navixed li {
width:103px;
display:inline;
float:left
}

ul#navixed li a {
display:block;
float:left;
margin-top:-2px;
width:100px;
height:25px;
background-color:#000;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0 0 10px 10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-khtml-border-bottom-right-radius:10px;
-khtml-border-bottom-left-radius:10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)
}

ul#navixed li a:hover {
background-color:#000
}

ul#navixed li a span {
letter-spacing:2px;
font-size:11px;
color:#FFF
}

ul#navixed .home a {
background-image:url(http://3.bp.blogspot.com/-aXrFVyf4QsA/TZBebt8Z8jI/AAAAAAAAAgY/wHMKwyDH86g/s1600/home.png)
}

ul#navixed .about a {
background-image:url(http://4.bp.blogspot.com/-U0VzmKiVx3k/TZBeclR4x5I/AAAAAAAAAgc/c6T4Q-__HTw/s1600/id_card.png)
}

ul#navixed .search a {
background-image:url(http://2.bp.blogspot.com/-84f0jEeeffc/TZBehJq90AI/AAAAAAAAAgs/w4UaF1VPgLs/s1600/search.png)
}

ul#navixed .podcasts a {
background-image:url(http://1.bp.blogspot.com/-sbloKktswgc/TZBed0gK93I/AAAAAAAAAgg/avwmYOErpGI/s1600/ipod.png)
}

ul#navixed .rssfeed a {
background-image:url(http://1.bp.blogspot.com/-Ro686lePoM8/TZBef9OyGcI/AAAAAAAAAgo/e_QaROPLVx0/s1600/rss.png)
}

ul#navixed .photos a {
background-image:url(http://3.bp.blogspot.com/-fi5XP0zvpB8/TZBeael-n5I/AAAAAAAAAgU/bwS_VlGvi-U/s1600/camera.png)
}

ul#navixed .contact a {
background-image:url(http://4.bp.blogspot.com/-RTxgq3NFIYM/TZBeei8J4-I/AAAAAAAAAgk/Zgo-9V-JXss/s1600/mail.png)
}


Cari code </head> pula
Salin code dibawah ini dan letak diatas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/> <script src='https://sites.google.com/site/listblogtutorial/sitemap/jcolor.js'/> <script type='text/javascript'> $(function() { var d=300; $(&#39;#navixed a&#39;).each(function(){ $(this).stop().animate({ &#39;marginTop&#39;:&#39;-80px&#39; },d+=150); }); $(&#39;#navixed &gt; li&#39;).hover( function () { $(&#39;a&#39;,$(this)).stop().animate({ &#39;marginTop&#39;:&#39;-2px&#39; },200); }, function () { $(&#39;a&#39;,$(this)).stop().animate({ &#39;marginTop&#39;:&#39;-80px&#39; },200); } ); }); </script>


Cari lagi code <body>
Salin dan letak code dibawah ini diatas code <body>

<ul id='navixed'><li class='home'><a href='#'><span>Home</span></a></li> <li class='about'><a href='#'><span>About</span></a></li>
<li class='search'><a href='#'><span>Search</span></a></li>
<li class='photos'><a href='#'><span>Photos</span></a></li>
<li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li> <li class='podcasts'><a href='#'><span>Podcasts</span></a></li> <li class='contact'><a href='#'><span>Contact</span></a></li>
</ul>

Klik simpan template.
Buka kembali edit HTML untuk anda edit code no3 mengikut kesesuaian blog anda.

Selamat mencuba

0 comments:

Post a Comment

 
list blog tutorial
Ambil banner

Template

More on this category »
Submit ExpressSEO Tools My Ping in TotalPing.com

tutorial

© All Rights Reserved | Best View With Google Chrome