cari

Rumah  >  Artikel  >  hujung hadapan web  >  Kesan menu web pelbagai peringkat susun atur mendatar dilaksanakan oleh jquery CSS

Kesan menu web pelbagai peringkat susun atur mendatar dilaksanakan oleh jquery CSS

PHPz
PHPzke hadapan
2016-05-16 15:43:181149semak imbas

Artikel ini terutamanya memperkenalkan kesan menu web berbilang peringkat reka letak mendatar yang dilaksanakan oleh jquery CSS, dan melibatkan teknik pelaksanaan kesan transformasi dinamik atribut elemen halaman jquery. Rakan yang memerlukan boleh merujuknya . Butirannya adalah seperti berikut:

Menu navigasi biasa pada halaman web yang dilaksanakan oleh Jquery dan CSS yang ditunjukkan di sini menyokong dua tahap bentuk, gaya biru, dan menyokong sehingga tahap dua untuk tahap tiga. Menu ini agak segi empat tepat, agak praktikal, dan sesuai untuk pelbagai jenis laman web saya harap anda akan menyukainya.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kesan menu web pelbagai peringkat susun atur mendatar dilaksanakan oleh jquery CSS

Alamat demo dalam talian adalah seperti berikut:

http: //demo.jb51.net/ js/2015/jquery-css-scroll-nav-menu-style-codes/

Kod khusus adalah seperti berikut: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>蓝色带阴影超酷的css+js导航菜单代码</title>
<style>
body {margin:0px;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
#nav_wrap {width:960px;}
#nav{background:url(images/nav_bg1.gif) repeat-x bottom; height:49px; position:relative; width:950px; margin:20px auto;}
#nav .l{background:url(images/nav_l1.gif) no-repeat bottom; height:49px; width:28px; float:left}
#nav li {float:left; list-style:none;text-align:center;font-size:14px; }
#nav li .v a{width:108px;height:49px; line-height:49px; display:block; color:#FFF;float:left; font-family:Arial,Verdana,Tahoma,"宋体"; }
#nav li .v a:hover,#nav li .v .sele{background:url(images/nav_hover1.gif) no-repeat bottom;color:#fff;height:49px;line-height:49px; font-size:14px;}
#nav .kind_menu {height:30px;*height:29px;line-height:30px;vertical-align:middle; position:absolute;top:46px;*top:48px;left:70px;width:880px; text-align:left; display:none;color:#000;font-size:12px;}
#nav .kind_menu a {color:#000; float:left; text-align:center; width:90px; font-family:Arial,Verdana,Tahoma,"宋体";font-size:12px;}
#nav .kind_menu a:hover {color:#000;border-bottom:2px #222b8e solid;}
#nav .kind_menu span {font-size:10px; color:#000; line-height:30px; *line-height:26px; float:left }
</style>
<SCRIPT src="jquery-1.6.2.min.js" type=text/javascript></SCRIPT>
</head>
<body style="text-align:center">
<p id=nav_wrap>
<p id=nav>
<p class=l></p>
<UL class=c>
 <LI><SPAN class=v><A href="#" target="_blank">首页</A></SPAN>
 <p class=kind_menu style="LEFT:50px">欢迎您访问脚本之家,我们为您提供最优质的网络营销服务! </p></LI>
 <LI><SPAN class=v><A href="#">特惠套餐</A></SPAN>
 <p class=kind_menu style="LEFT: 40px">
 <A href="#">电信特惠套餐</A> <SPAN>|</SPAN>
 <A href="#">智能双线套餐</A> </p></LI>
 <LI><SPAN class=v><A href="#">域名频道</A></SPAN>
 <p class=kind_menu>
 <A href="#">英文域名</A><SPAN>|</SPAN>
 <A href="#">中文域名</A><SPAN>|</SPAN>
 <A href="#">通用网址</A><SPAN>|</SPAN>
 <A href="#">域名交易</A><SPAN>|</SPAN>
 <A href="#">域名帮助</A><SPAN>|</SPAN>
 <A href="#">智能加速</A> </p></LI>
 <LI><SPAN class=v><A href="#">脚本下载</A></SPAN>
 <p class=kind_menu style="LEFT: 40px">
 <A href="#">网络营销外包</A> <SPAN>|</SPAN>
 <A href="#">网页特效代码</A> </p></LI>
 <LI><SPAN class=v><A href="#">网页特效</A></SPAN>
 <p class=kind_menu style="LEFT: 40px">
 <A href="#">网络外包</A> <SPAN>|</SPAN>
 <A href="#">网络营销</A> <SPAN>|</SPAN>
 <A href="#">特效代码</A> </p></LI>
 <LI><SPAN class=v><A href="http://www.baidu.com">百度一下</A></SPAN>
 <p class=kind_menu style="LEFT: 40px">
 <A href="#">网络外包</A> <SPAN>|</SPAN>
 <A href="#">营销外包</A> <SPAN>|</SPAN>
 <A href="#">网页特效</A> </p></LI>
 </UL>
</p><!--nav-->
</p><!--nav_wrap-->
<SCRIPT type=text/javascript>
 var site_url = window.location.href.toLowerCase();
 switch (true) {
  default :
   $("#nav li").attr("class","");
   $("#nav li").eq(0).attr("class","nav_lishw");
   $(".nav_lishw .v a").attr("class","sele");
   $(".nav_lishw .kind_menu").show();
 }
 $("#nav li").hover(
  function(){
   clearTimeout(setTimeout("0")-1);
   $("#nav .kind_menu").hide();
   $("#nav li .v .sele").attr("class","shutAhover");
   $(this).attr("id","nav_hover")
   $("#nav_hover .v a").attr("class","sele");
   $("#nav_hover .kind_menu").show();
  },
  function(){
   if($(this).attr("class") != "nav_lishw"){
    $("#nav_hover .v .sele").attr("class","");
    $("#nav_hover .kind_menu").hide();
   }
   $(this).attr("id","")
   $("#nav li .v .shutAhover").attr("class","sele");
   setTimeout(function(){
    $(".nav_lishw .kind_menu").show();
    $(".nav_lishw .v a").attr("class","sele");
   },50);
  }
 );
</SCRIPT>
</body>
</html>

Di atas adalah keseluruhan kandungan bab ini, lebih berkaitan Untuk tutorial, sila lawati Tutorial Video jQuery!

Kenyataan：
Artikel ini dikembalikan pada:jb51.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Kesan pensuisan tab navigasi sisi Tmall yang dilaksanakan oleh jquery_jqueryArtikel seterusnya：Kesan pensuisan tab navigasi sisi Tmall yang dilaksanakan oleh jquery_jquery

Artikel berkaitan

Lihat lagi