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

Тема в разделе "JavaScript", создана пользователем SKA, 1 ноя 2014.

Модераторы: ZiX
  1. SKA

    SKA Постоялец

    Регистр.:
    25 окт 2012
    Сообщения:
    50
    Симпатии:
    71
    Необходимо реализовать hover эффект для меню. Я так понял на css такое не сделать. Может кто-нибудь подскажет как реализовать подобное на jquery
    HTML:
    <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>
     
  2. D'Jack

    D'Jack

    Регистр.:
    22 сен 2012
    Сообщения:
    335
    Симпатии:
    109
    Если бы Вы описали что именно имеется ввиду под ховер эффектом, то помочь было бы проще, но если я правильно понял суть вопроса, вот ховер эффект без js и jq


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

    D'Jack

    Регистр.:
    22 сен 2012
    Сообщения:
    335
    Симпатии:
    109
    Да, спасибо, вот решение без js на чистом css

     
    SKA нравится это.
  4. SKA

    SKA Постоялец

    Регистр.:
    25 окт 2012
    Сообщения:
    50
    Симпатии:
    71
    Отбой, сам разобрался, делается с помощью псевдокласса :after и обычного hover на css. Спасибо за помощь
     
    Последнее редактирование: 1 ноя 2014
  5. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    781
    Симпатии:
    153
    изначально можно спрятать через hide ненужные пункты, а при наведение делать у них дисплей блок.
     
  6. SKA

    SKA Постоялец

    Регистр.:
    25 окт 2012
    Сообщения:
    50
    Симпатии:
    71
    тогда придется указывать какие пункты прятать + jquery. В данном случае это необходимо просто как визуальный эффект
     
  7. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    781
    Симпатии:
    153
    зачем жквери? ну да, нужно будет указать какие пункты спрятать, а как скрипт должен угадать какие прятать?)))
     
  8. SKA

    SKA Постоялец

    Регистр.:
    25 окт 2012
    Сообщения:
    50
    Симпатии:
    71
    Всё делается на css, решение нестандартное, сам бы не додумался. Jquery стараюсь по минимуму использовать
     
    TrueBit нравится это.
  9. keysol

    keysol Писатель

    Регистр.:
    23 янв 2008
    Сообщения:
    4
    Симпатии:
    0
    а можно еще реализовать смену текста на кнопке в меню, как тут. есть плагин, с демо и инструкцией.
     
  10. Venegrad

    Venegrad Создатель

    Регистр.:
    16 янв 2014
    Сообщения:
    10
    Симпатии:
    1
    $("li").hover(function() {

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

    });