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

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

WBOY

リリース： 2016-05-16 18:14:02

オリジナル

1278 人が閲覧しました

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

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

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

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'); 
}); ;

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

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