Меню вида горизонтальный аккардион

Тема в разделе "Верстка", создана пользователем xdivx, 10 май 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. xdivx

    xdivx Создатель

    Регистр.:
    26 фев 2009
    Сообщения:
    48
    Симпатии:
    2
    Вот увидел у гугла такой пример https://support.google.com/adwords/?hl=ru
    поискал подобное для ждумлы и ненашел, причем выпадающее меню необязательно. Главное фиксированная ширина и длинные (в 2-3 слова ссылки) меню.
    Подскажите, может из какого-нибудь слайдера можно в подобное меню адаптировать?
     
  2. vitmar

    vitmar Постоялец

    Регистр.:
    27 апр 2012
    Сообщения:
    84
    Симпатии:
    40
    Если я правильно понял задачу, то подобного эффекта можно добиться при помощи стилей.
    Для пункта меню выставляем стили:
    Код:
    .menu-item {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .menu-item:hover {
        width: 200px;
        text-overflow: clip;
    }
     
  3. valweb

    valweb Постоялец

    Регистр.:
    20 май 2012
    Сообщения:
    55
    Симпатии:
    9
    Фиксированная ширина, автор имел ввиду общая, всего меню.
    А menu-item по содержимому, 2-3 слова.
    У вас получается сначала 100, наведешь 200
     
  4. vitmar

    vitmar Постоялец

    Регистр.:
    27 апр 2012
    Сообщения:
    84
    Симпатии:
    40
    Так а что мешает поставить фиксированную ширину для меню? Выставляйте такую, как вам нужна.
    Размеры в 100 и 200px я взял просто для примера. Необходимо поставить опять же свои.
    Ширина в 2-3 слова будет зависеть от размера шрифта.
     
  5. Viorteya

    Viorteya Создатель

    Регистр.:
    24 апр 2013
    Сообщения:
    14
    Симпатии:
    10
    В :hover значение ширины вообще можно auto поставить, чтобы не заморачиваться с вычислением фиксированной, вроде должно работать.
    А для большей схожести с примером можно еще добавить transition в 0.3-0.7 секунды на изменение ширины -)
    Код:
    .menu-item {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: width 1.0s ease
    }
    .menu-item:hover {
        width: auto;
        text-overflow: clip;
       transition: width 1.0s ease
    }
    
    Чтобы анимация шла в обе стороны добавлять надо и просто в айтем, и в ховер
     
  6. xdivx

    xdivx Создатель

    Регистр.:
    26 фев 2009
    Сообщения:
    48
    Симпатии:
    2
    Сегодня попробую, спасибо.
    а многоточее в сокращенных меню как можно сделать?
     
  7. Uniqcom

    Uniqcom Писатель

    Регистр.:
    11 май 2013
    Сообщения:
    6
    Симпатии:
    0
    Вот меню хорошее акордион <body>
    <ul id="nav">
    <li><a href="#"><img src="images/t1.png" /> Главная</a></li>
    <li><a href="#" class="sub" tabindex="1"><img src="images/t2.png" />HTML/CSS</a><img src="images/up.gif" alt="" />
    <ul>
    <li><a href="#"><img src="images/empty.gif" />Ссылка 1</a></li>
    <li><a href="#"><img src="images/empty.gif" />Ссылка 2</a></li>
    <li><a href="#"><img src="images/empty.gif" />Ссылка 3</a></li>
    <li><a href="#"><img src="images/empty.gif" />Ссылка 4</a></li>
    <li><a href="#"><img src="images/empty.gif" />Ссылка 5</a></li>
    </ul>
    </li>
    <li><a href="#" class="sub" tabindex="1"><img src="images/t3.png" />jQuery/JS</a><img src="images/up.gif" alt="" />
    <ul>
    <li><a href="#"><img src="images/empty.gif" />Ссылка 6</a></li>
    <li><a href="#"><img src="images/empty.gif" />Ссылка 7</a></li>
    <li><a href="#"><img src="images/empty.gif" />Ссылка 8</a></li>
    <li><a href="#"><img src="images/empty.gif" />Ссылка 9</a></li>
    <li><a href="#"><img src="images/empty.gif" />Ссылка 10</a></li>
    </ul>
    </li>
    <li><a href="#"><img src="images/t2.png" />PHP</a></li>
    <li><a href="#"><img src="images/t2.png" />MySQL</a></li>
    <li><a href="#"><img src="images/t2.png" />XSLT</a></li>
    </ul>

    </div>

    <CSS>
    #nav {
    border:3px solid #3e4547;

    box-shadow:2px 2px 8px #000000;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    }
    #nav, #nav ul {
    list-style:none;
    padding:0;
    width:200px;
    }
    #nav ul {
    position:relative;
    z-index:-1;
    }
    #nav li {
    position:relative;
    z-index:100;
    }
    #nav ul li {
    margin-top:-23px;

    -moz-transition: 0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
    }
    #nav li a {
    background-color:#d4d5d8;
    color:#000;
    display:block;
    font-size:12px;
    font-weight:bold;
    line-height:28px;
    outline:0;
    padding-left:15px;
    text-decoration:none;
    }
    #nav li a.sub {
    background:#d4d5d8 url("../images/down.gif") no-repeat;
    }
    #nav li a + img {
    cursor:pointer;
    display:none;
    height:28px;
    left:0;
    position:absolute;
    top:0;
    width:200px;
    }
    #nav li a img {
    border-width:0px;
    height:24px;
    line-height:28px;
    margin-right:8px;
    vertical-align:middle;
    width:24px;
    }
    #nav li a:hover {
    background-color:#bcbdc1;
    }
    #nav ul li a {
    background-color:#eee;
    border-bottom:1px solid #ccc;
    color:#000;
    font-size:11px;
    line-height:22px;
    }
    #nav ul li a:hover {
    background-color:#ddd;
    color:#444;
    }
    #nav ul li a img {
    background: url("../images/bulb.png") no-repeat;
    border-width:0px;
    height:16px;
    line-height:22px;
    margin-right:5px;
    vertical-align:middle;
    width:16px;
    }
    #nav ul li:nth-child(odd) a img {
    background:url("../images/bulb2.png") no-repeat;
    }
    #nav a.sub:focus {
    background:#bcbdc1;
    outline:0;
    }
    #nav a:focus ~ ul li {
    margin-top:0;

    -moz-transition: 0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
    }
    #nav a:focus + img, #nav a:active + img {
    display:block;
    }
    #nav a.sub:active {
    background:#bcbdc1;
    outline:0;
    }
    #nav a:active ~ ul li {
    margin-top:0;
    }
    #nav ul:hover {
    display:block;
    }



    Смайлик как то сам вставился!!! видимо символы совпали!!! Я тут не причем!!
     
  8. Viorteya

    Viorteya Создатель

    Регистр.:
    24 апр 2013
    Сообщения:
    14
    Симпатии:
    10
    про многоточие уже писали:
    Код:
    overflow: hidden;
    text-overflow: ellipsis;
    подробнее можно прочитать тут
    но вообще не советую особо им пользоваться, потому что
    а) мало где работает
    б) обрезает часть слова, что не есть хорошо.
    лучше через код делать обрезку перед пробелом и вставлять многоточие. тоже не идеал, но все же поприличнее