hover эффект для меню

[SKA]

Необходимо реализовать hover эффект для меню. Я так понял на css такое не сделать. Может кто-нибудь подскажет как реализовать подобное на jquery

<style>
.icon-menu, .menu {
width:400px;
}
.icon-menu {
border:1px solid green;
}
</style>
<h3>Меню в обычном состоянии</h3>
<ul class="menu">
<li><a href="#">Категория 1</a></li>
<li><a href="#">Категория 2</a></li>
<li><a href="#">Категория 3</a></li>
<li><a href="#">Категория 4</a></li>
<li><a href="#">Категория 5</a></li>
</ul>
<h3>Меню при наведении должно становиться таким. Появляются доп. пункты меню и рамка</h3>
<ul class="icon-menu">
<li><a href="#">Категория 1</a></li>
<li><a href="#">Категория 2</a></li>
<li><a href="#">Категория 3</a></li>
<li><a href="#">Категория 4</a></li>
<li><a href="#">Категория 5</a></li>
<li><a href="#">Категория 6</a></li>
<li><a href="#">Категория 7</a></li>
<li><a href="#">Категория 8</a></li>
</ul>

 

[D'Jack]

Необходимо реализовать hover эффект для меню. Я так понял на css такое не сделать. Может кто-нибудь подскажет как реализовать подобное на jquery

<style>
.icon-menu, .menu {
width:400px;
}
.icon-menu {
border:1px solid green;
}
</style>
<h3>Меню в обычном состоянии</h3>
<ul class="menu">
<li><a href="#">Категория 1</a></li>
<li><a href="#">Категория 2</a></li>
<li><a href="#">Категория 3</a></li>
<li><a href="#">Категория 4</a></li>
<li><a href="#">Категория 5</a></li>
</ul>
<h3>Меню при наведении должно становиться таким. Появляются доп. пункты меню и рамка</h3>
<ul class="icon-menu">
<li><a href="#">Категория 1</a></li>
<li><a href="#">Категория 2</a></li>
<li><a href="#">Категория 3</a></li>
<li><a href="#">Категория 4</a></li>
<li><a href="#">Категория 5</a></li>
<li><a href="#">Категория 6</a></li>
<li><a href="#">Категория 7</a></li>
<li><a href="#">Категория 8</a></li>
</ul>

Если бы Вы описали что именно имеется ввиду под ховер эффектом, то помочь было бы проще, но если я правильно понял суть вопроса, вот ховер эффект без js и jq

Спойлер: ссылка

Для просмотра ссылки Войди или Зарегистрируйся

если Вы хотели достичь чего то другого, пишите подробнее и лучше с примерами на чужих сайтах, будем пытаться помочь.

 

[D'Jack]

Пример работы на чужом сайта

Да, спасибо, вот решение без js на чистом css

Спойлер: ссылка

Для просмотра ссылки Войди или Зарегистрируйся

 

[SKA]

Отбой, сам разобрался, делается с помощью псевдокласса :after и обычного hover на css. Спасибо за помощь

 

[UDAV]

изначально можно спрятать через hide ненужные пункты, а при наведение делать у них дисплей блок.

 

[SKA]

тогда придется указывать какие пункты прятать + jquery. В данном случае это необходимо просто как визуальный эффект

 

[UDAV]

зачем жквери? ну да, нужно будет указать какие пункты спрятать, а как скрипт должен угадать какие прятать?)))

 

[SKA]

Всё делается на css, решение нестандартное, сам бы не додумался. Jquery стараюсь по минимуму использовать

 

[keysol]

а можно еще реализовать смену текста на кнопке в меню, как Для просмотра ссылки Войди или Зарегистрируйся. есть Для просмотра ссылки Войди или Зарегистрируйся, с демо и инструкцией.

 

[Venegrad]

$("li").hover(function() {

if($(this).hasClass("hover-effect")) {
$(this).removeClass("hover-effect");
} else {
$(this).addClass("hover-effect");
}

});