Горизонтальное Резиновое Меню

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем eleonore, 28 апр 2013.

  1. eleonore

    eleonore New Member

    Регистрация:
    6 апр 2013
    Сообщения:
    4
    Симпатии:
    0
    Использую display:table; и display:table-cell. Подскажите,пожалуйста,что делать,если в некоторых пунктах меню два слова,а в некоторых одно??"Двухсловесные" пункты при изменении размеров браузера скачут очень не красиво.

    При разрешении от 1024 и больше все хорошо:[​IMG]
    Когда сужается меньше 1024px происходит следующее:[​IMG]
    Задала white-space:nowrap для li, помогло,слова перестали уходить друг под друга.
    Но теперь при сужении окна появляется огромная полоса прокрутки:[​IMG]
    Как сделать так,чтобы меню плавно сужалось и расширялось в зависимости от разрешения??
    html:
    <nav>
    <ul class="navigation">
    <li><a href="#">SEARCH AIRPLANES</a></li>
    <li>|</li>
    <li><a href="#">RESTORATION</a></li>
    <li>|</li>
    <li><a href="#">MAINTENANCE</a></li>
    <li>|</li>
    <li><a href="#">EXHIBITIONS & AIRSHOW</a></li>
    <li>|</li>
    <li><a href="#">CONTACTS AND FEEDBACK</a></li>
    </ul>
    </nav>
    css:

    ul.navigation{
    display:table;
    width:100%;
    }
    ul.navigation li{
    display:table-cell;
    padding:10px;
    text-align:center;
    white-space:nowrap;
    }


    Нашла ещё вариант!!
    html:

    <div class="navig">

    <a href="#">SEARCH AIRPLANES</a>|
    <a href="#">RESTORATION</a>|
    <a href="#">MAINTENANCE</a>|
    <a href="#">EXHIBITIONS & AIRSHOW</a>|
    <a href="#">CONTACTS AND FEEDBACK</a>
    <span class="empty"></span> <!-- элемент, занимающий вторую строку -->
    </div>

    css:

    div.navig{
    width: 90%; /* ширина меню */
    margin: 0 auto; /* центрирование обертки меню */
    text-align: justify; /* растягиваем содержимое меню */
    overflow: hidden; /* скрываем не поместившиеся пункты */
    }
    div.navig a{
    text-decoration: none; /* убираем подчеркивание ссылки */
    display: inline-block; /* если больше 1 слова в пункте */
    color:#47566b; /* цвет ссылок */
    width:18%;
    text-align:center;
    vertical-align:top;
    }
    .empty{
    width: 100%;
    display: inline-block;
    }
    Но при сужении на 1024px слова падают друг под друга,что мне кажется не слишком красиво,хотя вроде и ничего,но все же хочется,чтобы все шло в одну строчку:[​IMG]
    О меньших расширениях я молчу,там вообще все в кучу становится.

    Я пробовала nowrap,проблемы это моей не решает.при 1024px получаю следующее:[​IMG]
    может я вообще не тем путем иду?... ((((
     
  2. EmptyR

    EmptyR Веб мастер

    Регистрация:
    6 окт 2010
    Сообщения:
    221
    Симпатии:
    0
    Мне кажется, что надо подключать так же и JavaScript сюда. Вот что будет, если ужать настолько, что не будет помещаться одно единственное слово, изначально длинное? Да, начнётся фигня полнейшая. Я думаю, надо написать скрипт, который при достижении ширины окна меньше некоторой уменьшает пропорционально сам шрифт списка. Иначе, честно говоря, не знаю, как тут ещё решить проблему.

    "Не пытайтесь впихнуть невпи*цензура*ое" (С)
     
  3. eleonore

    eleonore New Member

    Регистрация:
    6 апр 2013
    Сообщения:
    4
    Симпатии:
    0
    Спасибо! :maybe:

    Добавлено:
    Спасибо! :)
     

Поделиться этой страницей