Maison > interface Web > js tutoriel > Menu de navigation de taille de fenêtre adaptative JQuery avec code source download_jquery

Menu de navigation de taille de fenêtre adaptative JQuery avec code source download_jquery

WBOY
Libérer: 2016-05-16 15:41:18
original
1932 Les gens l'ont consulté

Le rendu est le suivant :

Voir la démo Téléchargement du code source

Code HTML :

<h1>jQuery / Zepto响应式菜单 PgwMenu 演示</h1> 
 <p class="dowebok-explain">请缩小/放大浏览器窗口宽度查看效果</p> 
 <h2>深色样式(默认)</h2> 
 <ul class="pgwMenu"> 
  <li><a class="selected" href="http://www.jb51.net/">首页</a></li> 
  <li><a href="http://www.jb51.net/">代码</a></li> 
  <li><a href="http://www.jb51.net/">素材</a></li> 
  <li><a href="http://www.jb51.net/">模板</a></li> 
  <li><a href="javascript:">关于</a></li> 
  <li><a href="javascript:">服务</a></li> 
  <li><a href="http://www.jb51.net/">联系</a></li> 
 </ul> 
 <h2>浅色样式(默认)</h2> 
 <ul class="pgwMenu light"> 
  <li><a class="selected" href="http://www.jb51.net/">首页</a></li> 
  <li><a href="http://www.jb51.net/">代码</a></li> 
  <li><a href="http://www.jb51.net/">素材</a></li> 
  <li><a href="http://www.jb51.net/">模板</a></li> 
  <li><a href="javascript:">关于</a></li> 
  <li><a href="javascript:">服务</a></li> 
  <li><a href="http://www.jb51.net/">联系</a></li> 
 </ul> 
 <h2>自定义样式</h2> 
 <ul class="pgwMenuCustom"> 
  <li><a class="selected" href="http://www.jb51.net/">首页</a></li> 
  <li><a href="http://www.jb51.net/">代码</a></li> 
  <li><a href="http://www.jb51.net/">素材</a></li> 
  <li><a href="http://www.jb51.net/">模板</a></li> 
  <li><a href="javascript:">关于</a></li> 
  <li><a href="javascript:">服务</a></li> 
  <li><a href="http://www.jb51.net/">联系</a></li> 
 </ul>
Copier après la connexion

Code Js

$(function () { 
   $('.pgwMenu').pgwMenu({ 
    dropDownLabel: '菜单', 
    viewMoreLabel: '更多<span class="icon"></span>' 
   }); 
   $('.pgwMenuCustom').pgwMenu({ 
    mainClassName: 'pgwMenuCustom', 
    dropDownLabel: '菜单', 
    viewMoreLabel: '更多<span class="icon"></span>' 
   }); 
  }); 
Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article vous présentant le menu de navigation adaptatif de la taille de la fenêtre JQuery. J'espère qu'il vous plaira.

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal