Blog Eksperimen

Tampilkan postingan dengan label Menu Navigasi. Tampilkan semua postingan

Fly Out Menu Navigasi Melayang (CSS3)

Terinspirasi dari konsep Beautiful Slide Out Navigation dengan efek slidingnya yang sangat menarik, kali ini Saya akan membuat efek tersebut hanya dengan CSS3. Kabar baik bagi Anda yang tidak suka atau belum mengerti tentang JQuery. Instalasi menu ini sangat mudah dilakukan:

Pertama-tama masuklah ke halaman editor HTML templatemu. Salin kode CSS ini, kemudian letakkan di atas kode ]]></b:skin> atau </style>:

ul#navigation {
  position:fixed;
  margin:0px;
  padding:0px;
  top:0px;
  right:10px;
  list-style:none;
  z-index:999999;
  width:735px;
  font:normal 11px Arial,Sans-Serif;
  -webkit-animation:2s fxhompinav ease-in-out;
  -moz-animation:2s fxhompinav ease-in-out;
  -ms-animation:2s fxhompinav ease-in-out;
  animation:2s fxhompinav ease-in-out;
}

ul#navigation li {
  width:103px;
  display:inline;
  float:left;
  margin:0 0 0 2px;
}

ul#navigation li a {
  display:block;
  float:left;
  margin-top:-78px;
  width:100px;
  height:22px;
  background-color:#111;
  background-repeat:no-repeat;
  background-position:50% 150px;
  border:2px solid #e6e6e6;
  -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
  -moz-border-radius:0px 0px 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;
  border-radius:0px 0px 10px 10px;
  color:#ccc;
  text-decoration:none;
  text-align:center;
  text-shadow:0 1px 1px #000;
  padding-top:85px;
  -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
}

ul#navigation li a:hover {
  margin-top:-3px;
  background-position:50% 10px;
  color:#fff;
  position:relative;
}

ul#navigation li a:hover:after {
  content:"";
  width:0px;
  height:0px;
  position:absolute;
  top:100%;
  left:45%;
  margin-top:-10px;
  border-width:5px;
  border-style:solid;
  border-color:transparent transparent #e6e6e6 transparent;
}

ul#navigation li:nth-child(1) a {
  background-image:url(http://4.bp.blogspot.com/-Yofmy0GpcY0/TtLyWnIr0jI/AAAAAAAABYQ/di5O82hzbrA/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
  background-image:url(http://2.bp.blogspot.com/-2OSziw4y00Y/TtLybmgNpbI/AAAAAAAABZA/CfXysrknh5k/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
  background-image:url(http://4.bp.blogspot.com/-PafE8z-wPaE/TtLya7QCLRI/AAAAAAAABY0/2ggfAcDdL4c/s1600/search.png);
}
ul#navigation li:nth-child(4) a {
  background-image:url(http://4.bp.blogspot.com/-70Y4BlTmU2k/TtLyY5xd4wI/AAAAAAAABYo/3f2DFCIXHSY/s1600/photo_camera.png);
}
ul#navigation li:nth-child(5) a {
  background-image:url(http://3.bp.blogspot.com/-5gyngAu_azs/TtLyaHMRCpI/AAAAAAAABYs/njvXEAaM4AM/s1600/rss_feed.png);
}
ul#navigation li:nth-child(6) a {
  background-image:url(http://1.bp.blogspot.com/-B6GMO8E3wCQ/TtLyXVvr9lI/AAAAAAAABYY/s5EbibQXFGE/s1600/ipod.png);
}
ul#navigation li:nth-child(7) a {
  background-image:url(http://3.bp.blogspot.com/-m9LeNCW7A4s/TtLyYIsDygI/AAAAAAAABYc/TBmNRPoQZ3s/s1600/mail.png);
}

@-webkit-keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

@-moz-keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

@-ms-keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

@keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

Berikutnya temukan kode ini:

</body>

Salin kode di bawah ini, kemudian letakkan tepat di atasnya:

<ul id='navigation'>
     <li><a href='#'>Home</a></li>
     <li><a href='#'>About</a></li>
     <li><a href='#'>Search</a></li>
     <li><a href='#'>Photos</a></li>
     <li><a href='#'>Rss Feed</a></li>
     <li><a href='#'>Podcasts</a></li>
     <li><a href='#'>Contact</a></li>
</ul>

Klik Simpan Template. Ganti kode # dengan alamat URL. Jika perlu ubah juga nama-nama menu sesuai dengan keinginan.

Atau Juga bisa langsung ke elemen laman html/javascript :

ul#navigation {
  position:fixed;
  margin:0px;
  padding:0px;
  top:0px;
  right:10px;
  list-style:none;
  z-index:999999;
  width:735px;
  font:normal 11px Arial,Sans-Serif;
  -webkit-animation:2s fxhompinav ease-in-out;
  -moz-animation:2s fxhompinav ease-in-out;
  -ms-animation:2s fxhompinav ease-in-out;
  animation:2s fxhompinav ease-in-out;
}

ul#navigation li {
  width:103px;
  display:inline;
  float:left;
  margin:0 0 0 2px;
}

ul#navigation li a {
  display:block;
  float:left;
  margin-top:-78px;
  width:100px;
  height:22px;
  background-color:#111;
  background-repeat:no-repeat;
  background-position:50% 150px;
  border:2px solid #e6e6e6;
  -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
  -moz-border-radius:0px 0px 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;
  border-radius:0px 0px 10px 10px;
  color:#ccc;
  text-decoration:none;
  text-align:center;
  text-shadow:0 1px 1px #000;
  padding-top:85px;
  -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
}

ul#navigation li a:hover {
  margin-top:-3px;
  background-position:50% 10px;
  color:#fff;
  position:relative;
}

ul#navigation li a:hover:after {
  content:"";
  width:0px;
  height:0px;
  position:absolute;
  top:100%;
  left:45%;
  margin-top:-10px;
  border-width:5px;
  border-style:solid;
  border-color:transparent transparent #e6e6e6 transparent;
}

ul#navigation li:nth-child(1) a {
  background-image:url(http://4.bp.blogspot.com/-Yofmy0GpcY0/TtLyWnIr0jI/AAAAAAAABYQ/di5O82hzbrA/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
  background-image:url(http://2.bp.blogspot.com/-2OSziw4y00Y/TtLybmgNpbI/AAAAAAAABZA/CfXysrknh5k/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
  background-image:url(http://4.bp.blogspot.com/-PafE8z-wPaE/TtLya7QCLRI/AAAAAAAABY0/2ggfAcDdL4c/s1600/search.png);
}
ul#navigation li:nth-child(4) a {
  background-image:url(http://4.bp.blogspot.com/-70Y4BlTmU2k/TtLyY5xd4wI/AAAAAAAABYo/3f2DFCIXHSY/s1600/photo_camera.png);
}
ul#navigation li:nth-child(5) a {
  background-image:url(http://3.bp.blogspot.com/-5gyngAu_azs/TtLyaHMRCpI/AAAAAAAABYs/njvXEAaM4AM/s1600/rss_feed.png);
}
ul#navigation li:nth-child(6) a {
  background-image:url(http://1.bp.blogspot.com/-B6GMO8E3wCQ/TtLyXVvr9lI/AAAAAAAABYY/s5EbibQXFGE/s1600/ipod.png);
}
ul#navigation li:nth-child(7) a {
  background-image:url(http://3.bp.blogspot.com/-m9LeNCW7A4s/TtLyYIsDygI/AAAAAAAABYc/TBmNRPoQZ3s/s1600/mail.png);
}

@-webkit-keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

@-moz-keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

@-ms-keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

@keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

</style>

<ul id='navigation'>
     <li><a href='#'>Home</a></li>
     <li><a href='#'>About</a></li>
     <li><a href='#'>Search</a></li>
     <li><a href='#'>Photos</a></li>
     <li><a href='#'>Rss Feed</a></li>
     <li><a href='#'>Podcasts</a></li>
     <li><a href='#'>Contact</a></li>
</ul>

Untuk kode terakhir tampilannya akan sedikit berbeda !!!

Baca Selengkapnya...

Dropdown Navigasi Sederhana dengan JQuery

Contoh Gambar

Satu lagi penerapan prinsip kerja slide panel (baca tutorialnya di sini). Di sini kita lebih memfokuskan kepada penerapan <ul> sebagai objek terpicu, sementara <img> sebagai pemicunya.

Untuk membuatnya, pertama-tama pastikan bahwa blogmu sudah memiliki salah satu dari script ini:

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

Jika sudah ketemu, kita langsung masuk ke langkah dua (jika tidak ketemu, salinlah kode tersebut dan letakkan di atas </head>).

Berikutnya salin kode ini, kemudian letakkan di bawah kode tadi:

<script type="text/javascript">
    $(document).ready(function() {
        $('ul.menu_awak li:even').addClass("alt");
        $('.menu_ndhas').click(function () {
            $('ul.menu_awak').slideToggle('normal');
        });
        $('ul.menu_awak li a').mouseover(function() {
            $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
        });
        $('ul.menu_awak li a').mouseout(function() {
            $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
        });
    });
</script>

Lalu letakkan kode pemodel ini di atas </style> atau ]]></b:skin>:

.menu_ndhas           {border:1px solid #998675;}
.menu_awak            {display:none;width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;margin:0px 0px;padding:0px 0px;}
.menu_awak li         {background:#493e3b;list-style:none;margin:0px 0px;padding:0px 0px;}
.menu_awak li.alt     {background:#362f2d;}
.menu_awak li a       {color:#FFFFFF;text-decoration:none;padding:10px; display:block;}
.menu_awak li a:hover {padding:15px 10px;font-weight:bold;}

Nah, sekarang kita tinggal menempatkan kerangkanya saja di tempat yang kamu inginkan:

<img class='menu_ndhas' height='32' src='http://1.bp.blogspot.com/-v1gLRs4wDq4/ThJzVsSsbaI/AAAAAAAAAWM/cVxrI8haoOg/s1600/navigate.png' width='184' />
<ul class='menu_awak'>
    <li><a href='#'>Andai</a></li>
    <li><a href='#'>Saja</a></li>
    <li><a href='#'>Engkau</a></li>
    <li><a href='#'>Tahu</a></li>
    <li><a href='#'>Bahwa</a></li>
    <li><a href='#'>Aku</a></li>
    <li><a href='#'>Sangat</a></li>
    <li><a href='#'>Mencintaimu</a></li>
</ul>

Klik Simpan Template dan lihat hasilnya.

Pemahaman Lebih Lanjut:

Perhatikan baris kode ini:

<script type="text/javascript">
    $(document).ready(function() {
        $('ul.menu_awak li:even').addClass("alt");
        $('.menu_ndhas').click(function() {
            $('ul.menu_awak').slideToggle('normal');
        });
        $('ul.menu_awak li a').mouseover(function() {
            $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
        });
        $('ul.menu_awak li a').mouseout(function() {
            $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
        });
    });
</script>

Kita telah tahu bahwa kode $('ul.menu_awak').slideToggle('normal'); telah kita temui dalam pembuatan slide panel.
Kode ... .animate({ fontSize: "14px", paddingLeft: "20px" }, 50 ); ...}); juga telah kita temui dalam pembuatan efek hover gambar artistik dengan JQuery. Hanya saja, untuk tutorial ini, properti yang dianimasikan bukan lagi opacity, melainkan font-size dan padding-leftnya.
Yang Saya agak bingung, kode fontSize dan paddingLeft tidak lagi menggunakan dash (-) sebagai pemisah seperti halnya dalam CSS.
Sedangkan kode $('ul.menu_awak li:even').addClass("alt"); digunakan untuk membuat efek list berwarna selang-seling secara otomatis.
Dan ini adalah gambar yang kamu perlukan untuk praktek kita:

Atau Sobat juga bisa langsung menerapkannya di elemen laman html/javascript dengan meletakkan kode dibawah ini :

Baca Selengkapnya...

Menu Vertikal Animasi Zero Image

Setelah Menu Horizontal Animasi Zero Image, berikut ini adalah yang Vertikalnya; yaitu Menu Vertikal Animasi Zero Image. Contoh Previewnya :

Sama Seperti Langkah membuat Menu Horizontal Animasi Zero Image untuk mengkopi dulu JQuery dan paket easing (ada di cara Membuat Menu Horizontal Zero Image). Untuk selanjutnya silahkan kopi script dibawah ini di elemen laman html/javascript :

<script type='text/javascript'>
$(document).ready(function() {
    $('div.koko li em').hide();
    $('div.koko ul li a').hover(function() {
        $('em', this).stop(true, true).slideDown(700, "easeOutSine");
        if ($(this).is(':animated')) {
            $(this).stop().animate({height:"250px"}, {duration:450, easing:"easeOutQuad"});
        } else {
            $(this).stop().animate({height:"250px"}, {duration:400, easing:"easeOutQuad"});
        }
    }, function() {
        $('em', this).stop(true, true).slideUp(200, "easeOutSine");
        if ($(this).is(':animated')) {
            $(this).stop().animate({height:"30px"}, {duration:400, easing:"easeInOutQuad"})
        } else {
            $(this).stop(':animated').animate({height:"30px"}, {duration:450, easing:"easeInOutQuad"});
        }
    });
});
</script>

<style type="text/css">
.koko {
height:auto;
width:auto;
font:italic 16px Times,serif;
border:2px solid #e6e6e6;
padding:0 0;
margin:0 0 10px;
color:#fff;
text-decoration:none;
-webkit-box-shadow:0 1px 5px #000;
-moz-box-shadow:0 1px 5px #000;
box-shadow:0 1px 5px #000;
overflow:hidden;
}

.koko ul {
height:auto;
background-color:#622;
margin:0 0;
padding:0 0;
}
.koko li {
text-align:left;
list-style:none;
margin:0 0;
padding:0 0;
color:#fff;
text-align:left;
display:block;
}

.koko li a {
height:30px;
width:auto;
line-height:normal;
background-color:#333;
border-top:2px solid #3c3c3c;
padding:5px 7px;
margin:0 0;
color:#fff;
text-decoration:none;
font-weight:bold;
text-shadow:1px 1px 2px #000;
-webkit-box-shadow:0 0 3px #000, 0 0 20px #000;
-moz-box-shadow:0 0 3px #000, 0 0 20px #000;
box-shadow:0 0 3px #000, 0 0 20px #000;
overflow:hidden;
outline:none;
display:block;
}

.koko li.akhir a {
background-color:#622;
min-height:250px;
border-color:#633;
}

.koko li a:focus       {background-color:#888;border-color:#777;}
.koko li.akhir a:focus {background-color:#822;border-color:#633;}

.koko li a em {
position:relative;
clear:both;
width:auto;
height:200px;
background-color:#222;
font-style:italic !important;
line-height:normal;
font:normal 15px Times,sans-serif;
color:#999;
padding:5px 5px;
margin:15px 0 0 0;
text-align:center;
overflow:hidden;
display:block;
}
</style>

<div class='koko'>
     <ul>
          <li><a href='#'>HTML
                    <em><center>
<script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&up_grows=10&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&synd=open&w=auto&h=auto&title=Post-Code%3A+code+converter&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script></center></em>
               </a>
          </li>
          <li><a href='#'>Profil
                    <em>Deskripsi2</em>
               </a>
          </li>
          <li><a href='#'>Jurnal
                    <em>Deskripsi3</em>
               </a>
          </li>
          <li><a href='#'>Komentar
                    <em>Deskripsi4</em>
               </a>
          </li>
          <li><a href='#'>Sunting
                    <em>Deskripsi5</em>
               </a>
          </li>
          <li><a href='#'>Arsip
                    <em>Deskripsi6</em>
               </a>
          </li>
          <li><a href='#'>Feed
                    <em>Deskripsi7</em>
               </a></li>
          <li><a href='#'>Kontak
                    <em>Deskripsi8</em>
               </a>
          </li>
          <li><a href='#'>Pengunjung
                    <em>Deskripsi9</em>
               </a>
          </li>
          <li class="akhir"><a href='#'>Beranda
                    <em>Deskripsi10</em>
               </a>
          </li>
     </ul>
</div>

Selamat Mencoba!!!

Baca Selengkapnya...

Menu Horizontal Animasi Zero Image

Untuk membuat seperti dibawah ini

ZIPUP (Zero Image - Pilled Up), adalah menu navigasi JQuery dengan model bertumpuk sebagai ciri khasnya. Menu ini sama sekali tidak menggunakan background image sebagai latar belakangnya. Semuanya murni menggunakan CSS3. Salah satu keistimewaan menu ini adalah kemampuannya di dalam menampilkan deskripsi menu layaknya tooltip untuk memastikan bahwa para pengunjung tidak akan tersesat saat hendak menuju ke sebuah halaman melalui menu tersebut. Dua buah tipe yang Saya buat ini sebenarnya terinspirasi dari model JQuery Image Menu. Mengingat keleluasaan modifikasinya yang terbatas, Saya membuat model menu ini untuk mengatasi beberapa masalah itu. Saya hanya mengambil fungsi efek dan mengedit CSSnya saja:

Untuk membuatnya Anda tinggal memilih salah satu, apakah memilih tipe vertikal atau horizontal. Namun sebelum itu Anda harus memanggil JQuery dan paket easing sebagai langkah pertama:

Langkah Pertama Masuk ke Edit Template HTML, copy kan : Script Jquery dibawah ini diatas </head> atau dibawah <head>:

Kemudian Masuk ke Elemen Laman add Gadget html/javascript
Kopas Script dibawah ini

<script type='text/javascript'>
$(document).ready(function() {
    $('div.tovikh ul li a').hover(function() {
        $('em', this).stop(true, true).slideDown(500, "easeOutQuint");
        if ($(this).is(':animated')) {
            $(this).stop().animate({width:"250px"}, {duration:450, easing:"easeOutQuad"});
        } else {
            $(this).stop().animate({width:"250px"}, {duration:400, easing:"easeOutQuad"});
        }
    }, function() {
        $('em', this).stop(true, true).slideUp(100, "easeOutQuint");
        if ($(this).is(':animated')) {
            $(this).stop().animate({width:"30px"}, {duration:400, easing:"easeInOutQuad"})
        } else {
            $(this).stop(':animated').animate({width:"30px"}, {duration:450, easing:"easeInOutQuad"});
        }
    });
});
</script>

<style type="text/css">
.tovikh {
width:100%;
height:30px;
font:italic 16px Times,serif;
border:2px solid #e6e6e6;
padding:0 0;
margin:10px 5px 25px;
color:#fff;
text-decoration:none;
-webkit-box-shadow:0 1px 5px #000;
-moz-box-shadow:0 1px 5px #000;
box-shadow:0 1px 5px #000;
overflow:hidden;
}

.tovikh ul {
width:2500px;
background-color:#622;
margin:0 0;
padding:0 0;
overflow:hidden;
}

.tovikh li {
text-align:left;
list-style:none;
margin:0 0;
padding:0 0;
display:inline;
float:left;
}
.tovikh li a {
width:30px;
height:40px;
line-height:normal;
background-color:#333;
border-left:2px solid #3c3c3c;
padding:5px 7px;
margin:0 0;
color:#fff;
text-decoration:none;
font-weight:bold;
text-shadow:1px 1px 2px #000;
-webkit-box-shadow:-2px 0 3px #000,-5px 0 20px #000;
-moz-box-shadow:-2px 0 3px #000,-5px 0 20px #000;
box-shadow:-2px 0 3px #000,-5px 0 20px #000;
overflow:hidden;
outline:none;
display:block;
}

.tovikh li.akhir a {
background-color:#622;
min-width:250px;
border-color:#633;
overflow:hidden;
text-align:left;
display:block;
}

.tovikh li a:focus       {background-color:#888;border-color:#777;}
.tovikh li.akhir a:focus {background-color:#822;border-color:#633;}

.tovikh li a em {
position:fixed !important;
position:absolute;
top:0px;
right:0px;
bottom:auto;
left:0px;
background-color:#aa9900;
border-bottom:2px solid #aa8800;
font-style:italic !important;
line-height:normal;
font:normal 30px Arial,sans-serif;
color:#fff;
padding:15px 10px 7px;
margin:0 0;
text-align:left;
overflow:hidden;
-webkit-box-shadow:0 1px 5px #000;
-moz-box-shadow:0 1px 5px #000;
box-shadow:0 1px 5px #000;
display:none;
}
</style>

<div class='tovikh'>
     <ul>
          <li><a href='#'>Mitra
                    <em>Deskripsi1</em>
               </a>
          </li>
          <li><a href='#'>Profil
                    <em>Deskripsi2</em>
               </a>
          </li>
          <li><a href='#'>Jurnal
                    <em>Deskripsi3</em>
               </a>
          </li>
          <li><a href='#'>Komentar
                    <em>Deskripsi4</em>
               </a>
          </li>
          <li><a href='#'>Sunting
                    <em>Deskripsi5</em>
               </a>
          </li>
          <li><a href='#'>Arsip
                    <em>Deskripsi6</em>
               </a>
          </li>
          <li><a href='#'>Feed
                    <em>Deskripsi7</em>
               </a></li>
          <li><a href='#'>Kontak
                    <em>Deskripsi8</em>
               </a>
          </li>
          <li><a href='#'>Pengunjung
                    <em>Deskripsi9</em>
               </a>
          </li>
          <li class="akhir"><a href='#'>Beranda
                    <em>Deskripsi10</em>
               </a>
          </li>
     </ul>
</div>