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

  • ZlOi PrOgraMMer

    (@zloi-programmer)


    12 лет, 8 месяцев назад

    Когда в меню становиться много пунктов и когда пробуешь уменьшить окно, некоторые пункты съезжают вниз, а нужно сделать чтобы меню уменьшалось и все пункты оставались в линию.
    Как это сделать ?

Просмотр 4 ответов — с 1 по 4 (всего 4)
  • skodnik

    (@skodnik)

    12 лет, 8 месяцев назад

    Скорее всего, у пунктов меню поля заданы фиксированными значениями, можно попробовать заменить их на процентные значения. Не видя предмет обсуждения не могу сказать точно.

    Автор ZlOi PrOgraMMer

    (@zloi-programmer)

    12 лет, 8 месяцев назад

    меню как стандартное уезжает вниз так и моё изменённое
    вот его CSS код:

    #mainmenu
{
    width: 100%;
}
#mainmenu ul
{
    list-style: none;
    display: table;
    padding: 5px 0px;
    margin: 0px auto;
}
#mainmenu li
{
    list-style: none;
    display: block;
    float: left;
    margin: 0px 1px;
}
#mainmenu li a
{
    display: block;
    float: left;
    height: 66px;
    color: #fff;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    background: url(/menu/mbleft1.png) no-repeat left;
    line-height: 43px;
    padding: 0px 0px 0px 7px;
    text-decoration: none;
}
#mainmenu li a span
{
    display: block;
    float: left;
    background: url(/menu/mbright1.png) no-repeat right;
    height: 66px;
    color: #fff;
    line-height: 43px;
    padding: 0px 14px 0px 6px;
}
#mainmenu li a:hover
{
    display: block;
    float: left;
    background: url(/menu/mbleft2.png) no-repeat left;
    height: 66px;
}
#mainmenu li a:hover span
{
    display: block;
    float: left;
    background: url(/menu/mbright2.png) no-repeat right;
    color: #fff;
    height: 66px;
}
#mainmenu li.current-menu-item a
{
    display: block;
    float: left;
    height: 66px;
    color: #fff;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    background: url(/menu/mbleft2.png) no-repeat left;
    line-height: 43px;
    padding: 0px 0px 0px 7px;
    text-decoration: none;
}
#mainmenu li.current-menu-item a span
{
    display: block;
    float: left;
    background: url(/menu/mbright2.png) no-repeat right;
    height: 66px;
    color: #fff;
    line-height: 43px;
    padding: 0px 14px 0px 6px;
}

    skodnik

    (@skodnik)

    12 лет, 8 месяцев назад

    Ок, считаем:

    1. #mainmenu li — слева 1, справа 1
    2. #mainmenu li a — слева 6, справа 0
    3. #mainmenu li a span — слева 6, справа 14

    Итого, для каждого блока пункта меню слева 13 пикселей, справа 15 пикселей. Я не вижу дизайна, но я могу предположить, что данные значения можно или сократить сразу, или заменить на %, или менять через @media (w3.org/TR/css3-mediaqueries).

    Можно пойти дальше и сделать, например так, чтобы у некоторых пунктов меню при уменьшении ширины экрана текстовые значения менялись на пиктограммки (например, домашняя/главная на значок домика и т.д.), т.е. вот так как я сделал для админбара, посмотрите — blog.verha.net/responsive-adminbar.html.

    Автор ZlOi PrOgraMMer

    (@zloi-programmer)

    12 лет, 8 месяцев назад

    спасибо, попробую на проценты поменять для начала может что и выйдет

Просмотр 4 ответов — с 1 по 4 (всего 4)
  • Тема «Горизонтальное меню в линию» закрыта для новых ответов.