IndeksIndeks  CalendarCalendar  FAQFAQ  PencarianPencarian  AnggotaAnggota  GroupGroup  PendaftaranPendaftaran  LoginLogin  
Pencarian
 
 

Display results as :
 
Rechercher Advanced Search
Latest topics
Navigation
 Portal
 Indeks
 Anggota
 Profil
 FAQ
 Pencarian
Forum
Affiliates
free forum


Share | 
 

 Membuat Navigasi Dropdown Sliding Web Menu tanpa Flash dengan JQuery

Topik sebelumnya Topik selanjutnya Go down 
PengirimMessage
Admin
Admin


Jumlah posting : 94
Join date : 28.02.11

PostSubyek: Membuat Navigasi Dropdown Sliding Web Menu tanpa Flash dengan JQuery    Sat Apr 28, 2012 8:24 am

Membuat tampilan web menu /Navigasi yang interaktif tidak hanya dengan Flash saja, melainkan anda bisa membuat Navigasi menu dengan Script jQuery. Navigasi ini akan tampil secara dropdown saat mouse anda arahkan pada Menu tersebut.

Berikut adalah Tutorial untuk membuat Effect Interaktif Drop Down Navigasi dengan CSS dan script jQuery.


Struktur HTML

hal pertama yang perlu anda lakukan adalah meload css file yang kita buat ( jika code/file css berada di luar html ( external css) pada bagian HEAD
1 <link rel="stylesheet" href="/style.css" type="text/css" charset="utf-8">
2 <script type="text/javascript" src="/jquery-1.3.2.js"></script>


kemudian Menambahkan / membuat kode HTML sederhana pada halaman web dan menambahkannya diantara bagian BODY atau dimana menu ini nantinya akan ditampilkan. Penggunaan css class span di dalam list element untuk tiap Navigasi/Menu item anda.
1 <ul id="navigation">
2 <li class="home"><a><span>Home</span></a></li>
3 <li class="about"><a><span>About</span></a></li>
4 <li class="search"><a><span>Search</span></a></li>
5 <li class="photos"><a><span>Photos</span></a></li>
6 <li class="rssfeed"><a><span>Rss Feed</span></a></li>
7 <li class="podcasts"><a><span>Podcasts</span></a></li>
8 <li class="contact"><a><span>Contact</span></a></li>
9 </ul>


CSS Menu Navigasi

Dibawah ini contoh penggunaan CSS untuk navigasi dari HTML diatas. Anda dapat menyesesuaikannya untuk jarak dan letak dari navigasi ini.
01 ul#navigation {
02 position: fixed;
03 margin: 0px;
04 padding: 0px;
05 top: 0px;
06 right: 10px;
07 list-style: none;
08 z-index:999999;
09 width:721px;
10 }
11 ul#navigation li {
12 width: 103px;
13 display:inline;
14 float:left;
15 }

Pada CSS diatas menggunakan z-index:999999 yang tinggi. Ini dimaksudkan agar Menu tampil secara "Floating" di atas dari semua element yang lainnya.

Untuk membuat agar menu tampil horisontal maka pada CSS kita akan mengeset element menjadi inline, seperti pada contoh css dibawah ini :
01 ul#navigation li a {
02 display: block;
03 float: left;
04 margin-top: -2px;
05 width: 100px;
06 height: 25px;
07 background-color: #E7F2F9;
08 background-repeat: no-repeat;
09 background-position: 50% 10px;
10 border: 1px solid #BDDCEF;
11 text-decoration: none;
12 text-align: center;
13 padding-top: 80px;
14 }


Selanjutnya untuk memperindah tampilan navigasi anda, kita tambahkan Rounded Border dan background dengan CSS serta membuat item terkesan transparant :
01 ul#navigation li a {
02 display: block;
03 float:left;
04 margin-top: -2px;
05 width: 100px;
06 height: 25px;
07 background-color:#E7F2F9;
08 background-repeat:no-repeat;
09 background-position:50% 10px;
10 border:1px solid #BDDCEF;
11 text-decoration:none;
12 text-align:center;
13 padding-top:80px;
14 -moz-border-radius:0px 0px 10px 10px;
15 -webkit-border-bottom-right-radius: 10px;
16 -webkit-border-bottom-left-radius: 10px;
17 -khtml-border-bottom-right-radius: 10px;
18 -khtml-border-bottom-left-radius: 10px;
19 opacity: 0.7;
20 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
21 }


Untuk memperindah tampilan effect text link Menu dari tiap tiap item element kita memperindah dengan menambahkan images background yang akan terlihat seperti Icon pada tiap link menu.
01 ul#navigation .home a{
02 background-image: url(home.png);
03 }
04 ul#navigation .about a {
05 background-image: url(id_card.png);
06 }
07 ul#navigation .search a {
08 background-image: url(search.png);
09 }
10 ul#navigation .podcasts a {
11 background-image: url(ipod.png);
12 }
13 ul#navigation .rssfeed a {
14 background-image: url(images/rss.png);
15 }
16 ul#navigation .photos a {
17 background-image: url(camera.png);
18 }
19 ul#navigation .contact a {
20 background-image: url(mail.png);
21 }


untuk effect mouse over link menu dapat di melakukan penggantian warna background yang berbeda
1 ul#navigation li a:hover{
2 background-color:#CAE3F2;
3 }


Selanjutnya kita akan melakukan span css untuk tiap item pada element menu
1 ul#navigation li a span{
2 letter-spacing:2px;
3 font-size:11px;
4 color:#60ACD8;
5 text-shadow: 0 -1px 1px #fff;
6 }


pekerjaan yang terakhir yaitu menambahkan effect sliding/ dropdown dengan menambahkan function script jQuery pada html yang kita buat.
01 <script type="text/javascript">
02 $(function() {
03 var d=300;
04 $('#navigation a').each(function(){
05 $(this).stop().animate({
06 'marginTop':'-80px'
07 },d+=150);
08 });
09
10 $('#navigation > li').hover(
11 function () {
12 $('a',$(this)).stop().animate({
13 'marginTop':'-2px'
14 },200);
15 },
16 function () {
17 $('a',$(this)).stop().animate({
18 'marginTop':'-80px'
19 },200);
20 }
21 );
22 });
23 </script>
Kembali Ke Atas Go down
Lihat profil user http://belianet.forumid.net
 
Membuat Navigasi Dropdown Sliding Web Menu tanpa Flash dengan JQuery
Topik sebelumnya Topik selanjutnya Kembali Ke Atas 
Halaman 1 dari 1

Permissions in this forum:Anda tidak dapat menjawab topik
 :: WEBMASTER-
Navigasi: