素材牛VIP会员

ModernMenu支持水平、垂直的导航菜单插件

 所属分类:网页特效-导航菜单

 浏览:1802次  评论:0次  更新时间:2016-09-09
牛币素材VIP可免积分下载
ModernMenu支持水平、垂直的导航菜单插件兼容IE7
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:一款国外收费版的水平/垂直导航插件。 提供8个不同的主题供您选择,支持多级栏目, 外观可定制。

详细介绍

使用方法:

引入CSS样式文件、jQuery库文件、插件JS文件

<link href="css/preview.css" type="text/css" rel="stylesheet">
<link href="css/modern-menu.css" type="text/css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.transit.min.js" type="text/javascript"></script>
<script src="js/jquery.modern-menu.min.js" type="text/javascript"></script>

HTML结构

<ul class="modern-menu theme1">
  <li><a href="#"><span>HOME</span></a></li>
  <li><a href="#"><span>ABOUT</span></a></li>
  <li><a href="#"><span>SERVICES</span></a>
    <ul>
      <li><a href="#"><span>WEB DESIGN</span></a></li>
      <li><a href="#"><span>PROGRAMING</span></a></li>
      <li><a href="#"><span>ADVERTISING</span></a></li>
      <li><a href="#"><span>MARKETING</span></a></li>
    </ul>
  </li>
  <li><a href="#"><span>PORTFOLIO</span></a>
    <ul>
      <li><a href="#"><span>WEB DESIGN</span></a></li>
      <li><a href="#"><span>PROGRAMING</span></a>
        <ul>
          <li><a href="#"><span>JAVASCRIPT</span></a></li>
          <li><a href="#"><span>MOBILE</span></a>
            <ul>
              <li><a href="#"><span>OBJECTIVE-C</span></a></li>
              <li><a href="#"><span>JAVASCRIPT</span></a></li>
              <li><a href="#"><span>NODE.JS</span></a></li>
              <li><a href="#"><span>RUBY</span></a></li>
            </ul>
          </li>
          <li><a href="#"><span>PHP / PERL</span></a></li>
          <li><a href="#"><span>C++ / C#</span></a></li>
        </ul>
      </li>
      <li><a href="#"><span>ADVERTISING</span></a></li>
      <li><a href="#"><span>MARKETING</span></a></li>
    </ul>
  </li>
  <li><a href="#"><span>CLIENTS</span></a>
    <ul>
      <li><a href="#"><span>GREAT BRITAIN</span></a></li>
      <li><a href="#"><span>UNITED STATES</span></a>
        <ul>
          <li><a href="#"><span>LOS ANGELES</span></a></li>
          <li><a href="#"><span>NEW YORK</span></a></li>
          <li><a href="#"><span>WASHINGTON</span></a></li>
          <li><a href="#"><span>BOSTON</span></a></li>
          <li><a href="#"><span>LAS VEGAS</span></a></li>
        </ul>
      </li>
      <li><a href="#"><span>FRANCE</span></a></li>
      <li><a href="#"><span>CANADA</span></a></li>
      <li><a href="#"><span>AUSTRALIA</span></a></li>
    </ul>
  </li>
  <li><a href="#"><span>OFFICES</span></a>
    <ul>
      <li><a href="#"><span>LOS ANGELES</span></a></li>
      <li><a href="#"><span>NEW YORK</span></a></li>
      <li><a href="#"><span>LONDON</span></a></li>
      <li><a href="#"><span>PARIS</span></a></li>
    </ul>
  </li>
  <li><a href="#"><span>CONTACT</span></a></li>
  <ul class="mm-group mm-right">
    <li class="mm-icon"><a href="#"><span class="mm-facebook"></span></a></li>
    <li class="mm-icon"><a href="#"><span class="mm-twitter"></span></a></li>
    <li class="mm-icon"><a href="#"><span class="mm-googleplus"></span></a></li>
    <li class="mm-icon"><a href="#"><span class="mm-linkedin"></span></a></li>
  </ul>
</ul>

插件初始化、配置

<script type="text/javascript">$(".modern-menu").modernMenu();</script>

相关素材 - 导航菜单

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)