How to make 2 level scrolling tab in CSS like this in HTML 5
Question by Jitendra Vyas
I need to make tabs like this which is having horizontal scroll and I’m using HTML 5 figure and figure caption
HTML example
<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 }
see here http://jsfiddle.net/jitendravyas/XnAsL/1/ (Link updated)
Now how to 2nd level and make it like the below picture?
Both level should scroll.
Answer by Starx
I just used a simplest logic i could think of.
Check the update of your fiddle here.
I just copied your div, gave them a common class to denote as sub item. Then used a rel attribute on the original link to show those boxes.
$(".link").click(function() {
var rel = $(this).attr('rel');
$(".subtabs").hide();
$("#"+rel).show();
});
Update:
Since you want a CSS solution, in order to denote sub items the best(or only) way is too nest them inside. But your current markup pattern, will not allow it. as an inline element will contain a block element. Although this will be valid under HTML5 (which of course is still in experimental phase), does not render as expected (in fact the div will pop right out of the tag). So you have to change the markup style to something fit.
As per our discussion, this fiddle does what is needed.
Update II
Since you said, scripting will be done by someone else. A simple snippet will get the job the job done. A particular row will be selected and will remained selected when the user clicks it… You can check the fiddle of this here
$(".footernav > li").click(function() {
$(this).toggleClass("selected");
});
P.S.
Second row positioning is not working properly inside the fiddle’s box. So you might have test in a seperate page.
