jQuery melaksanakan menu navigasi mudah effect

jQuery melaksanakan menu navigasi mudah effect_jquery

WBOY

Lepaskan： 2016-05-16 15:30:42

asal

1146 orang telah melayarinya

Contoh dalam artikel ini menerangkan kod menu regangan dan pengecutan yang dilaksanakan dalam JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Tangkapan skrin kesan berjalan adalah seperti berikut:

Apabila tetikus melayang, item menu bergerak ke atas ke dalam teks putih pada latar belakang biru Selepas mengklik, bar biru akan muncul di bahagian bawah untuk menunjukkan item yang sedang dipilih.

Kod halaman, setiap item menu ialah div, termasuk ul untuk meletakkan teks paparan, dsb., dan div lain ialah bar biru di bahagian bawah kelas yang berbeza perlu ditetapkan untuk yang pertama dan terakhir item. , gaya perlu menggunakan:

<div id="nav">
　　<div class="navItem indexNavItem">
　　　　<ul class="navUl">
　　　　　　<li>首页</li>
　　　　　　<li class="hoverLi">首页</li>
　　　　</ul>
　　　　<div class="highlighter selectedNav"></div>
　　</div>
　　<div class="navItem">
　　　　<ul class="navUl">
　　　　　　<li>A</li>
　　　　　　<li class="hoverLi">A</li>
  </ul>
　　　　<div class="highlighter"></div>
　　</div>
　　<div class="navItem lastNavItem">
　　　　<ul class="navUl">
　　　　　　<li>A</li>
　　　　　　<li class="hoverLi">A</li>
　　　　</ul>
　　　　<div class="highlighter"></div>
　　</div>
　　<div id="logoutNavItem" class="navItem logoutNavItem lastNavItem">
　　　　<ul class="navUl">
　　　　　　<li>退出</li>
　　　　　　<li class="hoverLi">退出</li>
　　　　</ul>
　　　　<div class="highlighter"></div> 
　　</div>
</div>

Salin selepas log masuk

Gaya, terutamanya tetapan sempadan kiri dan kanan setiap item menu dan tetapan kedudukan ul dan li:

*
{
 padding: 0;
 margin: 0;
}
body
{
 background-color: #fffff3;
 font: 12px/1.6em Helvetica, Arial, sans-serif;
}
ul,li{
 list-style: none;
}
#nav
{
 text-align: center;
 height: 50px;
 font-size: 10px;
 line-height: 30px;
 background-color: #F0E6DB;
 margin-bottom: 10px;
}
.navItem
{
 cursor: pointer;
 position: relative;
 float: left;
 width: 100px;
 height: 50px;
 font-size: 15px;
 border-right: 2px solid rgb(255,255,255);
 border-left: 2px solid rgb(255,255,255);
 overflow: hidden;
 font-weight:bold;
}
.indexNavItem
{
 border-left: 4px solid rgb(255,255,255);
 margin-left: 10px;
}
.lastNavItem
{
 border-right: 4px solid rgb(255,255,255);
}
.logoutNavItem
{
 float: right;
 width: 120px;
 margin-right: 10px;
 border-left: 4px solid rgb(255,255,255);
}
.navUl
{
 position: relative;
 height: 100px;
 width: 100%;
 border-bottom: 5px solid rgb(2,159,212);
}
.navUl li
{
 height: 50px;
 line-height: 50px;
}
.highlighter
{
 position: absolute;
 bottom: 0;
 height: 5px;
 width: 100%;
}
.selectedNav
{
 background-color: #029FD4;
}
.hoverLi
{
 background-color: #029FD4;
 color: #ffffff;
}

Salin selepas log masuk

Langkah seterusnya ialah menulis kod js untuk hover dan klik acara untuk menu Apabila melayang, gerakkan ul ke ketinggian li, dan kemudian pulihkannya selepas tetikus dialihkan. cuma tambah gaya pada div bar biru:

$(function() {
 $(".navItem").hover(function() {
  $(this).children("ul").animate({
   top: "-50px"
  }, 100);
 }, function() {
  $(this).children("ul").animate({
   top: "0px"
  }, 100);
 });
 
 $(".navItem").click(function(event) {
  $(this).siblings().children('.highlighter').removeClass('selectedNav');
  $(this).children('.highlighter').addClass('selectedNav');
 });
})

Salin selepas log masuk

Di atas ialah kod utama untuk jQuery untuk mencapai kesan menu navigasi yang mudah saya harap ia akan membantu pembelajaran semua orang.