Вопрос по iOC7 шаблону

A

and1

Постоялец
Регистрация
24 Июл 2011
Сообщения
96
Реакции
14
Возник вопрос уже голова кипит.

Вот код меню из 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, перекидывает на нижнее меню)
 
Последнее редактирование:
для начала, убрать кучу ссылок и распределить их в выпадающие меню
как вариант сделать две кнопки - самсунг и айфон при наведении на которые будут выпадать ваши - черепа, цветы etc
ну или хотя бы добавить z-index:дохрена; чтобы кнопки не перекрывали выпадающее меню, выбрать же ничего невозможно в верхнем ряду

ЗЫ так, для справки, а почему у вас логотип представляет из себя рубашку с галстуком, а на витрине чехлы для телефонов?
 
ultrarare написал(а):
для начала, убрать кучу ссылок и распределить их в выпадающие меню
как вариант сделать две кнопки - самсунг и айфон при наведении на которые будут выпадать ваши - черепа, цветы etc
ну или хотя бы добавить z-index:дохрена; чтобы кнопки не перекрывали выпадающее меню, выбрать же ничего невозможно в верхнем ряду

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

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

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

лень разбираться, но проблема полагаю в position
 
Тему можно закрыть вопрос решил так:
Код: 
.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. Это только у меня в редакторе нету кнопок спойлер и код или это у всех?
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху