Перейти к содержимому


Выпадающее Меню


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 24

#1 Ast

Ast

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 253 сообщений

Отправлено 12 Март 2017 - 16:33

Аккаунт  SL-406930

Скопировал выпадающее меню с другого аккаунта. Все работает хорошо, но на этом сайте нужно, чтобы список выпадающего меню был не в столбик, как сейчас, а по всей ширине страницы, как это реализовано в аккаунте SL-406567
Помогите пожалуйста поправить. Спасибо.

#2 metry

metry

    Активный участник

  • Модераторы
  • 871 сообщений

Отправлено 13 Март 2017 - 21:04

Добрый вечер. Для внесения изменений зайдите в Редактор шаблонов-->main.css

и найдите:

#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 Ast

Ast

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 253 сообщений

Отправлено 13 Март 2017 - 21:32

Просмотр сообщенияmetry (13 Март 2017 - 21:04) писал:

Добрый вечер. Для внесения изменений зайдите в Редактор шаблонов-->main.css

и найдите:

#custommenu ul.mainnav li.level1 {list-style: none;width: 25%;}

замените на:

#custommenu ul.mainnav li.level1 {list-style: none;width: 30%;float: left;}
Добрый вечер. Сделал, стало шире, но не на всю страницу. И пункты меню не разворачиваются по ширине блока меню как в аккаунте SL-406567.

#4 metry

metry

    Активный участник

  • Модераторы
  • 871 сообщений

Отправлено 14 Март 2017 - 09:33

Добрый день. Прошу прощения, ошибку допущенную в инструкции исправил. Пожалуйста, попробуйте заново внести изменения.

#5 Ast

Ast

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 253 сообщений

Отправлено 14 Март 2017 - 09:56

Просмотр сообщенияmetry (14 Март 2017 - 09:33) писал:

Добрый день. Прошу прощения, ошибку допущенную в инструкции исправил. Пожалуйста, попробуйте заново внести изменения.

Здравствуйте. Теперь ширина получилась, только пункты меню выстраиваются в 3 колонки, надо бы в 4 чтобы не было пустоты справа.
Можно поправить?

#6 metry

metry

    Активный участник

  • Модераторы
  • 871 сообщений

Отправлено 14 Март 2017 - 10:21

Просмотр сообщенияAst (14 Март 2017 - 09:56) писал:

Здравствуйте. Теперь ширина получилась, только пункты меню выстраиваются в 3 колонки, надо бы в 4 чтобы не было пустоты справа.
Можно поправить?

в 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 Ast

Ast

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 253 сообщений

Отправлено 14 Март 2017 - 11:19

Просмотр сообщенияmetry (14 Март 2017 - 10:21) писал:

в 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;}
Спасибо огромное. Всё теперь отлично!

#8 Ast

Ast

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 253 сообщений

Отправлено 19 Март 2017 - 19:42

Здравствуйте

Обнаружил такую проблему:
1. В моем аккаунте SL-368333 при сужении браузера ( например 1024x600), шрифт меню уменьшается, и верстка меню остается неизменной. Если продолжать сужать окно браузера, меню меняется на мобильную верстку. Всё отлично.
2. В аккаунте SL-406567 почему-то так не работает. При сужении окна браузера  (например 1024x600) размер шрифта меню не уменьшается, и меню становится в 2 строки, причем нижняя строка показывается в половину шрифта. (смотрите скрин)
3. Если сузить браузер до предела то в аккаунте SL-368333 опять же все правильно, телефон показывается ровно под логотипом.
В аккаунте SL-406567 телефон залезает на логотип.  (смотрите скрин)

Странно. Вроде бы шаблон один и тот же, только первый аккаунт был сделан год назад а второй только что. У них разная верстка?
Что хотелось бы: сделать чтобы меню в аккаунте SL-406567 работало так же как в аккаунте SL-368333. При сужении окна браузера меню оставалось в одну строку, а при переходе на мобильную верстку телефон показывался под логотипом. Буду очень благодарен за помощь.

#9 Ast

Ast

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 253 сообщений

Отправлено 21 Март 2017 - 09:31

еще актуально

#10 Ast

Ast

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 253 сообщений

Отправлено 22 Март 2017 - 12:26

и сегодня актуально :)

#11 metry

metry

    Активный участник

  • Модераторы
  • 871 сообщений

Отправлено 22 Март 2017 - 14:23

Добрый день. Извините за долгое ожидание ответа. Для внесения изменений зайдите в Редактор шаблонов-main.css

и в конце кода вставьте:

@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 Ast

Ast

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 253 сообщений

Отправлено 22 Март 2017 - 14:44

Просмотр сообщенияmetry (22 Март 2017 - 14:23) писал:

Добрый день. Извините за долгое ожидание ответа. Для внесения изменений зайдите в Редактор шаблонов-main.css

и в конце кода вставьте:

@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 Ast

Ast

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 253 сообщений

Отправлено 12 Май 2017 - 11:34

Аккаунт SL-406930
Здравствуйте
На сайте выпадающее меню. Можно ли сделать чтобы один из пунктов меню был не кликабельным. Т.е. при клике не было перехода на страницу , но при наведении мышки появлялось выпадающее меню? Спасибо

#14 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 12 Май 2017 - 12:48

Просмотр сообщенияAst (12 Май 2017 - 11:34) писал:

Аккаунт SL-406930
Здравствуйте
На сайте выпадающее меню. Можно ли сделать чтобы один из пунктов меню был не кликабельным. Т.е. при клике не было перехода на страницу , но при наведении мышки появлялось выпадающее меню? Спасибо

Здравствуйте.
В шаблоне 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 Ast

Ast

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 253 сообщений

Отправлено 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>

Спасибо, все получилось. Еще подскажите пожалуйста где уменьшить высоту фона меню (скрин прилагаю)

Прикрепленные изображения

  • px.jpg


#16 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 12 Май 2017 - 13:56

Просмотр сообщенияAst (12 Май 2017 - 13:20) писал:

Спасибо, все получилось. Еще подскажите пожалуйста где уменьшить высоту фона меню (скрин прилагаю)

Внес Вам правки в шаблон main.css для верхнего меню

Прикрепленные изображения

  • Screenshot.png


#17 Ast

Ast

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 253 сообщений

Отправлено 12 Май 2017 - 14:09

Просмотр сообщенияFirefly (12 Май 2017 - 13:56) писал:

Внес Вам правки в шаблон main.css для верхнего меню

Отлично, но на внутренних страницах в дескпотной и мобильной версии над меню появилась серая полоса, которая в мобильной версии наслаивается на телефон, а низ меню в мобильной версии наезжает на хлебные крошки. Помогите пожалуйста исправить это. Спасибо

Прикрепленные изображения

  • px2.jpg
  • px3.jpg


#18 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 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 Ast

Ast

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 253 сообщений

Отправлено 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 Mr.Nito

Mr.Nito

    Активный участник

  • Модераторы
  • 1 364 сообщений

Отправлено 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 как высота синего фона. Теперь серый фон не лезет сверху синего. Осталось найти как сделать чтобы в мобильной версии синий фон не сползал на хлебные крошки
Отображение подобное скриншотам выше сейчас на сайте не обнаружил, смотрел на произвольных страницах.Небольшая серая полоса появилась на разрешении ниже 1199px
Уточните страницу, на которой нарушается отображение.

В main.css

после
@media all and (max-width: 1199px) {
добавьте
#breadcrumbs:before {top:-75px}

Прикрепленные изображения

  • 13-05-2017 10-58-34.jpg





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных