Выдвигающееся меню в виджете

автор vera350 Июль 15th 2012, 19:17

Ребятки,подскажите как в виджете сделать выдвигающееся меню.У меня вот к примеру менюшка есть,но хочется чтобы при наведении мышки на один пункт(например "рамочки" выдвигались подкатигории этого форума"детские,женские,мужские и т д ".Возможно ли это сделать ?
Выдвигающееся меню в виджете 7b659f80a3c87d23f117b0fe3526cfe2

Выдвигающееся меню в виджете 7b659f80a3c87d23f117b0fe3526cfe2

.

автор **Dana Domirani** Июль 15th 2012, 19:26

Куда именно выдвигались — вниз или вбок?

автор vera350 Июль 15th 2012, 19:37

Желательно вниз.Но можно и вбок yes

автор vera350 Июль 16th 2012, 22:57

Мне ответят ?Помогитеее.

автор vera350 Июль 17th 2012, 23:34

Вы хоть напишите,можно ли так сделать ,или нет sad

автор **Dana Domirani** Июль 18th 2012, 00:56

Попробуйте такой вариант:

1) В виджет (главной страницы или портала) добавьте код меню

Код:: <ul id="navz"> <li><a href="*">Категория 1</a></li> <li><a href="#" class="sub" tabindex="1">Категория 2</a> <ul> <li><a href="*">Пункт 2.1</a></li> <li><a href="*">Пункт 2.2</a></li> <li><a href="*">Пункт 2.3</a></li> </ul> </li> <li><a href="#" class="sub" tabindex="1">Категория 3</a> <ul> <li><a href="*">Пункт 3.1</a></li> <li><a href="*">Пункт 3.2</a></li> <li><a href="*">Пункт 3.3</a></li> </ul> </li> </ul>

Подставьте нужные ссылки (вместо *) для не разворачивающейся Категории 1 и всех пунктов. Измените заголовки разделов и подразделов (вместо надписей Категория 1, Категория 2, Пункт 2.1 и т.д.). Сохраните.

2) В CSS добавьте настройки для меню:

Код:: #navz, #navz ul { list-style:none; padding:0; width:100%; } #navz ul { position:relative; z-index:-1; } #navz li { position:relative; z-index:100; } #navz ul li { margin-top:-23px; -moz-transition: 0.2s linear 0.2s; -ms-transition: 0.2s linear 0.4s; -o-transition: 0.2s linear 0.2s; -webkit-transition: 0.2s linear 0.2s; transition: 0.2s linear 0.2s; } #navz li a { background-color:#d4d5d8; color:#000; display:block; font-size:12px; font-weight:bold; line-height:28px; outline:0; padding-left:20px; text-decoration: none; } #navz li a.sub { background: #d4d5d8 url("http://i44.servimg.com/u/f44/16/54/26/99/check10.png") no-repeat left center; } #navz li a + img { cursor:pointer; display:none; height:28px; left:0; position:absolute; top:0; width:200px; } #navz li a:hover { background-color:#bcbdc1; text-decoration:none !important; } #navz ul li a { background-color:#eee; border-bottom:1px solid #ccc; color:#000; font-size:11px; line-height:22px; } #navz ul li a:hover { background-color:#ddd; color:#444; text-decoration:none !important; } #navz a.sub:focus { background:#d4d5d8 url("http://i44.servimg.com/u/f44/16/54/26/99/check10.png") no-repeat left center; outline:0; } #navz a:focus ~ ul li { margin-top:0; -moz-transition: 0.2s linear; -ms-transition: 0.2s linear; -o-transition: 0.2s linears; -webkit-transition: 0.2s linears; transition: 0.2s linear; } #navz a.sub:active { background:#bcbdc1; outline:0; } #navz a:active ~ ul li { margin-top:0; } #navz ul:hover { display:block; }

Выдвигающееся меню в виджете

Выдвигающееся меню в виджете

Re: Выдвигающееся меню в виджете

Re: Выдвигающееся меню в виджете

Re: Выдвигающееся меню в виджете

Re: Выдвигающееся меню в виджете

Re: Выдвигающееся меню в виджете