基于jQuery UI的跨设备响应式水平菜单特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款基于jQuery UI的跨设备响应式水平菜单特效。该菜单特效支持桌面和移动手机在内的多种设备，通过它可以实现一个简单且时尚的水平滑动菜单效果。

使用方法

使用该菜单特效需要在页面中引入jquery和jquery ui的相关文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

HTML结构

菜单的基本HTML结构为：

<div id="navMenu">
  <div id="navMenu-wrapper">
    <ul id="navMenu-items" style="">
      <div id="menuSelector"></div>
      <li class="navMenu-item active"> <a href="#">Home</a> </li>
      <li class="navMenu-item"> <a href="#">Project</a> </li>
      <li class="navMenu-item"> <a href="#">Plugins</a> </li>
      <li class="navMenu-item"> <a href="#">Recommended</a> </li>
      <li class="navMenu-item"> <a href="#">Blog</a> </li>
      <li class="navMenu-item"> <a href="#">News</a> </li>
      <li class="navMenu-item"> <a href="#">Contact</a> </li>
      <li class="navMenu-item"> <a href="#">About</a> </li>
      <li class="navMenu-item"> <a href="#">RSS</a> </li>
      <li class="navMenu-item"> <a href="#">Social Media</a> </li>
      <li class="navMenu-item active"> <a href="#">Navmenu </a> </li>
    </ul>
    <div class="navMenu-paddles">
      <button class="navMenu-paddle-left icon-chevronleft" aria-hidden="true"> </button>
      <button class="navMenu-paddle-right icon-chevronright" aria-hidden="true"> </button>
    </div>
  </div>
</div>

CSS样式

然后为导航菜单添加下面的基本CSS样式。

#navMenu {
  border-bottom: 1px solid #EFEBE8;
  border-top: 1px solid #EFEBE8;
  position: relative;
}

#navMenu #navMenu-wrapper {
  overflow: hidden;
  height: 60px;
  padding: 0 30px;
}

#navMenu-items {
  margin: 0 20px;
  padding: 1px 0;
  list-style: none;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#menuSelector {
  position: relative;
  margin-left: -5px;
  top: -1px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #EFEBE8;
}

.active p, .active a { color: #fff !important; }

#navMenu ul li {
  display: inline-block;
  margin: 16px 24px;
}

#navMenu a {
  color: #EFEBE8;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

左右导航箭头按钮的样式为：

.slick-prev, .icon-chevronleft { transform: rotate(180deg); }

.icon-chevronleft, .icon-chevronright {
  background-image: url('arrow.png');
  background-repeat: no-repeat;
  background-size: 20px;
}

.navMenu-paddle-left, .navMenu-paddle-right {
  cursor: pointer;
  border: none;
  position: absolute;
  top: 20px;
  background-color: transparent;
  width: 25px;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
}

.slick-prev, .navMenu-paddle-left { left: 0; }

.arrow {
  width: 25px;
  margin-left: auto;
  margin-right: auto;
}

.slick-next, .navMenu-paddle-right { right: 0; }