Выпадающее Меню
#1
Отправлено 12 Март 2017 - 16:33
Скопировал выпадающее меню с другого аккаунта. Все работает хорошо, но на этом сайте нужно, чтобы список выпадающего меню был не в столбик, как сейчас, а по всей ширине страницы, как это реализовано в аккаунте SL-406567
Помогите пожалуйста поправить. Спасибо.
#2
Отправлено 13 Март 2017 - 21:04
и найдите:
#custommenu ul.mainnav .linkswrapper li.level1{width:100%;}
замените на:
#custommenu ul.mainnav .linkswrapper li.level1{list-style: none;width: 30%;float: left;}
найдите:
#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;top: 99%;background: #ffffff;border-top: 1px solid #d5d5d5;z-index: 999;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
замените на:
#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;width:100%; top: 99%;background: #ffffff;border-top: 1px solid #d5d5d5;z-index: 999;visibility: hidden;opacity: 0;filter: alpha(opacity=0);-khtml-opacity: 0;-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);-webkit-transform: scale(0.5);-moz-transform: scale(0.5);-ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center 10%;-moz-transform-origin: center 10%;transform-origin: center 10%;-webkit-transition: all 0.25s linear;-moz-transition: all 0.25s linear;-o-transition: all 0.25s linear;transition: all 0.25s linear;}
Сообщение отредактировал metry: 14 Март 2017 - 09:05
Прошу прощения, ошибку исправил. Пожалуйста, попробуйте заново выполнить инструкцию.
#3
Отправлено 13 Март 2017 - 21:32
metry (13 Март 2017 - 21:04) писал:
и найдите:
#custommenu ul.mainnav li.level1 {list-style: none;width: 25%;}
замените на:
#custommenu ul.mainnav li.level1 {list-style: none;width: 30%;float: left;}
#4
Отправлено 14 Март 2017 - 09:33
#5
Отправлено 14 Март 2017 - 09:56
metry (14 Март 2017 - 09:33) писал:
Здравствуйте. Теперь ширина получилась, только пункты меню выстраиваются в 3 колонки, надо бы в 4 чтобы не было пустоты справа.
Можно поправить?
#6
Отправлено 14 Март 2017 - 10:21
Ast (14 Март 2017 - 09:56) писал:
Можно поправить?
в main. css найдите:
#custommenu ul.mainnav .linkswrapper li.level1{list-style: none;width: 30%;float: left;}
замените на:
#custommenu ul.mainnav .linkswrapper li.level1{list-style: none;width: 25%;float: left;}
#7
Отправлено 14 Март 2017 - 11:19
metry (14 Март 2017 - 10:21) писал:
#custommenu ul.mainnav .linkswrapper li.level1{list-style: none;width: 30%;float: left;}
замените на:
#custommenu ul.mainnav .linkswrapper li.level1{list-style: none;width: 25%;float: left;}
#8
Отправлено 19 Март 2017 - 19:42
Обнаружил такую проблему:
1. В моем аккаунте SL-368333 при сужении браузера ( например 1024x600), шрифт меню уменьшается, и верстка меню остается неизменной. Если продолжать сужать окно браузера, меню меняется на мобильную верстку. Всё отлично.
2. В аккаунте SL-406567 почему-то так не работает. При сужении окна браузера (например 1024x600) размер шрифта меню не уменьшается, и меню становится в 2 строки, причем нижняя строка показывается в половину шрифта. (смотрите скрин)
3. Если сузить браузер до предела то в аккаунте SL-368333 опять же все правильно, телефон показывается ровно под логотипом.
В аккаунте SL-406567 телефон залезает на логотип. (смотрите скрин)
Странно. Вроде бы шаблон один и тот же, только первый аккаунт был сделан год назад а второй только что. У них разная верстка?
Что хотелось бы: сделать чтобы меню в аккаунте SL-406567 работало так же как в аккаунте SL-368333. При сужении окна браузера меню оставалось в одну строку, а при переходе на мобильную верстку телефон показывался под логотипом. Буду очень благодарен за помощь.
#9
Отправлено 21 Март 2017 - 09:31
#10
Отправлено 22 Март 2017 - 12:26
#11
Отправлено 22 Март 2017 - 14:23
и в конце кода вставьте:
@media (max-width: 1199px){ #custommenu ul.mainnav li.level0 > a { font-size: 125%; padding: 6px; } @media (max-width: 767px){ #header ul.contact-us-now li { float: none; line-height: 26px; margin-left: 15px; padding-left: 28px; font-size: 170%; } ul.contact-us-now { position: absolute; top: 86px; left: -1px; width: 100% !important; text-align: center; } }
#12
Отправлено 22 Март 2017 - 14:44
metry (22 Март 2017 - 14:23) писал:
и в конце кода вставьте:
@media (max-width: 1199px){ #custommenu ul.mainnav li.level0 > a { font-size: 125%; padding: 6px; } @media (max-width: 767px){ #header ul.contact-us-now li { float: none; line-height: 26px; margin-left: 15px; padding-left: 28px; font-size: 170%; } ul.contact-us-now { position: absolute; top: 86px; left: -1px; width: 100% !important; text-align: center; } }
#13
Отправлено 12 Май 2017 - 11:34
Здравствуйте
На сайте выпадающее меню. Можно ли сделать чтобы один из пунктов меню был не кликабельным. Т.е. при клике не было перехода на страницу , но при наведении мышки появлялось выпадающее меню? Спасибо
#14
Отправлено 12 Май 2017 - 12:48
Ast (12 Май 2017 - 11:34) писал:
Здравствуйте
На сайте выпадающее меню. Можно ли сделать чтобы один из пунктов меню был не кликабельным. Т.е. при клике не было перехода на страницу , но при наведении мышки появлялось выпадающее меню? Спасибо
Здравствуйте.
В шаблоне HTML код:
<a href="{menu.mid.links.URL}" {% IF menu.mid.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.mid.links.TITLE %}title="{menu.mid.links.TITLE}"{% ENDIF %}>{menu.mid.links.NAME}</a>
Замените на:
<a {% IFNOT menu.mid.links.NAME=Автосервис %}href="{menu.mid.links.URL}"{% ENDIF %} {% IF menu.mid.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.mid.links.TITLE %}title="{menu.mid.links.TITLE}"{% ENDIF %}>{menu.mid.links.NAME}</a>
#15
Отправлено 12 Май 2017 - 13:20
Firefly (12 Май 2017 - 12:48) писал:
В шаблоне HTML код:
<a href="{menu.mid.links.URL}" {% IF menu.mid.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.mid.links.TITLE %}title="{menu.mid.links.TITLE}"{% ENDIF %}>{menu.mid.links.NAME}</a>
Замените на:
<a {% IFNOT menu.mid.links.NAME=Автосервис %}href="{menu.mid.links.URL}"{% ENDIF %} {% IF menu.mid.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.mid.links.TITLE %}title="{menu.mid.links.TITLE}"{% ENDIF %}>{menu.mid.links.NAME}</a>
Спасибо, все получилось. Еще подскажите пожалуйста где уменьшить высоту фона меню (скрин прилагаю)
#17
Отправлено 12 Май 2017 - 14:09
Firefly (12 Май 2017 - 13:56) писал:
Отлично, но на внутренних страницах в дескпотной и мобильной версии над меню появилась серая полоса, которая в мобильной версии наслаивается на телефон, а низ меню в мобильной версии наезжает на хлебные крошки. Помогите пожалуйста исправить это. Спасибо
#18
Отправлено 13 Май 2017 - 06:24
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
@media all and (max-width: 481px) {
после него пропишите:
#breadcrumbs:before {background-color: #fff;} #menu .inner:after {display:none;} #menu { max-height: 100%;} #mommenu { margin: 0;}
#19
Отправлено 13 Май 2017 - 09:35
Vaccina (13 Май 2017 - 06:24) писал:
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
@media all and (max-width: 481px) {
после него пропишите:
#breadcrumbs:before {background-color: #fff;} #menu .inner:after {display:none;} #menu { max-height: 100%;} #mommenu { margin: 0;}
Спасибо, но:
1. фон под хлебными крошками должен оставаться серым. Проблема же не в этом. Проблема в том, из за уменьшения высоты синего фона, он "сполз" на хлебные крошки, а вы предложили просто перекрасить серый фон в белый.
2. Проблема существует и в десктопной версии, как показал в скринах
Надо бы какое-то другое решение.
Заменил в строчке
#breadcrumbs:before {background-color: #ebebeb; content: '';display: block;position: absolute;left: 0;right: 0;bottom: 0;top: -60px;z-index: -1;}
top-80 на top-60 как высота синего фона. Теперь серый фон не лезет сверху синего. Осталось найти как сделать чтобы в мобильной версии синий фон не сползал на хлебные крошки
#20
Отправлено 13 Май 2017 - 10:59
Ast (13 Май 2017 - 09:35) писал:
1. фон под хлебными крошками должен оставаться серым. Проблема же не в этом. Проблема в том, из за уменьшения высоты синего фона, он "сполз" на хлебные крошки, а вы предложили просто перекрасить серый фон в белый.
2. Проблема существует и в десктопной версии, как показал в скринах
Надо бы какое-то другое решение.
Заменил в строчке
#breadcrumbs:before {background-color: #ebebeb; content: '';display: block;position: absolute;left: 0;right: 0;bottom: 0;top: -60px;z-index: -1;}
top-80 на top-60 как высота синего фона. Теперь серый фон не лезет сверху синего. Осталось найти как сделать чтобы в мобильной версии синий фон не сползал на хлебные крошки
Уточните страницу, на которой нарушается отображение.
В main.css
после
@media all and (max-width: 1199px) {добавьте
#breadcrumbs:before {top:-75px}
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных