Membuat Sajian Navigasi Dengan Dampak Hover Menggulung

Published by Concept Phone Senin, 23 Juli 2018

Sebelum menciptakan sajian ini, Saya beri gambarannya terlebih dahulu:

Lihat Demo

Untuk membuatnya, pertama-tama masuklah ke Tab Rancangan kemudian pilih Edit HTML. Lalu cari script yang tampak ibarat 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 tersebut, kita dapat pribadi melanjutkan ke langkah berikutnya. Tapi jikalau belum ada, salin dulu script tersebut kemudian letakkan di atas arahan </head>

Setelah itu salin script ini, kemudian letakkan sempurna di bawah script tadi:

<script type="text/javascript"> //<![CDATA[  $(document).ready(function() {      $("#topnav li").prepend("<span></span>");      $("#topnav li").each(function() {          var linkText = $(this).find("a").html();          $(this).find("span").show().html(linkText);      });      $("#topnav li").hover(function() {          $(this).find("span").stop().animate({              marginTop: "-40"}, 250);},      function() {          $(this).find("span").stop().animate({              marginTop: "0"}, 250);      });  }); //]]> </script>

Jika sudah, kini kita masuk ke tahap pemodelan. Salin arahan CSS ini, kemudian letakkan di atas arahan ]]></b:skin> atau </style>:

ul#topnav {    margin:30px;    padding:0;    list-style-type:none;    float:left;    font-size:1em;  }   ul#topnav li {    margin:0;    padding:0;    overflow:hidden;    float:left;    height:40px;  }   ul#topnav a, ul#topnav span {    padding:10px 20px;    float:left;    text-decoration:none;    color:#fff;    background:transparent url(http://2.bp.blogspot.com/-PUd9Qj1OKtE/ThKinZljN6I/AAAAAAAAAW0/i00P00dOdnI/s1600/a_bg.gif) repeat-x;    text-transform:uppercase;    clear:both;    width:100%;    height:20px;    line-height:20px;  }   ul#topnav a {    color:#555;    background-position:left bottom;  }   ul#topnav span {    background-position:left top;  }

Terakhir, kita hanya tinggal meletakkan kerangka objeknya. Salin arahan di bawah ini kemudian letakkan di kawasan dimana kau menginginkan sajian navigasi ini ditampilkan:

<ul id='topnav'>      <li><a href='#'>Beranda</a></li>      <li><a href='#'>Profil</a></li>      <li><a href='#'>Portfolio</a></li>      <li><a href='#'>Komentar</a></li>      <li><a href='#'>Kontak</a></li>      <li><a href='#'>Bantuan</a></li>  </ul>

Pelajari wacana beberapa alternatif peletakkan sajian navigasi di sini »
Simpan templatemu.

Sumber: hatetepe://wewewe.sohtanaka.com

Sumber https://www.dte.web.id/