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

xdivx

xdivx

Постоялец
Регистрация
25 Фев 2009
Сообщения
66
Реакции
4
Вот увидел у гугла такой пример Для просмотра ссылки Войди или Зарегистрируйся
поискал подобное для ждумлы и ненашел, причем выпадающее меню необязательно. Главное фиксированная ширина и длинные (в 2-3 слова ссылки) меню.
Подскажите, может из какого-нибудь слайдера можно в подобное меню адаптировать?
 
Если я правильно понял задачу, то подобного эффекта можно добиться при помощи стилей.
Для пункта меню выставляем стили:
Код: 
.menu-item {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-item:hover {
    width: 200px;
    text-overflow: clip;
}
 
vitmar написал(а):
Если я правильно понял задачу, то подобного эффекта можно добиться при помощи стилей.
Для пункта меню выставляем стили:
Код: 
.menu-item {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-item:hover {
    width: 200px;
    text-overflow: clip;
}
Нажмите для раскрытия...
Фиксированная ширина, автор имел ввиду общая, всего меню.
А menu-item по содержимому, 2-3 слова.
У вас получается сначала 100, наведешь 200
 
Фиксированная ширина, автор имел ввиду общая, всего меню.
А menu-item по содержимому, 2-3 слова.
У вас получается сначала 100, наведешь 200
Нажмите для раскрытия...
Так а что мешает поставить фиксированную ширину для меню? Выставляйте такую, как вам нужна.
Размеры в 100 и 200px я взял просто для примера. Необходимо поставить опять же свои.
Ширина в 2-3 слова будет зависеть от размера шрифта.
 
В :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
}
Чтобы анимация шла в обе стороны добавлять надо и просто в айтем, и в ховер
 
Сегодня попробую, спасибо.
а многоточее в сокращенных меню как можно сделать?
 
Вот меню хорошее акордион <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>[/spoil]
<CSS>
[spoil]#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;
}


Смайлик как то сам вставился!!! видимо символы совпали!!! Я тут не причем!!
 
про многоточие уже писали:
Код: 
overflow: hidden;
text-overflow: ellipsis;
подробнее можно прочитать Для просмотра ссылки Войди или Зарегистрируйся
но вообще не советую особо им пользоваться, потому что
а) мало где работает
б) обрезает часть слова, что не есть хорошо.
лучше через код делать обрезку перед пробелом и вставлять многоточие. тоже не идеал, но все же поприличнее
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху