Меню как на сайте

Тема в разделе "Верстка", создана пользователем vojack, 18 сен 2014.

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

    vojack Постоялец

    Регистр.:
    11 окт 2009
    Сообщения:
    126
    Симпатии:
    9
    Как можно сделать меню как на приведеном образовательном сайте http://fizmat.by? Или может есть готовые решения, например для wordpress?
     
  2. funnywheel

    funnywheel

    Регистр.:
    6 авг 2010
    Сообщения:
    178
    Симпатии:
    111
    http://tympanus.net/Development/MultiLevelPushMenu/
     
    NikroVir нравится это.
  3. ddn128

    ddn128

    Регистр.:
    31 июл 2013
    Сообщения:
    374
    Симпатии:
    163
    NikroVir нравится это.
  4. mervinking

    mervinking Писатель

    Регистр.:
    16 авг 2012
    Сообщения:
    1
    Симпатии:
    2
    Посмотрите в сторону mmenu
     
  5. Артем222

    Артем222 Создатель

    Регистр.:
    31 июл 2013
    Сообщения:
    17
    Симпатии:
    2
  6. smerlol

    smerlol Создатель

    Регистр.:
    31 авг 2014
    Сообщения:
    26
    Симпатии:
    8
    А обычный рип уже не подходит? На fl.ru сделают за 10$
     
  7. Addtrust

    Addtrust Писатель

    Регистр.:
    12 ноя 2014
    Сообщения:
    1
    Симпатии:
    0
    Такого результата можно добиться и с помощью html+css. Обычно в таких случаях я делаю 2 картинки на одну кнопку. При наведении курсора мыши на одну картинку, появляется вторая. Получается эффект наведения на кнопку. Использовать можно атрибут hover.
     
  8. Spals

    Spals Создатель

    Регистр.:
    11 апр 2012
    Сообщения:
    14
    Симпатии:
    2
    Код:
    <style>
    
    li {list-style: none;float:left;margin-right:15px;}
    
    .block_img {width:200px;height:200px;background:url(http://fizmat.by/pic/tests_img/test3.png);}
    .block_img:hover {background:url(http://fizmat.by/pic/tests_img/test4.png);}
    
    
    </style>
    
    <div class="customer-grid">
        <ul class="clearfix">
            <li class="flip-card">
                <a href="">
                    <div class="block_img"></div>
                </a>
            </li>
    
            <li class="flip-card">
                <a href="">
                    <div class="block_img"></div>
                </a>
            </li>
           
            <li class="flip-card">
                <a href="">
                    <div class="block_img"></div>
                </a>
            </li>
           
           
    </div>
     
  9. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    319
    Симпатии:
    107
  10. winerror

    winerror

    Регистр.:
    9 май 2007
    Сообщения:
    155
    Симпатии:
    29
    Смотри в коде сайта, там же все на js написано.. все эллементарно..
    $(document).ready(function(){
    $("#headerToggleNav").click(function(){
    $(".index").toggleClass("main-nav-open");
    });
    });

    $(document).ready(function(){
    $("#navCloseBtn").click(function(){
    $(".index").removeClass("main-nav-open");
    });
    });