recherche

Maison  >  Article  >  interface Web  >  Code d'effet du menu déroulant FixedMenu implémenté par jQuery_jquery

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

WBOY
WBOYoriginal
2016-05-16 15:42:561359parcourir

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>

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jquery implémente des effets tels que le défilement vers la gauche et la droite, le défilement en dégradé et en arrière-plan graphique des menus animés_jqueryArticle suivant：jquery implémente des effets tels que le défilement vers la gauche et la droite, le défilement en dégradé et en arrière-plan graphique des menus animés_jquery

Articles Liés

Voir plus