jquery implementiert einen dynamischen Schiebemenüeffekt, der horizontal und vertikal erweitert werden kann

Das Beispiel in diesem Artikel beschreibt die Implementierung eines dynamischen Schiebemenüeffekts durch jquery, der horizontal und vertikal erweitert werden kann. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier ist eine Demonstration der Wirkung von zwei Dropdown-Navigationsmenüs, die mit jquery.easing.1.3.js, jquery.naviDropDown.1.0.js und jquery.hoverIntent.minified.js implementiert werden. Die neueste jquery-Version kann auch eingeführt werden. Auf der Demoseite gibt es Dropdown-Menüs, die horizontal und horizontal herausgeschoben werden können, und Navigationsmenüs, die direkt im vertikalen Layout herausgeschoben werden können. Sie können diese je nach Bedarf verwenden.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-right-down-show-nav-menu-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE html>
<head>
<title>jQuery纵向横向动态下拉导航菜单</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
//jquery.naviDropDown.1.0.js
(function($){
 $.fn.naviDropDown = function(options) { 
 var defaults = { 
  dropDownClass: 'dropdown',
  dropDownWidth: 'auto',
  slideDownEasing: 'easeInOutCirc',
  slideUpEasing: 'easeInOutCirc',
  slideDownDuration: 500,
  slideUpDuration: 500,
  orientation: 'horizontal'
 }; 
 var opts = $.extend({}, defaults, options);  
 return this.each(function() { 
  var $this = $(this);
  $this.find('.'+opts.dropDownClass).css('width', opts.dropDownWidth).css('display', 'none');
  var buttonWidth = $this.find('.'+opts.dropDownClass).parent().width() + 'px';
  var buttonHeight = $this.find('.'+opts.dropDownClass).parent().height() + 'px';
  if(opts.orientation == 'horizontal') {
  $this.find('.'+opts.dropDownClass).css('left', '0px').css('top', buttonHeight);
  }
  if(opts.orientation == 'vertical') {
  $this.find('.'+opts.dropDownClass).css('left', buttonWidth).css('top', '0px');
  }
  $this.find('li').hoverIntent(getDropDown, hideDropDown);
 });
 function getDropDown(){
  activeNav = $(this);
  showDropDown();
 }
 function showDropDown(){
  activeNav.find('.'+opts.dropDownClass).slideDown({duration:opts.slideDownDuration, easing:opts.slideDownEasing});
 }
 function hideDropDown(){
  activeNav.find('.'+opts.dropDownClass).slideUp({duration:opts.slideUpDuration, easing:opts.slideUpEasing});//hides the current dropdown
 }
 };
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
 $('#navigation_horiz').naviDropDown({
  dropDownWidth: '300px'
 });
 $('#navigation_vert').naviDropDown({
  dropDownWidth: '300px',
  orientation: 'vertical'
 });
});
</script>
<style type="text/css">
* {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; line-height:16px}
.container {margin:10px auto; width:950px; height:300px; background:#eee; padding:50px 0 0 0} 
#navigation_horiz {width:820px; clear:both; padding:0 0 0 0; margin:0 auto}
#navigation_horiz ul {height:50px; display:block}
#navigation_horiz ul li {display:block; float:left; width:200px; height:50px; background:#999; margin:0 1px 0 0; position:relative}
#navigation_horiz ul li a.navlink {display:block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}
#navigation_horiz .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px}
#navigation_vert {width:820px; clear:both; padding:0 0 0 0; margin:0 auto}
#navigation_vert ul {height:50px; display:block}
#navigation_vert ul li {display:block; width:200px; height:50px; background:#999; margin:0 0 1px 0; position:relative}
#navigation_vert ul li a.navlink {display:block; *display:inline-block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}
#navigation_vert .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topright:10px}
#navigation_horiz ul li #dropdown_one {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_one a {color:red}
#navigation_horiz ul li #dropdown_two {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_two a {color:black}
#navigation_horiz ul li #dropdown_three {background:#ccc; color:#fff} 
#navigation_horiz ul li #dropdown_three a {color:gray}
#navigation_vert ul li #dropdown_four {background:#333; color:#fff}
#navigation_vert ul li #dropdown_four a {color:red}
#navigation_vert ul li #dropdown_five {background:#666; color:#fff}
#navigation_vert ul li #dropdown_five a {color:black}
#navigation_vert ul li #dropdown_six {background:#777; color:#fff} 
#navigation_vert ul li #dropdown_six a {color:orange}
</style>
</head>
<body>
 <div class="container">
  <div id="navigation_horiz">
  <ul>
   <li>
    <a href="" class="navlink">List Item</a>
   <div class="dropdown" id="dropdown_one">  
    <p><a href="#">This is a Link</a></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
   </div><!-- .dropdown_menu --> 
   </li>
   <li>
    <a href="" class="navlink">List Item</a>
   <div class="dropdown" id="dropdown_two">  
    <p><a href="#">This is a Link</a></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
   </div><!-- .dropdown_menu --> 
   </li>
   <li><a href="" class="navlink">List Item</a></li>
   <li>
    <a href="" class="navlink">List Item</a>
   <div class="dropdown" id="dropdown_three">  
    <p><a href="#">This is a Link</a></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
   </div><!-- .dropdown_menu -->  
   </li>
  </ul>
  </div><!-- #navigation_horiz -->
 </div><!-- .container -->
 <div class="container">
  <div id="navigation_vert">
  <ul>
   <li>
    <a href="" class="navlink">List Item</a>
   <div class="dropdown" id="dropdown_four">  
    <p><a href="#">This is a Link</a></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
   </div><!-- .dropdown_menu --> 
   </li>
   <li>
    <a href="" class="navlink">List Item</a>
   <div class="dropdown" id="dropdown_five">  
    <p><a href="#">This is a Link</a></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
   </div><!-- .dropdown_menu --> 
   </li>
   <li><a href="" class="navlink">List Item</a></li>
   <li>
    <a href="" class="navlink">List Item</a>
   <div class="dropdown" id="dropdown_six">  
    <p><a href="#">This is a Link</a></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
   </div><!-- .dropdown_menu -->  
   </li>
  </ul>
  </div><!-- #navigation_vert -->
 </div><!-- .container -->
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.