Помощь Вопрос по iOC7 шаблону

Тема в разделе "Opencart", создана пользователем and1, 16 май 2014.

Информация :
Внимание форумчане! При создании тем, или выкладывании какой-либо информации проверьте в какой ветке форума вы находитесь! Не путайте Opencart и Opencart2. При несоблюдении данного условия выносится соответствующее наказание! И потом не говорите что вас НЕ ПРЕДУПРЕЖДАЛИ! По возможности используйте обменники mail, yandex, google, dropbox, rghost Дабы избежать просьб перезалить и проблем с рекламой!
Модераторы: ZiX
  1. and1

    and1 Постоялец

    Регистр.:
    24 июл 2011
    Сообщения:
    96
    Симпатии:
    11
    Возник вопрос уже голова кипит.

    Вот код меню из css:
    /* MENU */
    .primary-define #menu {
    text-align: left;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    }
    .primary-define #menu #btn-mobile-toggle {
    color: #fff;
    display: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 120%;
    position: relative;
    border: 2px solid #fff;
    padding: 7px 20px 9px 20px;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    }
    .primary-define #menu #btn-mobile-toggle:before {
    top: 50%;
    right: 5px;
    content: "";
    width: 30px;
    height: 30px;
    margin-top: -15px;
    position: absolute;
    background: url(../image/icons/icon-toggle-nav-white.png) right center no-repeat;
    transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    }
    .primary-define #menu #btn-mobile-toggle.expand:before {
    transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    }
    .primary-define .mainmenu {
    margin: 0;
    padding: 0;
    }
    .primary-define .mainmenu li {
    margin: 0;
    padding: 0;
    position: relative;
    list-style-type: none;
    }
    .primary-define .mainmenu > li {
    float: left;
    margin: 0 2px;
    padding: 15px 0;
    }
    .primary-define .mainmenu li > .btn-expand-menu {
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
    display: none;
    cursor: pointer;
    position: absolute;
    background: url(../image/icons/icon-plus-dark.png) center center no-repeat;
    transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    }
    .primary-define .mainmenu li > .btn-expand-menu:hover {
    background: rgba(0, 0, 0, 0.2) url(../image/icons/icon-plus-light.png) center center no-repeat;
    }
    .primary-define .mainmenu li.expand > .btn-expand-menu {
    background: url(../image/icons/icon-minus-dark.png) center center no-repeat;
    }
    .primary-define .mainmenu li.expand > .btn-expand-menu:hover {
    background: rgba(0, 0, 0, 0.2) url(../image/icons/icon-minus-light.png) center center no-repeat;
    }
    .primary-define .mainmenu > li > .btn-expand-menu,
    .primary-define .mainmenu > li > .btn-expand-menu:hover {
    height: 39px;
    background: url(../image/icons/icon-plus-light.png) center center no-repeat;
    }
    .primary-define .mainmenu > li.expand > .btn-expand-menu,
    .primary-define .mainmenu > li.expand > .btn-expand-menu:hover {
    background: url(../image/icons/icon-minus-light.png) center center no-repeat;
    }
    .primary-define .mainmenu li a {
    color: #555;
    display: block;
    font-size: 15px;
    padding: 15px 20px;
    text-decoration: none;
    }
    .primary-define .mainmenu > li > a {
    font-size: 16px;
    line-height: 120%;
    padding: 7px 20px 9px 20px;
    border: 2px solid transparent;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    }
    .primary-define .mainmenu li .dropdown-container {
    top: 110%;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    }
    .primary-define .mainmenu li .dropdown {
    background-color: #fff;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
    }
    .primary-define .mainmenu li:hover > .dropdown-container {
    top: 0;
    opacity: 1;
    visibility: visible;
    }
    .primary-define .mainmenu > li:hover > .dropdown-container {
    top: 100%;
    }
    .primary-define .mainmenu .sublevel {
    margin: 0;
    float: left;
    width: 300px;
    background-color: #fff;
    }
    .primary-define .mainmenu .sublevel li a {
    border-bottom: 1px solid #eee;
    }
    .primary-define .mainmenu .sublevel > li:last-child > a {
    border: none;
    }
    .primary-define .mainmenu .sublevel li.parent > a {
    padding-right: 18px;
    background-repeat: no-repeat;
    background-position: 95% center;
    background-image: url(../image/icons/icon-toggle-nav.png);
    }
    .primary-define .mainmenu .sublevel li:hover > a,
    .primary-define .mainmenu .sublevel li.active > a {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    }
    .primary-define .mainmenu .sublevel .dropdown-container {
    top: 10%;
    left: 100%;
    z-index: 1;
    }

    Подскажите как сделать, чтобы все было красиво? (Если не совсем понятно, попробуйте открыть верхнее меню когда всплывают вкладки iphone и samsung, перекидывает на нижнее меню)
     
    Последнее редактирование: 26 май 2014
  2. ultra

    ultra дизигнитор дизигнирующий дизигны

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    214
    Симпатии:
    308
    для начала, убрать кучу ссылок и распределить их в выпадающие меню
    как вариант сделать две кнопки - самсунг и айфон при наведении на которые будут выпадать ваши - черепа, цветы etc
    ну или хотя бы добавить z-index:дохрена; чтобы кнопки не перекрывали выпадающее меню, выбрать же ничего невозможно в верхнем ряду

    ЗЫ так, для справки, а почему у вас логотип представляет из себя рубашку с галстуком, а на витрине чехлы для телефонов?
     
  3. and1

    and1 Постоялец

    Регистр.:
    24 июл 2011
    Сообщения:
    96
    Симпатии:
    11
    Уже пробовал
    .primary-define .mainmenu .sublevel .dropdown-container {
    top: 10%;
    left: 100%;
    z-index: 999999999999999;
    }
    не помогает
    Сейчас попробую уговорить владельца, сделать категорий поменьше, мб повезет, но вопрос открыт, хотелось бы все таки сделать, чтобы и 2-й уровень меню работал как надо.

    По поводу галстука, так это такой маркетинговый ход, мне тоже не понятный! Гардероб для вашего мобильного.
     
  4. ultra

    ultra дизигнитор дизигнирующий дизигны

    Moderator
    Регистр.:
    15 ноя 2011
    Сообщения:
    214
    Симпатии:
    308
    лень разбираться, но проблема полагаю в position
     
  5. kabasik

    kabasik Полиционер

    Регистр.:
    15 мар 2012
    Сообщения:
    223
    Симпатии:
    68
    and1 нравится это.
  6. and1

    and1 Постоялец

    Регистр.:
    24 июл 2011
    Сообщения:
    96
    Симпатии:
    11
    Тему можно закрыть вопрос решил так:
    Код:
    .primary-define .mainmenu li .dropdown-container {
       top: 110%;
       opacity: 0;
       position: absolute;
       visibility: hidden;
       transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
       -webkit-transition: 0.3s ease-in-out;
       z-index: 2;
    }
    
    P.S. Это только у меня в редакторе нету кнопок спойлер и код или это у всех?