|
http://www./Demo/201504161689.html
這個(gè)側(cè)邊欄購物車插件通過一種靈活的方式,，在不刷新頁面或彈出對(duì)話框的情況下，使用戶能夠進(jìn)入購物車查看他們購買的商品和離開購物車,。
這個(gè)demo的靈感來自于 CreativeDash online store ,。
從手機(jī)應(yīng)用程序，用戶日益喜歡側(cè)邊欄內(nèi)容,。除了用戶能夠很容易的從購物車中移除商品,，我們應(yīng)該能夠?yàn)橛脩籼峁└嗪锰帲焊嗟念櫦深櫩偷母惺埽顾鼈兏有湃紊碳摇?/p>
HTML結(jié)構(gòu)
html結(jié)構(gòu)非常簡(jiǎn)單,，#cd-cart-trigger用于觸發(fā)購物車,，空的 #cd-shadow-layer 用于顯示購物車時(shí)屏幕背景的模糊層。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <header>
<!-- logo and menu here -->
<div id="cd-cart-trigger"><a class="cd-img-replace" href="#0">Cart</a></div>
</header>
<main>
<!-- content here -->
</main>
<div id="cd-shadow-layer"></div>
<div id="cd-cart">
<h2>Cart</h2>
<ul class="cd-cart-items">
<li>
<!-- ... -->
</li>
<li>
<!-- ... -->
</li>
</ul> <!-- cd-cart-items -->
<div class="cd-cart-total">
<p>Total <span>$39.96</span></p>
</div> <!-- cd-cart-total -->
<a href="#0" class="checkout-btn">Checkout</a>
<p class="cd-go-to-cart"><a href="#0">Go to cart page</a></p>
</div> <!-- cd-cart -->
|
CSS樣式
開始時(shí)購物車放在視口外,，設(shè)置position:fixed和right: -100%,。當(dāng)用戶點(diǎn)擊了購物車按鈕，我們使用jQuery為 #cd-cart 添加一個(gè)class .speed-in,。這個(gè)class修改right的值從-100%到0,。
-webkit-overflow-scrolling: touch 用于在webkit內(nèi)核的移動(dòng)瀏覽器上滾動(dòng)更加平滑。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #cd-cart {
position: fixed;
top: 0;
right: -100%;
height: 100%;
/* header height */
padding-top: 50px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: right 0.3s;
&.speed-in {
right: 0;
}
}
|
JAVASCRIPT
有一點(diǎn)需要注意,，開始時(shí)我們將導(dǎo)航菜單放置到header外面,。因?yàn)槲覀兊拇a是基于移動(dòng)優(yōu)先的，我們想讓菜單作為滑動(dòng)側(cè)邊欄在左邊出現(xiàn),。當(dāng)屏幕的分辨率大于1200px的時(shí)候,，我們使用jQuery將導(dǎo)航菜單移入header中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <header>
<div id="logo"></div>
<div id="cd-hamburger-menu"><a class="cd-img-replace" href="#0">Menu</a></div>
<div id="cd-cart-trigger"><a class="cd-img-replace" href="#0">Cart</a></div>
<!-- we use jQuery to move the #main-nav here when the viewport is > 1200px -->
</header>
<nav id="main-nav">
<ul>
<li><a href="#0">Home</a></li>
<li><a href="#0">About</a></li>
<li><!-- ... --></li>
</ul>
</nav>
|
1 2 3 4 5 6 7 8 9 | function move_navigation( $navigation, $MQ) {
if ( $(window).width() >= $MQ ) {
$navigation.detach();
$navigation.appendTo('header');
} else {
$navigation.detach();
$navigation.insertAfter('header');
}
}
|
|
