網頁開發流程大公開 - 滑動購物車

分類: 技術分享 作者: abu

13 8 月 2008

此次任務是將Lativ網站購物車改為下滑式選單…

先來欣賞一下其它網站的下滑功能:

(這是選單 未展開圖)
未展開圖

(這是在IE6下 展開圖)
IE6下展開圖

(這是在IE7下 展開圖) (ps: Firefox和IE7圖一樣)
IE7下展開圖

很明顯的!SELECT在IE6的z-index無限大bug,被巧妙的解決了,就是....直接隱藏起來比較快,至於選單下方線跑去哪了,就不得而知。

好的,知道目標以後,就開始動工吧,先來到Lativ的大本營,並製作出施工藍圖 。(如下圖)
步驟很簡單明瞭,就是,滑鼠移至右上"購物清單XXX"字樣,購物車清單自動下"滑"出來
工地原貌

先撰寫出滑出選單,並停在定位上。(如下圖)
施工��

很好,SELECT的bug在IE6下,一覽無遺的出現,但是我們並不打算使用隱藏大法解決,所以,決定參考兩種方式,一種是jace大大提供的,可參照這,另一種是由作者Hedger Wang提供的方式,可參照這,基本概念大致上就是使用iframe覆蓋select,因為之前用過jace大大提供的方式,這次嘗鮮一下,使用佛心Hedger Wang的方式,加入CSS設定,很方便的成功解決select覆蓋問題。(如下圖)
施工��

是的,出現了詭異的狀況,SELECT只蓋住了"DIV的邊框",再次仔細研讀文獻,原始範例中,DIV的邊框並沒被SELECT遮住,而是正常的一樣蓋在SELECT上,於是,完全按照原始CSS設定的方式,另外在要顯示的內容,包上一層DIV,使用.select-free .bg ← 去設定選單的外框CSS,果然,尊重原著是很重要的,按照原始方式一修改,選單終於順利的"完全覆蓋"住SELECT了。(如下圖)
完工

源自:http://blog.hedgerwow.com/

[CSS設定部份]

.select-free
{
position:absolute;
z-index:10;
cursor:move;
overflow:hidden;/*must have*/
width:33em;/*must have for any value*/;
}
 
.select-free iframe
{
display:none;/*sorry for IE5*/
display/**/:block;/*sorry for IE5*/
position:absolute;/*must have*/
top:0;/*must have*/
left:0;/*must have*/
z-index:-1;/*must have*/
filter:mask();/*must have*/
width:3000px;/*must have for any big value*/
height:3000px/*must have for any big value*/;
}

[BODY設定部份]

<div class="select-free">
    <div>內容<!--[if lte IE 6.5]><![endif]--></div>
</div>

使用上,相當方便,跟吃滷肉飯一樣,感謝原創者 😀

1 Response to 網頁開發流程大公開 - 滑動購物車

Avatar

Daniel

8 月 14th, 2008 at 9:50 上午

abu 辛苦囉~
雖然看起來好像只是小地方,但其實就是這樣的小地方才特別棘手啊...
太厲害嚕...^^

另外請問為什麼是方便的像吃滷肉飯,而不是方便的像喝魚片湯呢?(噗)^^|||

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。