当前位置:主页 > 网页特效 > 菜单导航 >

jQuery和css3实用滑动侧边栏购物车插件

发布时间:2018/07/03 来源:互联网 浏览: 关键词:jquery CSS3 菜单导航 侧边栏 
jQuery和css3实用滑动侧边栏购物车插件 jQuery和css3实用滑动侧边栏购物车插件
阿里云

简要教程

这个侧边栏购物车插件通过一种灵活的方式,在不刷新页面或弹出对话框的情况下,使用户能够进入购物车查看他们购买的商品和离开购物车。

这个demo的灵感来自于 CreativeDash online store 。

从手机应用程序,用户日益喜欢侧边栏内容。除了用户能够很容易的从购物车中移除商品,我们应该能够为用户提供更多好处:更多的顾忌顾客的感受,使它们更加信任商家。

HTML结构

html结构非常简单,#cd-cart-trigger用于触发购物车,空的 #cd-shadow-layer 用于显示购物车时屏幕背景的模糊层。

<header>
  <!-- logo and menu here -->
  <divid="cd-cart-trigger"><aclass="cd-img-replace"href="#0">Cart</a></div>
</header>
<main>
  <!-- content here -->
</main>
  
<divid="cd-shadow-layer"></div>
  
<divid="cd-cart">
  <h2>Cart</h2>
  <ulclass="cd-cart-items">
    <li>
      <!-- ... -->
    </li>
  
    <li>
      <!-- ... -->
    </li>
  </ul><!-- cd-cart-items -->
  
  <divclass="cd-cart-total">
    <p>Total <span>$39.96</span></p>
  </div><!-- cd-cart-total -->
  
  <ahref="#0"class="checkout-btn">Checkout</a>
   
  <pclass="cd-go-to-cart"><ahref="#0">Go to cart page</a></p>
</div><!-- cd-cart -->

CSS样式

开始时购物车放在视口外,设置position:fixed和right: -100%。当用户点击了购物车按钮,我们使用jQuery为 #cd-cart 添加一个class .speed-in。这个class修改right的值从-100%到0。

-webkit-overflow-scrolling: touch 用于在webkit内核的移动浏览器上滚动更加平滑。

#cd-cart {
  position:fixed;
  top:0;
  right:-100%;
  height:100%;
  
  /* header height */
  padding-top:50px;
  
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  
  transition:right0.3s;
  
  &.speed-in {
    right:0;
  }
}

JAVASCRIPT

有一点需要注意,开始时我们将导航菜单放置到header外面。因为我们的代码是基于移动优先的,我们想让菜单作为滑动侧边栏在左边出现。当屏幕的分辨率大于1200px的时候,我们使用jQuery将导航菜单移入header中。

<header>
  <divid="logo"></div>
  
  <divid="cd-hamburger-menu"><aclass="cd-img-replace"href="#0">Menu</a></div>
  <divid="cd-cart-trigger"><aclass="cd-img-replace"href="#0">Cart</a></div>
  
  <!-- we use jQuery to move the #main-nav here when the viewport is > 1200px -->
</header>
  
<navid="main-nav">
  <ul>
    <li><ahref="#0">Home</a></li>
    <li><ahref="#0">About</a></li>
    <li><!-- ... --></li>
  </ul>
</nav>

functionmove_navigation( $navigation, $MQ) {
  if( $(window).width() >= $MQ ) {
    $navigation.detach();
    $navigation.appendTo('header');
  }else{
    $navigation.detach();
    $navigation.insertAfter('header');
  }
}

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top