如何使2級滾動標籤在CSS像這樣的HTML 5

我需要讓標籤像這樣由具有水平滾動和我使用的HTML 5 figure和figure標題如何使2級滾動標籤在CSS像這樣的HTML 5

HTML例如

<div class="footernav"> 
    <a href="javascript:void(0)"> 
    <figure> <img src="http://lorempixel.com/200/200/fashion/" class="fluid"> 
     <figcaption> 
       <h3>Product Name</h3> 
     </figcaption> 
    </figure> 
    </a> 
</div>

CSS

.footernav {white-space;no-wrap; padding-top: 0.2%; border-top: 1px solid white; overflow: auto; white-space:nowrap; padding-bottom: 1.9%;} 
.footernav a { text-decoration: none; font-weight: bold; display: inline-block; padding-right: 1.5%; padding-left: 1.5%; text-align: center; margin-top: 1.1em; overflow:hidden; } 
.footernav figure:last-child { margin-right: 0; } 
.footernav img { min-width: 118px; max-width: 118px; padding:3px; } 
figure{margin:0} 
.footernav a:hover, 
.footernav a.selected { border-top-left-radius: 15px; 
border-top-right-radius: 15px; background:red} 
.footernav h3 { color: #000; font-weight: 700; margin-top: 0; margin-bottom: 0.3em; font-size: 1.1em; text-transform: uppercase; margin-top:0.5em }

參看H ere http://jsfiddle.net/jitendravyas/XnAsL/1/（鏈接更新）

現在如何到第二級，並使其像下面的圖片？

兩個級別都應滾動。

enter image description here

來源

2011-12-31 Jitendra Vyas

困惑....你想要兩行產品還是當我在第一行單擊一個產品時，下一行應該彈出，這也應該是滾動......？ – Starx 2011-12-31 10:58:42

@Starx - 兩者。當頁面將被打開時，任何一個將被默認選擇。但用戶可以從第一行中選擇任何其他項目。第二行子項與第一行的主要選擇項目有關。第二行的itmes鏈接到他們的產品頁面。第一排物品只會打開子版 – 2011-12-31 11:02:00

我只是用最簡單的邏輯，我能想到的。

檢查小提琴的更新here。

我剛剛複製你的div，給他們一個普通的類來表示子項目。然後在原始鏈接上使用rel屬性來顯示這些框。

$(".link").click(function() { 
    var rel = $(this).attr('rel'); 
    $(".subtabs").hide(); 
    $("#"+rel).show(); 
});

更新：

既然你想要一個CSS的解決方案，以表示子項目最好的（或唯一的）太裏面嵌套它們。但是你目前的標記模式不允許。因爲內聯元素將包含塊元素。雖然這將在HTML5（當然還處於試驗階段）下有效，但不會按預期呈現（事實上，div會從標記中彈出）。所以你必須將標記樣式改爲適合的東西。

根據我們的討論，this fiddle做了什麼需要。

更新II

既然你說，腳本會被別人做。一個簡單的片段將完成工作。一個特定的行會被選中，當用戶點擊它會仍然選擇... You can check the fiddle of this here

$(".footernav > li").click(function() { 
    $(this).toggleClass("selected"); 
});

_{附：第二行定位在小提琴盒內無法正常工作。所以你可能在一個單獨的頁面進行測試。}

來源

2011-12-31 11:23:37 Starx

+1謝謝，但是當我選擇第一排itesm時，它不會選擇第二排中的物品 – 2011-12-31 11:33:15

因此，您希望所有物品都被選中（但是您希望如何表示選擇？可以通過複選框或屬性）。請解釋一下... :) – Starx 2011-12-31 17:58:40

我想改變並選擇類似這樣的標籤，但用我的標記http://jsfiddle.net/jitendravyas/Rx3FQ/ – 2012-01-01 07:12:50

如何使2級滾動標籤在CSS像這樣的HTML 5

回答

相關問題