interface Web
js tutoriel
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
May 16, 2016 pm 03:42 PML'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.
Article chaud
Outils chauds Tags
Article chaud
Tags d'article chaud
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment créer un menu déroulant dans le tableau WPS
Mar 21, 2024 pm 01:31 PM
Comment créer un menu déroulant dans le tableau WPS
Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide
Feb 27, 2024 pm 06:45 PM
Explication détaillée des méthodes de référence jQuery : guide de démarrage rapide
Comment utiliser la méthode de requête PUT dans jQuery ?
Feb 28, 2024 pm 03:12 PM
Comment utiliser la méthode de requête PUT dans jQuery ?
Comment supprimer l'attribut height d'un élément avec jQuery ?
Feb 28, 2024 am 08:39 AM
Comment supprimer l'attribut height d'un élément avec jQuery ?
Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page
Feb 28, 2024 pm 09:06 PM
Conseils jQuery : modifiez rapidement le texte de toutes les balises a de la page
Utilisez jQuery pour modifier le contenu textuel de toutes les balises
Feb 28, 2024 pm 05:42 PM
Utilisez jQuery pour modifier le contenu textuel de toutes les balises
Comment configurer le menu déroulant Excel pour associer automatiquement les données ? Le menu déroulant Excel associe automatiquement les paramètres de données
Mar 13, 2024 pm 03:04 PM
Comment configurer le menu déroulant Excel pour associer automatiquement les données ? Le menu déroulant Excel associe automatiquement les paramètres de données
Comprendre le rôle et les scénarios d'application de eq dans jQuery
Feb 28, 2024 pm 01:15 PM
Comprendre le rôle et les scénarios d'application de eq dans jQuery
