コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jquery は、シンプルなセカンダリ ナビゲーション ドロップダウン メニューを実装します。

jquery は、シンプルなセカンダリ ナビゲーション ドロップダウン メニューを実装します。

WBOY
リリース： 2016-05-16 15:40:22
オリジナル
1657 人が閲覧しました

この記事の例では、jquery が単純な 2 番目のナビゲーション ドロップダウン メニュー効果を実装する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

jQuery コードによって実装された 2 番目のナビゲーション メニュー効果は非常にシンプルです。シンプルなスタイルを好む友人は、それをダウンロードできます。メニューは 2 つのレベルまでサポートされており、CSS との連携も非常に重要です。コードが必要な場合は、それをコピーしてください。

実行中のエフェクトのスクリーンショットは次のとおりです:

オンライン デモのアドレスは次のとおりです:

http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/

具体的なコードは次のとおりです: 

<title>jquery二级导航菜单</title>
<style>
.ddsmoothmenu {
 MARGIN: 0px auto; FONT: 12px Verdana; WIDTH: 730px
}
.ddsmoothmenu UL {
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px;BACKGROUND: #2b9801; Z-INDEX: 100; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.ddsmoothmenu UL LI {
 DISPLAY: block; FLOAT: left; WIDTH: 81px; LINE-HEIGHT: 31px; POSITION: relative; TEXT-ALIGN: center
}
 HTML .ddsmoothmenu UL LI {
 FLOAT: left; WIDTH: 81px; LINE-HEIGHT: 31px; POSITION: relative; TEXT-ALIGN: center
}
.ddsmoothmenu UL LI A {
 DISPLAY: block; FONT-WEIGHT: bold; WIDTH: 81px; TEXT-DECORATION: none
}
.ddsmoothmenu UL LI A:link {
 COLOR: #fff
}
.ddsmoothmenu UL LI A:visited {
 COLOR: #fff
}
.ddsmoothmenu UL LI A:hover {
 COLOR: #ffff00
}
.ddsmoothmenu UL LI UL {
 LEFT: 0px; VISIBILITY: hidden; POSITION: absolute
}
.ddsmoothmenu UL LI UL LI {
 BACKGROUND: #2b9801; FLOAT: left; WIDTH: 81px; LINE-HEIGHT: 25px; BORDER-BOTTOM: #96d47d 1px solid
}
.ddsmoothmenu UL LI UL LI A {
 DISPLAY: block; WIDTH: 81px; TEXT-DECORATION: none
}
.ddsmoothmenu UL LI UL LI A:hover {
 BACKGROUND: #51b228
}
.ddsmoothmenu UL LI UL LI UL {
 TOP: 0px
}
.downarrowclass {
 DISPLAY: none; POSITION: absolute
}
.rightarrowclass {
 DISPLAY: none; POSITION: absolute
}
.ddshadow {
 BACKGROUND: silver; LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px
}
.toplevelshadow {
 opacity: 0.8
}
</style>
<SCRIPT src="jquery1.3.2.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
var ddsmoothmenu={
//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: {down:['downarrowclass', '', 0], right:['rightarrowclass', '']},
transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds
shadow: {enabled:false, offsetx:5, offsety:5},
detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1, //detect WebKit browsers (Safari, Chrome etc)
getajaxmenu:function($, setting){ //function to fetch external page containing the panel DIVs
 var $menucontainer=$('#'+setting.contentsource[0]) //reference empty div on page that will hold menu
 $menucontainer.html("Loading Menu...")
 $.ajax({
  url: setting.contentsource[1], //path to external menu file
  async: true,
  error:function(ajaxrequest){
   $menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText)
  },
  success:function(content){
   $menucontainer.html(content)
   ddsmoothmenu.buildmenu($, setting)
  }
 })
},
buildshadow:function($, $subul){
},
buildmenu:function($, setting){
 var smoothmenu=ddsmoothmenu
 var $mainmenu=$("#"+setting.mainmenuid+">ul") //reference main menu UL
 var $headers=$mainmenu.find("ul").parent()
 $headers.each(function(i){
  var $curobj=$(this).css({zIndex: 100-i}) //reference current LI header
  var $subul=$(this).find('ul:eq(0)').css({display:'block'})
  this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
  this.istopheader=$curobj.parents("ul").length==1&#63; true : false //is top level header&#63;
  $subul.css({top:this.istopheader&#63; this._dimensions.h+"px" : 0})
  $curobj.children("a:eq(0)").css(this.istopheader&#63; {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
   '<img src="'+ (this.istopheader&#63; smoothmenu.arrowimages.down[1] : smoothmenu.arrowimages.right[1])
   +'" class="' + (this.istopheader&#63; smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
   + '" style="border:0;" />'
  )
  if (smoothmenu.shadow.enabled){
   this._shadowoffset={x:(this.istopheader&#63;$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader&#63; $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets
   if (this.istopheader)
    $parentshadow=$(document.body)
   else{
    var $parentLi=$curobj.parents("li:eq(0)")
    $parentshadow=$parentLi.get(0).$shadow
   }
   this.$shadow=$('<div class="ddshadow'+(this.istopheader&#63; ' toplevelshadow' : '')+'"></div>').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'}) //insert shadow DIV and set it to parent node for the next shadow div
  }
  $curobj.hover(
   function(e){
    var $targetul=$(this).children("ul:eq(0)")
    this._offsets={left:$(this).offset().left, top:$(this).offset().top}
    var menuleft=this.istopheader&#63; 0 : this._dimensions.w
    menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())&#63; (this.istopheader&#63; -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent
    if ($targetul.queue().length<=1){ //if 1 or less queued animations
     $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime)
     if (smoothmenu.shadow.enabled){
      var shadowleft=this.istopheader&#63; $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft
      var shadowtop=this.istopheader&#63;$targetul.offset().top+smoothmenu.shadow.offsety : this._shadowoffset.y
      if (!this.istopheader && ddsmoothmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full
       this.$shadow.css({opacity:1})
      }
      this.$shadow.css({overflow:'', width:this._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:this._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)
     }
    }
   },
   function(e){
    var $targetul=$(this).children("ul:eq(0)")
    $targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime)
    if (smoothmenu.shadow.enabled){
     if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
      this.$shadow.children('div:eq(0)').css({opacity:0})
     }
     this.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime)
    }
   }
  ) //end hover
 }) //end $headers.each()
 $mainmenu.find("ul").css({display:'none', visibility:'visible'})
},
init:function(setting){
 if (typeof setting.customtheme=="object" && setting.customtheme.length==2){
  var mainmenuid='#'+setting.mainmenuid
  document.write('<style type="text/css">\n'
   +mainmenuid+', '+mainmenuid+' ul li a {background:'+setting.customtheme[0]+';}\n'
   +mainmenuid+' ul li a:hover {background:'+setting.customtheme[1]+';}\n'
  +'</style>')
 }
 jQuery(document).ready(function($){ //override default menu colors (default/hover) with custom set&#63;
  if (typeof setting.contentsource=="object"){ //if external ajax menu
   ddsmoothmenu.getajaxmenu($, setting)
  }
  else{ //else if markup menu
   ddsmoothmenu.buildmenu($, setting)
  }
 })
}
} //end ddsmoothmenu variable
//Initialize Menu instance(s):
ddsmoothmenu.init({
 mainmenuid: "smoothmenu1", //menu DIV id
 customtheme: [], //override default menu CSS background values&#63; Uncomment: ["normal_background", "hover_background"]
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</SCRIPT>
<DIV class=ddsmoothmenu id=smoothmenu1>
<UL>
 <LI><A href="#">首页</A> 
 </LI>
 <LI><A href="#">一年级</A> 
 <UL>
 <LI><A href="#">一年级1班</A> </LI>
 <LI><A href="#">一年级2班</A> </LI>
 <LI><A href="#">一年级3班</A> </LI>
 <LI><A href="#">一年级4班</A> </LI>
 <LI><A href="#">一年级5班</A> 
 </LI></UL></LI>
 <LI><A href="#">二年级</A> 
 <UL>
 <LI><A href="#">二年级1班</A> </LI>
 <LI><A href="#">二年级2班</A> </LI>
 <LI><A href="#">二年级3班</A> </LI>
 <LI><A href="#">二年级4班</A> </LI>
 <LI><A href="#">二年级5班</A> 
 </LI></UL></LI>
 <LI><A href="#">三年级</A> 
 <UL>
 <LI><A href="#">三年级1班</A> </LI>
 <LI><A href="#">三年级2班</A> </LI>
 <LI><A href="#">三年级3班</A> </LI>
 <LI><A href="#">三年级4班</A> </LI>
 <LI><A href="#">三年级5班</A> 
 </LI></UL></LI>
<LI><A href="#">四年级</A> 
 <UL>
 <LI><A href="#">四年级1班</A> </LI>
 <LI><A href="#">四年级2班</A> </LI>
 <LI><A href="#">四年级3班</A> </LI>
 <LI><A href="#">四年级4班</A> </LI>
 <LI><A href="#">四年级5班</A> 
 </LI></UL></LI>
 <LI><A href="#">五年级</A> 
 <UL>
 <LI><A href="#">五年级1班</A> </LI>
 <LI><A href="#">五年级2班</A> </LI>
 <LI><A href="#">五年级3班</A> </LI>
 <LI><A href="#">五年级4班</A> </LI>
 <LI><A href="#">五年级5班</A> 
 </LI></UL></LI>
 <LI><A href="#">六年级</A> 
 <UL>
 <LI><A href="#">六年级1班</A> </LI>
 <LI><A href="#">六年级2班</A> </LI>
 <LI><A href="#">六年级3班</A> </LI>
 <LI><A href="#">六年级4班</A> </LI>
 <LI><A href="#">六年级5班</A> 
 </LI></UL></LI>
 <LI><A href="#">七年级</A> 
 <UL>
 <LI><A href="#">七年级1班</A> </LI>
 <LI><A href="#">七年级2班</A> </LI>
 <LI><A href="#">七年级3班</A> </LI>
 <LI><A href="#">七年级4班</A> </LI>
 <LI><A href="#">七年级5班</A> 
 </LI></UL></LI>
</UL>
</DIV>
ログイン後にコピー

この記事が皆さんの jquery プログラミング設計に役立つことを願っています。

関連ラベル：
jquery ドロップダウンメニュー
ソース：php.cn
前の記事：js は、バッファリング効果を備えた模倣 QQ パネル折りたたみメニュー コードを実装します_javascript スキル 次の記事：jqueryはユニバーサルコンテンツのフェードアウトタブを実装しますeffect_jquery
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート