近期有几位客户购买了“天兴模板工作室自用模板”后自行修改时发现了一个问题。

jquery实现的点击二级下拉导航菜单,jquery下拉导航菜单

jquery实现的点击二级下拉导航菜单:
二级下拉导航菜单是各种类型的网站都有使用,所以是一个必须掌握的技能,对于老手来说肯定是轻松加愉快,但是对于初学者来说未必如此,下面就通过代码实例详细介绍一下点击二级下拉菜单实现过程。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
  margin:0px auto;
  padding:0px;
  text-align:center;
}
ul{list-style:none;}
ul li{
  height:25px;
  line-height:25px;
}
.menu{
  display:none;
  width:100px;
  border:1px solid gray;
  background:#00FFFF;
}
.dlHover{
  position:absolute;
  z-index:9999;
  display:block;
}
.box{
  border:1px solid gray;
  width:100px;
  background-color:#999999;
  font-size:12px;
}
.bg{background-color:#1F9999;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $(".box").click(function(){ 
    $(".menu").addClass("dlHover"); 
  }); 
  $(".box").hover(function(){
    $(this).addClass("bg"); 
  },function(){
    $(this).removeClass("bg"); 
    $(".menu").removeClass("dlHover"); 
  }); 
}); 
</script>
</head>
<body>
<div class="box"> 
  蚂蚁部落
  <div class="menu">
    <ul>
      <li><a href="#">css教程</a></li>
      <li><a href="#">正则表达式</a></li>
    </ul>
  </div>
</div>
</body>
</html>

上面的代码实现了简单的点击二级下拉菜单效果,下面介绍一下它的实现过程。
一.代码注释:
1.$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
2.$(“.box”).click(function(){$(“.menu”).addClass(“dlHover”);}),为class属性值为box的元素注册click事件处理函数,当点击此元素的时候,会为二级下拉菜单添加class类,也就是讲二级下拉菜单设置为可见。
3.$(“.box”).hover(),为box元素注册hover事件处理函数,也就是规定当鼠标移入和离开的时候执行的函数。
4.function(){$(this).addClass(“bg”);},当鼠标悬浮的时候,添加bg
class类。
5.function(){$(this).removeClass(“bg”);$(“.menu”).removeClass(“dlHover”);}),当鼠标离开的时候,会删除bg和dlHover
class类。
二.相关阅读:
1.addClass()函数可以参阅jQuery的addClass()方法一章节。
2.hover事件可以参阅jQuery的hover事件一章节。
3.removeClass()函数可以参阅jQuery的removeClass()方法一章节。  

原文地址是:

更多内容可以参阅:

jquery实现的点击二级下拉导航菜单:
二级下拉导航菜单是各种类型的网站都有使用,…

<html>

基于div css下拉导航菜单分类代码,divcss下拉导航菜单

基于div
css下拉导航菜单分类代码是一款绿色风格的jQuery下拉分类导航菜单。效果图如下:

图片 1

在线预览    源码下载

实现的代码。

html代码:

<div class="hc_lnav jslist">
       <div class="allbtn">
           <h2><a href="#"><strong>&nbsp;</strong>全部商品分类<i>&nbsp;</i></a></h2>
           <ul style="width:190px" class="jspop box">
               <li class=a1>
                   <div class=tx><a href="#"><i>&nbsp;</i>各地名优茶</a> </div>
                   <dl>
                       <dt>热门</dt>
                       <dd>
                           <a href="#">西湖龙井</a>
                           <a href="#">金骏眉</a>
                           <a href="#">大红袍</a>
                           <a href="#">铁观音</a>
                       </dd>
                   </dl>
                   <dl>
                       <dt>名茶</dt>
                       <dd>
                           <a href="#">红茶</a>
                           <a href="#">绿茶</a>
                           <a href="#">乌龙茶</a>
                           <a href="#">黑茶</a>
                           <a href="#">白茶 </a>
                       </dd>
                   </dl>
                   <div class=pop>
                       <h3><a href="#">各地名优茶</a></h3>
                       <dl>
                           <dl>
                               <dt>绿茶</dt>
                               <dd>
                                   <a class="ui-link" href="#">西湖龙井</a>
                                   <a class="ui-link" href="#">龙井</a>
                                   <a class="ui-link" href="#">黄山毛峰</a>
                                   <a class="ui-link" href="#">安吉白茶</a>
                                   <a class="ui-link" href="#">其他绿茶</a>
                               </dd>
                           </dl>
                           <dl>
                               <dt>乌龙茶</dt>
                               <dd>
                                   <a class="ui-link" href="">铁观音</a>
                                   <a class="ui-link" href="">大红袍</a>
                                   <a class="ui-link" href="">水仙</a>
                                   <a class="ui-link" href="">肉桂</a>
                                   <a class="ui-link" href="">台湾乌龙</a>
                                   <a class="ui-link" href="">其他乌龙茶</a>
                               </dd>
                           </dl>
                           <dl>
                               <dt>红茶</dt>
                               <dd>
                                   <a class="ui-link" href="">金骏眉</a>
                                   <a class="ui-link" href="">正山小种</a>
                                   <a class="ui-link" href="">祁门红茶</a>
                                   <a class="ui-link" href="">坦洋工夫</a>
                                   <a class="ui-link" href="javascript:;">其他红茶</a>
                                   <a class="un ui-link" href="">政和工夫</a>
                                   <a class="ui-link" href="">滇红工夫</a>
                               </dd>
                           </dl>
                           <dl>
                               <dt>黑茶</dt>
                               <dd>
                                   <a class="ui-link" href="">白沙溪黑茶</a>
                                   <a class="ui-link" href="">普洱茶饼</a>
                                   <a class="ui-link" href="">普洱沱茶</a>
                                   <a class="ui-link" href="">普洱茶砖</a>
                                   <a class="ui-link" href="">普洱散茶</a>
                                   <a class="ui-link" href="">其他黑茶</a>
                               </dd>
                           </dl>
                           <dl>
                               <dt>白茶</dt>
                               <dd>
                                   <a class="ui-link" href="#">白牡丹</a>
                                   <a class="ui-link" href="">白毫银针</a>
                                   <a class="ui-link" href="">寿眉</a>
                                   <a class="ui-link" href="">其他白茶</a>
                               </dd>
                           </dl>
                       </dl>
                       <dl>
                           <dt>品牌</dt>
                           <dd>
                               <a href="">滋恩</a>
                               <a href="">远荣</a>
                               <a href="">顶峰</a>
                               <a href="">公泰</a>
                               <a href="">一品堂</a>
                               <a href="">好吉</a>
                               <a href="">绿雪芽</a>
                               <a href="">台湾梅山制茶</a>
                               <a href="">白沙溪</a>
                               <a href="">联兴茶叶</a>
                           </dd>
                       </dl>
                       <dl>
                           <dt>价格</dt>
                           <dd>
                               <a href="">100元及以下</a>
                               <a href="">100-300元</a>
                               <a href="">300元及以上</a>
                           </dd>
                       </dl>
                       <dl>
                           <dt>净含量</dt>
                           <dd>
                               <a href="">50g及以下</a>
                               <a href="">51-100g</a>
                               <a href="">101-250g</a>
                               <a href="">250g以上</a>
                           </dd>
                       </dl>
                       <dl>
                           <dt>包装</dt>
                           <dd>
                               <a href="">经济自饮装</a>
                               <a href="">精美礼品装</a>
                           </dd>
                       </dl>
                       <div class=clr></div>
                       <div class=act><a href=""><img src="images/20150518092317.jpg" /></a> </div>
                   </div>
               </li>
               <li class=a2>
                   <div class=tx><a href=""><i>&nbsp;</i>花草保健茶</a> </div>
                   <dl>
                       <dt>推荐</dt>
                       <dd>
                           <a href="">大麦茶</a>
                           <a href="">苦荞茶</a>
                           <a href="">玫瑰花茶</a>
                           <a href="">雪菊</a>
                           <a href="">蜂蜜木瓜粉</a>
                       </dd>
                   </dl>
                   <div class=pop>
                       <h3><a href="">花草保健茶</a></h3>
                       <dl>
                           <dl>
                               <dt>瘦身</dt>
                               <dd>
                                   <a class="ui-link" href="">玫瑰荷叶茶</a>
                                   <a class="ui-link" href="">玄米茶</a>
                                   <a class="ui-link" href="">兰香子</a>
                                   <a class="ui-link" href="">纤维泡腾片</a>
                                   <a class="ui-link" href="">青梅苹果酸</a>
                                   <a class="ui-link" href="">三草茶</a>
                               </dd>
                           </dl>
                           <dl>
                               <dt>美容</dt>
                               <dd>
                                   <a class="ui-link" href="">法兰西玫瑰</a>
                                   <a class="ui-link" href="">冻干柠檬片</a>
                                   <a class="un ui-link" href="">果粒茶</a>
                                   <a class="ui-link" href="">大麦茶</a>
                                   <a class="ui-link" href="">蜂蜜抹茶粉</a>
                               </dd>
                           </dl>
                           <dl>
                               <dt>丰胸</dt>
                               <dd>
                                   <a class="ui-link" href="">木瓜葛根粉</a>
                                   <a class="ui-link" href="">蜂蜜木瓜粉</a>
                                   <a class="ui-link" href="">红酒木瓜丽人饮</a>
                               </dd>
                           </dl>
                       </dl>
                       <dl>
                           <dt>品牌</dt>
                           <dd>
                               <a href="">与花香</a>
                               <a href="">美丽快攻</a>
                               <a href="">顶峰</a>
                           </dd>
                       </dl>
                       <dl>
                           <dt>价格</dt>
                           <dd>
                               <a href="">100元及以下</a>
                               <a href="">100-300元</a>
                               <a href="">300元及以上</a>
                           </dd>
                       </dl>
                       <dl>
                           <dt>净含量</dt>
                           <dd>
                               <a href="">50g及以下</a>
                               <a href="">51-100g</a>
                               <a href="">101-250g</a>
                               <a href="">250g以上</a>
                           </dd>
                       </dl>
                       <dl>
                           <dt>包装</dt>
                           <dd>
                               <a href="">经济自饮装</a>
                               <a href="">精美礼品装</a>
                           </dd>
                       </dl>
                       <div class=clr></div>
                       <div class=act><a href=""><img src="images/20150518092236.jpg" /></a></div>
                   </div>
               </li>
               <li class=a3>
                   <div class=tx><a href=""><i>&nbsp;</i>精选茶具</a> </div>
                   <dl>
                       <dt>推荐</dt>
                       <dd>
                           <a href="">功夫茶具</a>
                           <a href="">个人杯</a>
                           <a href="">茶宠</a>
                           <a href="">茶叶罐</a>
                       </dd>
                   </dl>
                   <div class=pop>
                       <h3><a href="">精选茶具</a></h3>
                       <dl>
                           <dl>
                               <dt>陶瓷</dt>
                               <dd>
                                   <a class="ui-link" href="">茶叶罐</a>
                                   <a class="ui-link" href="">功夫茶具</a>
                                   <a class="ui-link" href="">茶壶</a>
                                   <a class="ui-link" href="">茶宠</a>
                                   <a class="ui-link" href="">茶杯</a>
                                   <a class="ui-link" href="">茶具礼盒</a>
                               </dd>
                           </dl>
                       </dl>
                       <dl>
                           <dt>品牌</dt>
                           <dd>
                               <a href="">恒越</a>
                               <a href="">卓越</a>
                               <a href="">国尊陶瓷</a>
                               <a href="">宏远达</a>
                               <a href="">福万利</a>
                           </dd>
                       </dl>
                       <dl>
                           <dt>价格</dt>
                           <dd>
                               <a href="">100元及以下</a>
                               <a href="">100-300元</a>
                               <a href="">300元及以上</a>
                           </dd>
                       </dl>
                       <dl>
                           <dt>包装</dt>
                           <dd>
                               <a href="">经济自饮装</a>
                               <a href="">精美礼品装</a>
                           </dd>
                       </dl>
                       <div class=clr></div>
                       <div class=act><a href=""><img src="images/20150518092152.jpg" /></a></div>
                   </div>
               </li>
               <li class=a4>
                   <div class=tx><a href=""><i>&nbsp;</i>可口茶食</a> </div>
                   <dl>
                       <dt>推荐</dt>
                       <dd>
                           <a href="">橄榄</a>
                           <a href="">冰糖杨梅</a>
                           <a href="">酸甜梅</a>
                       </dd>
                   </dl>
                   <div class=pop>
                       <h3><a href="">可口茶食</a></h3>
                       <dl>
                           <dl>
                               <dt>干果</dt>
                               <dd>
                                   <a class="ui-link" href="">杏仁</a>
                                   <a class="ui-link" href="">瓜子</a>
                                   <a class="un ui-link" href="">开心果</a>
                               </dd>
                           </dl>
                           <dl>
                               <dt>零食</dt>
                               <dd>
                                   <a class="ui-link" href="">水晶柠檬片</a>
                                   <a class="ui-link" href="">方块酥</a>
                                   <a class="ui-link" href="javascript:;">凤梨酥</a>
                                   <a class="ui-link" href="">燕麦巧克力</a>
                               </dd>
                           </dl>
                       </dl>
                       <dl>
                           <dt>品牌</dt>
                           <dd>
                               <a href="">赛园</a>
                               <a href="">新味</a>
                           </dd>
                       </dl>
                       <dl>
                           <dt>价格</dt>
                           <dd>
                               <a href="">100元及以下</a>
                               <a href="">100-300元</a>
                               <a href="">300元及以上</a>
                           </dd>
                       </dl>
                       <dl>
                           <dt>净含量</dt>
                           <dd>
                               <a href="">50g及以下</a>
                               <a href="">51-100g</a>
                               <a href="">101-250g</a>
                               <a href="">250g以上</a>
                           </dd>
                       </dl>
                       <dl>
                           <dt>包装</dt>
                           <dd>
                               <a href="">经济自饮装</a>
                               <a href="">精美礼品装</a>
                           </dd>
                       </dl>
                       <div class=clr></div>
                       <div class=act><a href=""><img src="images/20150518092213.jpg" /></a> </div>
                   </div>
               </li>
           </ul>
       </div>
   </div>

via:

css下拉导航菜单分类代码,divcss下拉导航菜单 基于div
css下拉导航菜单分类代码是一款绿色风格的jQuery下拉分类导航菜单。效果图如…

 

<head>

在把这个下拉菜单移到左侧或者直接在左侧加下拉菜单时候发现:下拉菜单被下面的滚动幻灯片给遮住了。

<title></title>

这个问题是由于div的定位造成的,幻灯片由于使用了js的关系使用了很多绝对或者相对定位。解决办法如下:

<meta http-equiv=”Content-Type” content=”text/html;
charset=gb2312″>

在封装幻灯片的div的id属性后面加上一句代码:

 

 代码如下 复制代码
style=”z-index:-999;position:relative;”
 

<script language=”JavaScript”>
<!–
function MM_jumpMenu(targ,selObj,restore){ //v3.0

这句代码定义了这个div块的z轴和相对属性,就可以解决掉下拉菜单被幻灯片遮住的问题了

 
eval(targ+”.location='”+selObj.options[selObj.selectedIndex].value+”‘”);

z-index
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

  if (restore) selObj.selectedIndex=1;

注释:元素可拥有负的 z-index 属性值。

}

注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document;
if((p=n.indexOf(“?”))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for
(i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

 

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if
((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style;
v=(v==’show’)?’visible’:(v==’hide’)?’hidden’:v; }
    obj.visibility=v; }
}
//–>
</script>

附、被Flash挡住

</head>

设置Flash的参数:<param name=”wmode”
value=”opaque”>,设置为透明模式

 

2.<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
codebase=”
width=”468″ height=”60″><param name=”movie”
value=” /pepsi46860.swf”>

<body bgcolor=”#003366″ text=”#FFFFFF” leftmargin=”0″ topmargin=”5″
marginwidth=”0″ marginheight=”0″>

3.<param name=”wmode” value=”opaque”><param name=”quality”
value=”high”><embed src=”/pepsi46860.swf” quality=”high”
pluginspage=”
type=”application/x-shockwave-flash” width=”468″
height=”60″></embed></object>

<div align=”center”>

4.<div
style=”position:absolute;left:150;top:50;width:100px;height:50px;background:green”>

<script language=”JavaScript”>

5.</div>
 

<!–

或者用

<!–

 
<param name=”wmode” value=”transparent”>
1.<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
codebase=”
width=”468″ height=”60″><param name=”movie”
value=” pepsi46860.swf”>

function MM_reloadPage(init) {  //reloads the window if Nav4 resized

2.<param name=”wmode” value=”transparent”><param name=”quality”
value=”high”><embed src=”/pepsi46860.swf” quality=”high”
pluginspage=”
type=”application/x-shockwave-flash” width=”468″
height=”60″></embed></object>

  if (init==true) with (navigator) {if
((appName==”Netscape”)&&(parseInt(appVersion)==4)) {

3.<div
style=”position:absolute;left:150;top:50;width:100px;height:50px;background:green”>

    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}

4.</div>

  else if (innerWidth!=document.MM_pgW ||
innerHeight!=document.MM_pgH) location.reload();

在把这个下拉菜单移到左侧或者直接在左侧加下拉菜单时候…

}

MM_reloadPage(true);

// –>

 

//–>

</script>
<table width=”690″ border=”0″ cellspacing=”0″ cellpadding=”0″>
  <tr align=”center”>
    <td
onMouseOver=”MM_showHideLayers(‘Layer1′,”,’hide’,’Layer2′,”,’hide’,’Layer3′,”,’hide’,’Layer4′,”,’hide’,’Layer5′,”,’hide’,’Layer6′,”,’hide’,’Layer7′,”,’hide’)”><a
href=”index.php” class=”tt”>首页</a></td>
    <td height=”23″ class=”tt” width=”5″>|</td>
    <td align=”center”
onMouseOver=”MM_showHideLayers(‘Layer1′,”,’show’,’Layer2′,”,’hide’,’Layer3′,”,’hide’,’Layer4′,”,’hide’,’Layer5′,”,’hide’,’Layer6′,”,’hide’,’Layer7′,”,’hide’)”><a
href=”aboutus/aboutus.php” class=”tt”>关于民兴</a></td>
    <td height=”23″ class=”tt” width=”5″
align=”center”>|</td>
    <td align=”center”
onMouseOver=”MM_showHideLayers(‘Layer1′,”,’hide’,’Layer2′,”,’show’,’Layer3′,”,’hide’,’Layer4′,”,’hide’,’Layer5′,”,’hide’,’Layer6′,”,’hide’,’Layer7′,”,’hide’)”><a
href=”products/index.php” class=”tt”>产品展示</a></td>
    <td height=”23″ class=”tt” width=”5″
align=”center”>|</td>
    </tr>
  <tr valign=”top”>
    <td height=”15″> </td>
    <td> </td>
    <td><div id=”Layer1″ style=”position:absolute; width:690; 
z-index:1; visibility: hidden; left: 145px; top: 28px;”>
      <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″
class=”tm” >
        <tr bgcolor=”#efefef”>
         
          <td valign=”top”><table width=”690″ border=”0″>
            <tr>
              <td><span class=”bfline”><a
href=”aboutus/aboutus.php”>|企业概况 |
</a></span><span class=”bfline”><a
href=”aboutus/coa.php”>董事长致辞 |</a></span><span
class=”bfline”><a href=”aboutus/org.php”> 组织结构 |
</a></span><span class=”bfline”><a
href=”aboutus/qe.php”>质量认证 | </a></span><span
class=”bfline”><a href=”aboutus/cul.php”>企业文化 |
</a></span><span class=”bfline”><a
href=”aboutus/hon.php”>企业荣誉 |</a></span><span
class=”bfline”><a href=”aboutus/fac.php”> 自动化生产线
|</a></span></td>
              </tr>
          </table>            </td>
        </tr>
        <tr>        </tr>
      </table>
    </div></td>
    <td> </td>
    <td><div id=”Layer2″ style=”position:absolute; width:120;
height:200; z-index:1; visibility: hidden; left: 637px; top:
26px;”>
      <table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″
class=”tm” >
        <tr bgcolor=”#FFCC33″>
          <td bgcolor=”#FFCC33″ valign=”top” align=”left”
width=”6″><img src=”img/bf_tl.gif” width=”6″
height=”3″></td>
          <td height=”3″></td>
          <td valign=”top” align=”right” width=”6″><img
src=”img/bf_tr.gif” width=”6″ height=”3″></td>
        </tr>
        <tr bgcolor=”#efefef”>
          <td width=”6″ class=”bflbg”> </td>
          <td valign=”top”><table width=”100%” border=”0″
cellspacing=”0″ cellpadding=”3″>
            <tr>
              <td width=”6″ class=”bfline”><img
src=”img/bf_dot.gif” width=”6″ height=”5″></td>
              <td class=”bfline”><a
href=”products/index.php”>产品列表</a></td>
            </tr>
            <tr>
              <td width=”6″ class=”bfline”><img
src=”img/bf_dot.gif” width=”6″ height=”5″></td>
              <td class=”bfline”><a
href=”products/price.php”>产品价格</a></td>
            </tr>
            <tr>
              <td width=”6″ class=”bfline”> </td>
              <td class=”bfline”> </td>
            </tr>
          </table></td>
          <td valign=”top” align=”right” width=”6″
class=”bfrbg”></td>
        </tr>
        <tr>
          <td valign=”bottom” width=”6″><img
src=”img/bf_bl.gif” width=”6″ height=”6″></td>
          <td class=”bfbbg” height=”6″></td>
          <td valign=”bottom” align=”right” width=”6″><img
src=”img/bf_br.gif” width=”6″ height=”6″></td>
        </tr>
      </table>
    </div></td>
    <td> </td>
    </tr>
</table>
</div>
</body>

</html>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图