CSS - Текущий горизонтальный список, 1 статический элемент, скрытие элементов при ограниченном пространстве - PullRequest
Новая
       1

CSS - Текущий горизонтальный список, 1 статический элемент, скрытие элементов при ограниченном пространстве

0 голосов
/ 18 августа 2011

Я хотел бы иметь плавный горизонтальный список со статическим «Просмотреть все» справа. Если возможно, я бы хотел, чтобы это был один неупорядоченный список.

Item One | Item Two | Item Three | Item Four | Item Five | Item Six | Browse All

Единственная загвоздка в том, что когда экран сужается, я бы хотел скрыть крайние правые элементы, когда места нет (исключая: последний).

Item One | Item Two | Item Three | Item Four | Browse All

Есть ли способ сделать это с помощью CSS или мне нужно немного разобраться в JavaScript? Если мне нужно использовать JavaScript, каков наилучший подход? Я могу определить, сколько из них видимо, и установить ширину на каждом? Я пытался использовать CSS Media Queries, но переменная длина символов элементов списка усложняла задачу.

Любая помощь будет принята с благодарностью.

Ответы [ 3 ]

2 голосов
/ 18 августа 2011

Оставляет пробел между последним элементом и Browser 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>
1 голос
/ 18 августа 2011

Вот решение JavaScript + jQuery: 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();
0 голосов
/ 02 февраля 2015 
<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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...