CSS - Fluid Horizontal List, 1 Static Item, Hide Items When Limited Space
I'd like to have a fluid horizon开发者_开发百科tal list with a static "Browse All" on the right. If possible, I'd like this to be a single unordered list.
Item One | Item Two | Item Three | Item Four | Item Five | Item Six | Browse All
The only catch is, as the screen narrows, I'd like to hide the far right items when the space isn't there ( excluding the :last ).
Item One | Item Two | Item Three | Item Four | Browse All
Is there a way to accomplish this with CSS or do I need to get into some JavaScript? If I need to use JavaScript what's the best approach? Do I detect how many are visible and set the widths on each? I tried with CSS Media Queries but the variable character length of the list items make that difficult.
Any help would be greatly appreciated.
Leaves a gap between the last item and Browser All, but uses no scripts at all.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body > div > div > span
{
display: inline-block;
padding: 0px 4px;
border-right: 2px solid #ccc;
}
</style>
</head>
<body>
<div style="display: table;">
<div style="height: 24px; line-height: 24px; overflow: hidden;">
<span>Item One</span>
<span>Item Two</span>
<span>Item Three</span>
<span>Item Four</span>
<span>Item Five</span>
<span>Item Six</span>
</div>
<div style="display: table-cell; white-space: nowrap; padding-left: 4px;">Browse All</div>
</div>
</body>
</html>
Here's a JavaScript+jQuery solution: http://jsfiddle.net/thirtydot/37FtV/
//remove inline-block gaps
$('#menu').contents().filter(function() {
return this.nodeType === 3;
}).remove();
$(window).resize(function() {
$('#menu li').show();
var checkWidth = 0;
while (true) {
checkWidth = 0;
$('#menu li:visible').each(function() {
checkWidth += $(this).outerWidth();
});
if ($(window).width() < checkWidth) {
$('#menu li:not(:last-child):visible:last').hide();
} else {
break;
}
}
}).resize();
<xmp>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<style type='text/css'>
#categories-container { max-width: 950px; width: 100%; margin: 0 auto; height:38px; overflow: hidden; background-color: #ccc; transition:all 300ms ease-in}
#categories { list-style: none; padding: 0 90px 0 0; margin: 0 auto; height:auto; display:inline-block; }
#categories li { float: left; background-color: #ddd; }
#categories li.last { position: absolute; right: 0; }
#categories li a { color: #222; text-decoration: none; display: block; padding: 10px; white-space: nowrap; }
#categories li a:hover { background-color: #bbb; }
li ul,li ul > li ul{display:none; position:absolute; list-style:none}
li ul li{clear:both; list-style:none}
li:hover ul{display: list-item}
</style>
<script>
jQuery(document).ready(function(e) {
jQuery("#browse").toggle(
function(){
jQuery("#categories-container").height($("#categories").height());
},
function(){
jQuery("#categories-container").height("38px");
}
);
});
</script>
</head>
<body>
<div id="categories-container">
<ul id="categories">
<li><a href="#">Anatomy Models</a>
<ul>
<li class=""><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
</ul>
</li>
<li><a href="#">Anatomy Models</a></li>
<li><a href="#">Anatomy Models</a></li>
<li><a href="#">Anatomy Models</a></li>
<li><a href="#">Anatomy Models</a></li>
<li><a href="#">Anatomy Models</a></li>
<li class="last"><a href="#" id="browse">Browse All</a></li>
</ul>
</div>
</body>
</html>
http://jsfiddle.net/37FtV/11/
加载中,请稍侯......
精彩评论