Dunia Cyber: Navigasi

Showing posts with label Navigasi. Show all posts

Navigasi Halaman dengan Keyboard

Cyber News di June 20, 2014 0

Sisipkan kode ini di atas </head> atau di atas </body> pada editor templat Anda, lalu simpan perubahan:

<script>
//<![CDATA[
(function(win, doc) {

    var pager;

    // left = 37, right = 39
    doc.onkeydown = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            win.location.href = pager.children[0].href;
            return false;
        }
    };

})(window, document);
//]]>
</script>

Sekarang Anda akan bisa melakukan navigasi menggunakan tombol panah kanan atau kiri pada keyboard. Ini cuma berlaku untuk markup HTML navigasi halaman Blogger yang masih standar. Untuk navigasi halaman yang sudah mengalami perubahan mungkin akan memerlukan sedikit modifikasi, terutama pada bagian nilai variabel pager di dalam kondisional switch.

Menambahkan Efek Aktif (Seperti Tertekan)

Dengan cara menambahkan kelas active pada navigasi halaman ketika tombol panah kanan dan/atau kiri ditekan, maka kita bisa menciptakan efek aktif/tertekan palsu melalui kelas tersebut:

<script>
//<![CDATA[
(function(win, doc) {

    var pager;

    // left = 37, right = 39
    doc.onkeydown = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            pager.className = pager.className += ' active';
            win.location.href = pager.children[0].href;
            return false;
        }
    };

    doc.onkeyup = function(e) {
        switch (e.keyCode) {
            case 37: pager = doc.getElementById('blog-pager-newer-link'); break;
            case 39: pager = doc.getElementById('blog-pager-older-link'); break;
        }
        if (pager) {
            pager.className = pager.className.replace(/ active/g, "");
        }
    };

})(window, document);
//]]>
</script>

#blog-pager-older-link.active a,
#blog-pager-newer-link.active a,
#blog-pager-older-link a:active,
#blog-pager-newer-link a:active {
  background-color:red;
  color:white;
}

Demonstrasi bisa Anda lihat di sini. Pastikan Anda sudah berada dalam keadaan terfokus pada area ketika hendak menekan tombol panah kanan dan kiri:

Lihat Demo

Metode ini mungkin tidak cocok untuk diterapkan pada blog yang bersifat umum karena mungkin akan mengganggu fungsi tombol keyboard yang asli. Lebih baik terapkan pada blog-blog yang bersifat pribadi saja.

Code Snippet javascript Navigasi

Cross Browser Scroll to Top Animation (JavaScript)

Cyber News di June 01, 2013 0

/*! http://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation */
function scrollTo(element, to, duration) {

    // http://robertpenner.com/easing/
    // t = current time, b = start value, c = change in value, d = duration
    Math.easeInOutQuad = function(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
    };

    var start = element.scrollTop,
        change = to - start,
        currentTime = 0,
        increment = 20,
        animateScroll = function() {
            currentTime += increment;
            var val = Math.easeInOutQuad(currentTime, start, change, duration);
            element.scrollTop = val;
            if (currentTime < duration) {
                setTimeout(animateScroll, increment);
            }
        };

    animateScroll();

}

Penggunaan

element digunakan untuk mewakili elemen yang ingin diberi efek animasi, to mewakili jarak arah gulungan ke atas, duration mewakili durasi animasi:

<button onclick="scrollTo(document.body, 0, 1000);">Scroll to Top</button>

Lihat Demo

Kamus Blogspot Navigasi Tingkat Lanjut

XHTML Blogger - Navigasi Halaman/Blog Pager

Cyber News di January 01, 2013 0

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>

Data	Keterangan	Tampilan/Contoh Tampilan
data:newerPageUrl	Indikator untuk menyatakan bahwa terdapat posting yang lebih baru sebelum posting/daftar posting yang sedang aktif/terlihat di halaman. Pada intinya, kondisi ini digunakan untuk memunculkan navigasi Posting Lebih Baru saat diperlukan dan akan menyembunyikannya saat tidak diperlukan —misalnya, saat kita sedang berada di halaman muka, kita tidak akan melihat navigasi Posting Lebih Baru. Elemen/data ini juga berfungsi untuk menampilkan URL halaman (saat sedang berada di halaman indeks) atau URL posting (saat sedang berada di halaman item) yang lebih baru dari halaman yang sedang aktif.	`http://nama_blog.blogspot.com/search?updated-max=2012-12-21T16:36:00%2B07:00&max-results=2`
data:olderPageUrl	Indikator untuk menyatakan bahwa terdapat posting yang lebih lama setelah posting/daftar posting yang sedang aktif/terlihat di halaman. Kondisi ini digunakan untuk memunculkan navigasi Posting Lama saat diperlukan dan akan menyembunyikannya saat tidak diperlukan —saat kita sedang berada di halaman terakhir, maka kita tidak akan melihat navigasi Posting Lama). Elemen/data ini juga berfungsi untuk menampilkan URL halaman (saat sedang berada di halaman indeks) atau URL posting (saat sedang berada di halaman item) yang lebih lama dari halaman yang sedang aktif.	`http://nama_blog.blogspot.com/search?updated-max=2012-12-21T16:36:00%2B07:00&max-results=2&reverse-paginate=true`
data:newerPageTitle	Elemen ini akan menampilkan teks navigasi menuju halaman/posting yang lebih baru	`Posting Lebih Baru`, `Newer Post`
data:olderPageTitle	Elemen ini akan menampilkan teks navigasi menuju halaman/posting yang lebih lama	`Posting Lama`, `Older Post`
data:widget.instanceId	[?]	`Blog1`
data:blog.homepageUrl	[?]	`http://nama_blog.blogspot.com/`
data:homeMsg	Elemen ini akan menampilkan teks navigasi ke halaman awal.	`Beranda`
data:mobileLinkUrl	Kode ini akan menggenerasikan URL blog versi seluler berdasarkan URL yang sedang aktif (lebih tepatnya, kode ini akan menghasilkan nilai yang sama dengan `data:blog.url` dengan akhiran berupa `?m=1`).	`http://nama_blog.blogspot.com/?m=1`
data:desktopLinkUrl	Kode ini akan menggenerasikan URL blog versi desktop berdasarkan URL yang sedang aktif (lebih tepatnya, kode ini akan menghasilkan nilai yang sama dengan `data:blog.url` dengan akhiran berupa `?m=0`).	`http://nama_blog.blogspot.com/?m=0`
data:mobileLinkMsg	Elemen ini akan menampilkan teks navigasi menuju blog tampilan seluler.	`Lihat versi seluler`
data:desktopLinkMsg	Elemen ini akan menampilkan teks navigasi menuju blog tampilan web/desktop.	`Lihat versi web`

jQuery Menu Navigasi

Paket Navigasi Prikitiw

Cyber News di October 10, 2011 0

Kali ini Saya akan memperkenalkan sebuah desain menu navigasi mahadahsyat yang dibangun dengan perpaduan antara JQuery dan CSS3. Sebenarnya saat ini Saya tidak tahu harus memberikan nama apa pada menu navigasi ini. Ada ide? Seperti biasa, Saya selalu mengusahakan untuk tidak menggunakan image sedikitpun dalam tiap-tiap desain Saya, contohnya seperti menu ini. Semuanya murni menggunakan CSS3 Box-Shadow dan CSS3 Gradient. Untuk easingnya sendiri Saya memakai perpaduan antara easing easeOutElastic pada pembukaannya dan easing easeInBack pada penutupannya. Penerapan easing ini secara dahsyat telah menciptakan efek elastik yang tampak seperti detak jantung:

Lihat Demo

Langkah Pertama: Pemanggilan JQuery dan Paket Easing

Untuk membuatnya, pertama-tama kamu harus memanggil JQuery dan paket easingnya terlebih dahulu di sini » "Klik!"
Setelah itu salin kode ini, kemudian letakkan tepat di atasnya:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('ul#prikitiw ul li:odd').addClass('odd');
    $('ul#prikitiw li').hover(function() {
        $('ul',this).stop(true, true).show(1500,"easeOutElastic");
    }, function() {
        $('ul',this).stop(true, true).hide(450,"easeInBack");
    });
});
//]]>
</script>

Pemodelan

Berikutnya salin kode CSS ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

/*
Copyright 10 Oktober 2011 :: Taufik Nurrohman
Tema: Jantung Hati
(http://hompimpaalaihumgambreng.blogspot.com)
*/

ul#prikitiw {
  list-style:none;
  margin:0;
  padding:3px 7px 4px;
  height:33px;
  font:bold 12px 'Trebuchet MS',Arial,Sans-Serif;
  background:rgb(211,87,190); /* Old browsers */
  background:-moz-linear-gradient(top, rgba(211,87,190,1) 0%, rgba(191,43,144,1) 50%, rgba(176,0,114,1) 51%, rgba(208,46,159,1) 100%); /* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(211,87,190,1)), color-stop(50%,rgba(191,43,144,1)), color-stop(51%,rgba(176,0,114,1)), color-stop(100%,rgba(208,46,159,1))); /* Chrome,Safari4+ */
  background:-webkit-linear-gradient(top, rgba(211,87,190,1) 0%,rgba(191,43,144,1) 50%,rgba(176,0,114,1) 51%,rgba(208,46,159,1) 100%); /* Chrome10+,Safari5.1+ */
  background:-o-linear-gradient(top, rgba(211,87,190,1) 0%,rgba(191,43,144,1) 50%,rgba(176,0,114,1) 51%,rgba(208,46,159,1) 100%); /* Opera11.10+ */
  background:-ms-linear-gradient(top, rgba(211,87,190,1) 0%,rgba(191,43,144,1) 50%,rgba(176,0,114,1) 51%,rgba(208,46,159,1) 100%); /* IE10+ */
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d357be', endColorstr='#d02e9f',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, rgba(211,87,190,1) 0%,rgba(191,43,144,1) 50%,rgba(176,0,114,1) 51%,rgba(208,46,159,1) 100%); /* W3C */
  border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
  border:2px solid rgba(255, 255, 255, 0.9);
  -webkit-box-shadow:0 0 5px #B20375;
  -moz-box-shadow:0 0 5px #B20375;
  box-shadow:0 0 5px #B20375;
}

ul#prikitiw * {margin:0;padding:0;}

ul#prikitiw a {
  display:block;
  text-decoration:none;
  color:#7eb7fb;
}

ul#prikitiw li {
  position:relative;
  float:left;
}

ul#prikitiw ul {
  position:absolute;
  z-index:100;
  width:160px;
  top:30px;
  left:0;
  background-color:#fff;
  list-style:none;
  -webkit-box-shadow:0 0 5px #B20375;
  -moz-box-shadow:0 0 5px #B20375;
  box-shadow:0 0 5px #B20375;
  display:none;
}

ul#prikitiw ul li {
  position:relative;
  border:0;
  width:100%;
  margin:0;
}

ul#prikitiw ul li a {
  display:block;
  padding:5px 12px 5px;
  background-color:transparent;
  color:#D832AE;
}

ul#prikitiw ul li a:hover, ul#prikitiw ul li:nth-child(odd) a:hover {
  background-color:#D832AE;
  color:#fff;
}

ul#prikitiw .utama {
  padding:8px 14px 7px;
  font-style:italic;
  text-transform:uppercase;
  background:transparent;
  color:#fb9d9d;
  border-top:1px solid transparent;
  text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
}

ul#prikitiw .utama:hover {
  background:rgb(146,28,114); /* Old browsers */
  background:-moz-linear-gradient(top, rgba(146,28,114,1) 0%, rgba(192,30,159,1) 51%, rgba(208,38,177,1) 55%, rgba(229,111,210,1) 100%); /* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(146,28,114,1)), color-stop(51%,rgba(192,30,159,1)), color-stop(55%,rgba(208,38,177,1)), color-stop(100%,rgba(229,111,210,1))); /* Chrome,Safari4+ */
  background:-webkit-linear-gradient(top, rgba(146,28,114,1) 0%,rgba(192,30,159,1) 51%,rgba(208,38,177,1) 55%,rgba(229,111,210,1) 100%); /* Chrome10+,Safari5.1+ */
  background:-o-linear-gradient(top, rgba(146,28,114,1) 0%,rgba(192,30,159,1) 51%,rgba(208,38,177,1) 55%,rgba(229,111,210,1) 100%); /* Opera11.10+ */
  background:-ms-linear-gradient(top, rgba(146,28,114,1) 0%,rgba(192,30,159,1) 51%,rgba(208,38,177,1) 55%,rgba(229,111,210,1) 100%); /* IE10+ */
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#921c72', endColorstr='#e56fd2',GradientType=0 ); /* IE6-9 */
  background:linear-gradient(top, rgba(146,28,114,1) 0%,rgba(192,30,159,1) 51%,rgba(208,38,177,1) 55%,rgba(229,111,210,1) 100%); /* W3C */
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  border-top:1px solid #E8B3D5;
}

ul#prikitiw li li:nth-child(odd) a, ul#prikitiw li.odd a {background-color:#FBF1F7;}

Kerangka Objek

Terakhir, letakkan kode ini di tempat dimana kamu menginginkan menu navigasi ini ditampilkan:

<ul id='prikitiw'>

    <li><a href='#' class='utama'>BERANDA</a></li>

    <li><a href='#' class='utama'>PRIKITIW</a>
        <ul>
            <li><a href='#'>Satu</a></li>
            <li><a href='#'>Dua</a></li>
            <li><a href='#'>Tiga</a></li>
            <li><a href='#'>Empat</a></li>
        </ul>
    </li>

    <li><a href='#' class='utama'>JURNAL</a>
        <ul>
            <li><a href='#'>Satu</a></li>
            <li><a href='#'>Dua</a></li>
            <li><a href='#'>Tiga</a></li>
            <li><a href='#'>Empat</a></li>
        </ul>
    </li>

    <li><a href='#' class='utama'>KOMENTAR</a>
        <ul>
            <li><a href='#'>Satu</a></li>
            <li><a href='#'>Dua</a></li>
            <li><a href='#'>Tiga</a></li>
            <li><a href='#'>Empat</a></li>
        </ul>
    </li>

</ul>

Pelajari beberapa alternatif peletakkan menu navigasi di sini »
Klik Simpan Template.

Sedikit Penyesuaian

Setiap menu utama harus memiliki atribut class='utama' pada masing-masing elemen <a>nya.

Setiap unit menu terdiri dari satu buah menu utama dan beberapa buah submenu seperti ini:

<li><a href='#' class='utama'>PRIKITIW</a>
    <ul>
        <li><a href='#'>Satu</a></li>
        <li><a href='#'>Dua</a></li>
        <li><a href='#'>Tiga</a></li>
        <li><a href='#'>Empat</a></li>
    </ul>
</li>

Ganti kode # dengan sebuah alamat URL, kemudian tentukan nama menu sesuka hati.

jQuery Menu Navigasi

Rocking Rolling Rounded Menu dengan JQuery

Cyber News di September 03, 2011 0

Mungkin ini adalah satu-satunya tipe menu navigasi dengan efek paling aneh. Hanya dengan sebuah sentuhan saja dapat membuat menu ini tampil genit dan menari-nari. Saya rasa, menu navigasi ini berjenis kelamin wanita! Ayo kita cek sama-sama:

Lihat Jenis Kelamin

Versi asli menu navigasi ini sebenarnya menggunakan framework JQuery 1.5.2 sebagai mesinnya, namun setelah Saya coba dengan JQuery versi 1.3.2 ternyata masih bisa berjalan. Bahkan lebih baik!

Untuk membuat menu navigasi seperti ini, pertama-tama pastikan bahwa templatemu sudah dilengkapi dengan JQuery versi 1.3.2 seperti ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

Jika templatemu sudah dilengkapi dengan script di atas, kamu bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum, salin dulu kode di atas kemudian letakkan tepat di atas kode </head>
Setelah itu salin script ini kemudian letakkan di bawah JQuery tadi:

<script src='http://reader-download.googlecode.com/svn/trunk/jquery-animate-css-rotate-scale.js' type='text/javascript'></script> 
<script src='http://reader-download.googlecode.com/svn/trunk/jquery-css-transform.js' type='text/javascript'></script>

Salin kode CSS ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

#rocking-rolling {
  width:auto; 
  height:52px; 
  text-align:left; 
  font-family:"Trebuchet MS",sans-serif; 
  font-size:16px; 
  font-style:normal; 
  font-weight:bold; 
  text-transform:uppercase; 
} 

#rocking-rolling h2, #rocking-rolling p, #rocking-rolling form { 
  /* netralisasi tampilan elemen heading, paragraf dan formulir */ 
  margin:0 0 0 0; 
  pading:0 0 0 0; 
  border:none; 
  background:transparent; 
} 

#rocking-rolling .item { 
  position:relative;
  background-color:#f0f0f0;
  float:right;
  width:52px;
  margin:0px 5px;
  height:52px;
  border:2px solid #ddd;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  -webkit-border-radius:30px; 
  -webkit-box-shadow:1px 1px 3px #555;
  -moz-box-shadow:1px 1px 3px #555;
  box-shadow:1px 1px 3px #555;
  cursor:pointer;
  overflow:hidden;
} 

#rocking-rolling .link { 
  left:2px; 
  top:2px; 
  position:absolute; 
  width:48px; 
  height:48px; 
} 

#rocking-rolling .icon_home   {background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;} 
#rocking-rolling .icon_mail   {background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;} 
#rocking-rolling .icon_help   {background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;} 
#rocking-rolling .icon_find   {background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;} 
#rocking-rolling .icon_photos {background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;} 

#rocking-rolling .item_content { 
  position:absolute; 
  height:52px; 
  width:220px; 
  overflow:hidden; 
  left:56px; 
  top:7px; 
  background:transparent; 
  display:none; 
} 

#rocking-rolling .item_content h2 { 
  color:#aaa; 
  text-shadow:1px 1px 1px #fff; 
  background-color:transparent; 
  font-size:14px; 
} 

#rocking-rolling .item_content a { 
  background-color:transparent; 
  float:left; 
  margin-right:7px; 
  margin-top:3px; 
  color:#bbb; 
  text-shadow:1px 1px 1px #fff; 
  text-decoration:none; 
  font-size:12px; 
} 

#rocking-rolling .item_content a:hover {color:#0b965b;} 

#rocking-rolling .item_content p { 
  background-color:transparent; 
  text-transform:none; 
  font-weight:normal !important; 
  display:none; 
} 

#rocking-rolling .item_content p input { 
  border:1px solid #ccc; 
  padding:1px; 
  width:155px; 
  float:left; 
  margin-right:5px; 
  -webkit-box-shadow:none; 
  -moz-box-shadow:none; 
  box-shadow:none; 
}

Terakhir tinggal meletakkan kerangka objeknya saja.
Salin kode ini, kemudian letakkan di tempat dimana kamu menginginkan menu navigasi ini ditampilkan:

<div id='rocking-rolling'> 

    <div class='item'> 
        <a class='link icon_mail'></a> 
        <div class='item_content'> 
            <h2>KONTAK SAYA</h2> 
            <p> 
                <a href='#'>eMail</a> 
                <a href='#'>Twitter</a> 
                <a href='#'>Facebook</a> 
            </p> 
        </div> 
    </div> 

    <div class='item'> 
        <a class='link icon_help'></a> 
        <div class='item_content'> 
            <h2>BANTUAN</h2> 
            <p> 
                <a href='#'>Buku Tamu</a> 
                <a href='#'>Lapor</a> 
                <a href='#'>Kritik dan Saran</a> 
            </p> 
        </div> 
    </div> 

    <div class='item'> 
        <a class='link icon_find'></a> 
        <div class='item_content'> 
            <h2>TELUSURI</h2> 
            <p> 
                <form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'> 
                    <input name='q' type='text'/> 
                </form> 
            </p> 
        </div> 
    </div> 

    <div class='item'> 
        <a class='link icon_photos'></a> 
        <div class='item_content'> 
            <h2>GALERI FOTO</h2> 
            <p> 
                <a href='#'>Kategori</a> 
                <a href='#'>Arsip</a> 
                <a href='#'>Daftar Isi</a> 
            </p> 
        </div> 
    </div> 

    <div class='item'> 
        <a class='link icon_home'></a> 
        <div class='item_content'> 
            <h2>MULAI DARI SINI</h2> 
            <p> 
                <a href='#'>Pelayanan</a> 
                <a href='#'>Portfolio</a> 
                <a href='#'>Pembayaran</a> 
            </p> 
        </div> 
    </div> 
    <div style='clear:both;'></div> 

</div> 

<script type='text/javascript'> 
function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)}); 
</script>

Pelajari beberapa alternatif peletakkan menu navigasi di sini »
Klik Pratinjau untuk memastikan hasil tampilannya, atau langsung saja simpan templatemu. Sekarang kita masuk ke tahap penyesuaian.

Tipografi Menu:

Setiap unit menu navigasi R3MJ (Rocking Rolling Rounded Menu dengan JQuery) dapat didefinisikan sebagai berikut:

<div class='item'> 
    <a class='nama_class'></a> 
    <div class='item_content'> 
        <h2>JUDUL MENU</h2> 
        <p> 
            <a href='#'>Nama Menu</a> 
            <a href='#'>Nama Menu</a> 
            <a href='#'>Nama Menu</a> 
        </p> 
    </div> 
</div>

Ganti JUDUL MENU dengan judul menu yang kamu kehendaki, dan kode # dengan sebuah alamat URL. Sesuaikan Nama Menu dengan nama menu yang kamu inginkan.

Khusus untuk kotak penelusuran pada menu ini sudah Saya set agar dapat berfungsi pada situs-situs blogspot. Jika kamu bukan termasuk pengguna layanan blogspot, kamu harus mengganti kode yang Saya beri warna kelabu dengan elemen formulir kotak penelusuran posting di templatemu agar elemen tersebut bisa bekerja.
Script yang Saya letakkan di bawah kerangka menu lebih baik jangan dipindahkan ke area <head> ... </head>. Sebagian besar script memang idealnya diletakkan di dalam wilayah kekuasaan <head>, namun beberapa dari mereka juga ada yang harus diletakkan setelah objek seperti pada menu ini.

Sumber: hatetepe://tympanus.net

Pages

Dunia Cyber

Navigasi Halaman dengan Keyboard

Menambahkan Efek Aktif (Seperti Tertekan)

Cross Browser Scroll to Top Animation (JavaScript)

Penggunaan

XHTML Blogger - Navigasi Halaman/Blog Pager

Paket Navigasi Prikitiw

Langkah Pertama: Pemanggilan JQuery dan Paket Easing

Pemodelan

Kerangka Objek

Sedikit Penyesuaian

Rocking Rolling Rounded Menu dengan JQuery

Tipografi Menu:

Popular Posts

Recent Comments

Recent Posts

Random Post

Pages