jQuery UL ラベル ドロップダウン メニューのデモ code_jquery

これはメニューの内容です。 ul タグを使用してメニューを実装します。

コードをコピーします コードは次のとおりです。

メニュー 1 >

• サブメニュー 1


• ;/a>
  
  • サブメニュー 7
  
  >
  • a href="">サブメニュー 3
  
  a href=" "
  
  
  
  • サブメニュー 4
  • サブメニュー 5
  
  
  • サブメニュー 6
  ;
  
  
  
  
  
  
  これは CSS コントロール コードです。 🎜 >
  
  
  
  コードをコピー
  
  

コードは次のとおりです:

ul,ol,li{list-style: none;padding: 0px;margin:0px;} #menu *{line-height:30px;} #menu a{ text-decoration:none; display:block; >} #menu ul{ text-align:left;

background:#333;

}
#menu .arrow{ /* メニュー項目の右側の小さな矢印*/
float: right;
padding-right:5px;
}
#menu>ul{height:30px;} /* メニューバーがない場合でも、上部のメニューバーの高さを維持しますメニュー項目。 */
/* 第 1 レベルのメニュー*/
#menu>ul>li{
display:inline-block;
}
#menu>ul>li>a{color:#fff;}
#menu>ul>li:hover{background:#666;}
/* ドロップダウン メニュー バー*/
#menu>ul>li ul{
display:none;
position:absolute;
background:#c1cd94;
box-shadow:2px 2px # 000 ;
-webkit-box-shadow:2px 2px 2px #000;
-moz-box-shadow:2px 2px #123;
}
/* ドロップダウン メニューのメニュー項目*/
#menu>ul>li>ul li{padding-left:5px;position:relative;}
#menu>ul>li>ul li>a{color:#000;}
#menu>li>ul li:hover{background:#d3dbb3;}
/* レベル 3 以下のメニュー項目の配置*/
#menu>ul>li>ul>li ul{left :150px; top:0px;}


これは JS コントロール コードです:




コードをコピーします


コードは次のとおりです。


$(document).ready(function()

{
/* メニューの初期化*/
$('#menu>ul>li>) ;ul').find ('li:has(ul:not(:empty))>a').append(">"); / サブメニューがある場合 メニュー項目に「>」記号を追加します

$("#menu>ul>li").bind('mouseover',function() // トップレベルのメニュー項目に対するマウスオーバー操作{ $( this).children('ul').slideDown('fast'); }).bind('mouseleave',function() // トップメニュー項目のマウスアウト操作{ $(this).children('ul').slideUp('fast'); });

$('#menu>ul>li>ul li') 'mouseover',function() //サブメニューのマウスイン操作

{
$(this).children('ul').slideDown('fast')).bind(' Mouseleave',function() / / サブメニューのマウスアウト操作
$(this).children('ul').slideUp('fast');
}); ;

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。