Амазон меню

Тема в разделе "OpenCart", создана пользователем Volsky, 12 фев 2013.

  1. Volsky

    Volsky

    Регистрация:
    22 ноя 2012
    Сообщения:
    192
    Симпатии:
    10
    Интересует боковое меню как на амазоне, насколько слышал есть модуль, есть у когото он в шаре?
    теперь второе получаеться чтото похожее используя jquery и css

    HTML код
    Разметка нашего меню будет очень проста. И Вы без труда сможете туда добавить свои пункты меню (если Вы конечно хоть немного знакомы с html и css в нашел случае в tpl).

    Вставить в удобную область тема/template/common/header.tpl

    <div class="dropdown">
    <a class="account" >Меню</a>
    <div class="submenu">
    <ul class="root">
    <li ><a href="#1" >Произвольно1</a></li>
    <li ><a href="#2" >Произвольно2</a></li>
    <li ><a href="#3">Произвольно3</a></li>
    <li ><a href="#4">Произвольно4</a></li>
    // и т.д.
    </ul>
    </div>
    </div>


    Далее необходимо создать javascript и внести его в каталог тема/template/common/header.tpl


    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/
    libs/jquery/1.6.2/jquery.min.js
    "></script>;
    <script type="text/javascript" >
    $(document).ready(function()
    {

    $(".account").click(function()
    {
    var X=$(this).attr('id');
    if(X==1)
    {
    $(".submenu").hide();
    $(this).attr('id', '0');
    }
    else
    {
    $(".submenu").show();
    $(this).attr('id', '1');
    }

    });

    //Клик мыши на подменю
    $(".submenu").mouseup(function()
    {
    return false
    });

    // Клик мышки на ссылку My Account
    $(".account").mouseup(function()
    {
    return false
    });
    //Клик по странице
    $(document).mouseup(function()
    {
    $(".submenu").hide();
    $(".account").attr('id', '');
    });
    });
    </script>


    CSS стили код содержит все основные необходимые стили. и не трубет замены просто вставьте вконец .css

    .dropdown
    {
    color: #555;
    margin: 3px -22px 0 0;
    width: 143px;
    position: relative;
    height: 17px;
    text-align:left;
    }
    .submenu
    {
    background: #fff;
    position: absolute;
    top: -12px;
    left: -20px;
    z-index: 100;
    width: 135px;
    display: none;
    margin-left: 10px;
    padding: 40px 0 5px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    }
    .dropdown li a
    {
    color: #555555;
    display: block;
    font-family: arial;
    font-weight: bold;
    padding: 6px 15px;
    cursor: pointer;
    text-decoration:none;
    }

    .dropdown li a:hover
    {
    background:#155FB0;
    color: #FFFFFF;
    text-decoration: none;
    }
    a.account
    {
    font-size: 11px;
    line-height: 16px;
    color: #555;
    position: absolute;
    z-index: 110;
    display: block;
    padding: 11px 0 0 20px;
    height: 28px;
    width: 121px;
    margin: -11px 0 0 -10px;
    text-decoration: none;
    background: url(icons/arrow.png) 116px 17px no-repeat;
    cursor:pointer;
    }
    .root
    {
    list-style:none;
    margin:0px;
    padding:0px;
    font-size: 11px;
    padding: 11px 0 0 0px;
    border-top:1px solid #dedede;
    }


    Если у кого есть другие решения по поводу меню на амазоне готов выслушать, ну и конечно узнать по поводу модуля для opencart
     
  2. sjer

    sjer

    Регистрация:
    17 янв 2013
    Сообщения:
    108
    Симпатии:
    84
    Показал бы скрипшот чтоль...
     
    igorfelix нравится это.
  3. Rusik

    Rusik

    Регистрация:
    21 янв 2013
    Сообщения:
    162
    Симпатии:
    51
    Так а в чем смысл? )
    Есть куча всяких "мега меню", делаешь такое вертикальным - профит :smile:
     
  4. Volsky

    Volsky

    Регистрация:
    22 ноя 2012
    Сообщения:
    192
    Симпатии:
    10
    там скриншот заходим смотрим )