Code d'effet du menu déroulant FixedMenu implémenté par jQuery

Code d'effet du menu déroulant FixedMenu implémenté par jQuery_jquery

WBOY

Libérer： 2016-05-16 15:42:56

original

1358 Les gens l'ont consulté

L'exemple de cet article décrit le code d'effet du menu déroulant fixMenu implémenté par jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici une démonstration d'un menu déroulant de style Google. Son noyau est en fait le menu jquery.fixedMenu, utilisant les fichiers jquery.fixedMenu.js et fixedMenu_style.css. Des commentaires ont été ajoutés au code. Extrayez-le de ce code. Extrayez ces deux fichiers et référencez-les à nouveau. Ce menu peut afficher le sous-menu secondaire vers le bas lorsque la souris clique sur le menu principal. Dans le navigateur Firefox ou Chrome, l'effet d'ombre du menu peut également être affiché.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-fixedMenu-menu-style-codes/

Le code spécifique est le suivant :

<!DOCTYPE html>
<head>
<title>jQuery仿Google下拉导航菜单</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style>
/*fixedMenu_style.css代码*/
body{padding: 0;margin: 0;}
.menu{font: 13px/27px Arial,sans-serif;color: #3366CC;height: 30px;background: url(images/back.gif) repeat-x;}
.menu a: hover{background-color: #e4ebf8;}
.menu a{text-decoration: none;padding: 4px 8px 7px;color: #3366CC;outline: none;}
.menu ul{list-style: none;margin: 0;padding: 0 0 0 10px;}
.menu ul li{padding: 0;float: left;}
.menu ul li ul li{padding: 0;float: none;margin: 0 0 0 0px;width: 100%;}
.menu ul li ul{position: absolute;border: 1px solid #C3D1EC;box-shadow: 0 1px 5px #CCCCCC;margin-top: -1px;display: none;padding: 0px 16px 0px 0;}
.active ul{display: block !important;}
.active a{background-color: white;border: 1px solid #C3D1EC;border-bottom: 0;box-shadow: 0 -1px 5px #CCCCCC;display: block;height: 29px;padding: 0 8px 0 8px;position: relative;z-index: 1;}
.active a: hover{background-color: white;}
.active ul a: hover{background-color: #e4ebf8;}
.active ul a{border: 0 !important;box-shadow: 0 0 0 #CCCCCC;border: 0;width: 100%;}
.arrow{border-color: #3366CC transparent transparent;border-style: solid dashed dashed;margin-left: 5px;position: relative;top: 10px;}
</style>
<script>
//jquery.fixedMenu.js文件代码开始
(function($){
 $.fn.fixedMenu=function(){
  return this.each(function(){
   var menu= $(this);
   menu.find('ul li > a').bind('click',function(){
   if ($(this).parent().hasClass('active')){
    $(this).parent().removeClass('active');
   }
   else{
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active');
   }
   })
  });
 }
})(jQuery);
//jquery.fixedMenu.js文件代码结束
$('document').ready(function(){
 $('.menu').fixedMenu();
});
</script>
</head>
<body>
<div class="menu">
 <ul>
  <li>
   <a href="#">More Examples<span class="arrow"></span></a>
   <ul>
    <li><a href="#">Plugins and jQuery Examples</a></li>
    <li><a href="#">Prototype Examples</a></li>
    <li><a href="#">Mootools Examples</a></li>
    <li><a href="#">Javascript Examples</a></li>
   </ul>
  </li>
  <li>
   <a href="#">Plugins<span class="arrow"></span></a>
   <ul>
    <li><a href="#">Galleries</a></li>
    <li><a href="#">DropDown Menus</a></li>
    <li><a href="#">Content Slider</a></li>
    <li><a href="#">LightBox</a></li>
   </ul>
  </li>
  <li>
   <a href="#">Friend Sites<span class="arrow"></span></a>
   <ul>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">jquery特效</a></li>
   </ul>
  </li>
  <li>
   <a href="#">Contact<span class="arrow"></span></a>
   <ul>
    <li><a href="#">Follow us on Twitter</a></li>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Rss</a></li>
    <li><a href="#">e-mail</a></li>
   </ul>
  </li>
 </ul>
</div>
<div style="margin-top:200px;">
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.