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


Выпадающее Вертикальное Меню

Выпадающее вертикальное меню

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

#1 Aleksandr

Aleksandr

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 77 сообщений
  • ГородСанкт-Петербург

Отправлено 23 Август 2016 - 13:03

Приветствую!
Знаю, что тема уже рассматривалась на форуме ... Пробовал по аналогии - пока не получается.

Подскажите, пожалуйста, какие изменения необходимо внести в код, чтобы сделать меню по структуре во вложении.
Заранее благодарю!

SL-392814

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

  • 2.jpg


#2 Danil

Danil

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

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

Отправлено 23 Август 2016 - 15:06

Просмотр сообщенияAleksandr (23 Август 2016 - 13:03) писал:

Приветствую!
Знаю, что тема уже рассматривалась на форуме ... Пробовал по аналогии - пока не получается.

Подскажите, пожалуйста, какие изменения необходимо внести в код, чтобы сделать меню по структуре во вложении.
Заранее благодарю!

SL-392814
Здравствуйте.
Изменения Вам произвел, теперь Вам нужно создать меню, которые будут играть роль вложенности, пример на скриншоте.
Screenshot_10.jpg

#3 Aleksandr

Aleksandr

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 77 сообщений
  • ГородСанкт-Петербург

Отправлено 23 Август 2016 - 19:46

Спасибо!!! А возможно сделать по стилю без потери в качестве?
То есть чтобы аккуратно вниз столбиком и не на всю длину + на синем фоне.

#4 Danil

Danil

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

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

Отправлено 23 Август 2016 - 19:53

Просмотр сообщенияAleksandr (23 Август 2016 - 19:46) писал:

Спасибо!!! А возможно сделать по стилю без потери в качестве?
То есть чтобы аккуратно вниз столбиком и не на всю длину + на синем фоне.
На данный момент выпадающее меню по ширина как пункты меню, что касается стилистики, то нужно более подробное описание необходимых изменений.
В конец main.css добавьте
#custommenu ul.mainnav li.parent ul.dropdown-menu {
	background: #197eaa;
	border: 0;
}
#custommenu ul.mainnav li.parent ul.dropdown-menu li a{
	color:#fff;
}


#5 Aleksandr

Aleksandr

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 77 сообщений
  • ГородСанкт-Петербург

Отправлено 24 Август 2016 - 16:01

Приветствую!

Еще просьба - требуется 7-ой пункт меню с выпадающим списком.
Я сам добавил код (по аналогии), но в разделе управления Меню 7-ой пункт так и не появился.

В итоге нужно следующее по структуре меню - см. вложение.

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

  • 4242.jpg


#6 Danil

Danil

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

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

Отправлено 24 Август 2016 - 16:12

Просмотр сообщенияAleksandr (24 Август 2016 - 16:01) писал:

Приветствую!

Еще просьба - требуется 7-ой пункт меню с выпадающим списком.
Я сам добавил код (по аналогии), но в разделе управления Меню 7-ой пункт так и не появился.

В итоге нужно следующее по структуре меню - см. вложение.
В разделе Сайт - Меню, я создавал Вам пункты меню вручную, т.к. иного способа нет.
В шаблоне html найдите код
			<li class="level0 parent">
			  <a href="ССЫЛКА НА СТРАИЦУ">меню 7</a>
				  <ul class="sub dropdown-menu">
					{% FOR menu %}
					  {% FOR vMenu6 %}
						{% FOR links %}
						  <li><a href="{menu.vMenu6.links.URL}" {% IF menu.vMenu7.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.vMenu7.links.TITLE %}title="{menu.vMenu7.links.TITLE}"{% ENDIF %}>{menu.vMenu7.links.NAME}</a></li>
						{% ENDFOR %}
					  {% ENDFOR %}
					{% ENDFOR %}
				  </ul>				  
			</li>
в нем замените переменную vMenu6 на vMenu7(Вы заменили, но не везде).
Далее в разделе Сайт - Меню создайте новое меню "Вложенность для меню 7", а в поле "Имя переменной в шаблоне" добавьте переменную vMenu7.

#7 Aleksandr

Aleksandr

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 77 сообщений
  • ГородСанкт-Петербург

Отправлено 24 Август 2016 - 16:24

Ок. Спасибо!

#8 Aleksandr

Aleksandr

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 77 сообщений
  • ГородСанкт-Петербург

Отправлено 24 Август 2016 - 16:50

Вопрос по дизайну самого выпадающего меню
Какой код необходимо прописать, чтобы размер шрифта не отличался от меню и растягивалось всё-таки по ширине (в одно строку).

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

  • 42421.jpg


#9 Danil

Danil

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

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

Отправлено 27 Август 2016 - 10:02

Просмотр сообщенияAleksandr (24 Август 2016 - 16:50) писал:

Вопрос по дизайну самого выпадающего меню
Какой код необходимо прописать, чтобы размер шрифта не отличался от меню и растягивалось всё-таки по ширине (в одно строку).
Здравствуйте.
Изменения Вам произвел, проверьте.

#10 Aleksandr

Aleksandr

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 77 сообщений
  • ГородСанкт-Петербург

Отправлено 27 Август 2016 - 13:08

Спасибо, но идея была в том, чтобы меню выпадало строго вертикально - в один столбик, но чтобы граница выпадающего меню растягивалось пропорционально размеру текста - то есть без переноса. Такое возможно сделать?

#11 Danil

Danil

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

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

Отправлено 27 Август 2016 - 13:15

Просмотр сообщенияAleksandr (27 Август 2016 - 13:08) писал:

Спасибо, но идея была в том, чтобы меню выпадало строго вертикально - в один столбик, но чтобы граница выпадающего меню растягивалось пропорционально размеру текста - то есть без переноса. Такое возможно сделать?
В main.css найдите код
#custommenu ul.mainnav li.parent ul.dropdown-menu {
	background: #197eaa;
	border: 0;
	font-size: 17px;
	z-index: 100;
	width: 100%;
}
и замените на
#custommenu ul.mainnav li.parent ul.dropdown-menu {
	background: #197eaa;
	border: 0;
	font-size: 17px;
	z-index: 100;
	width: auto;
}


#12 Aleksandr

Aleksandr

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 77 сообщений
  • ГородСанкт-Петербург

Отправлено 27 Август 2016 - 13:23

Сделал, но Меню всё равно не выпадает вертикально в один столбик ...

#13 Danil

Danil

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

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

Отправлено 27 Август 2016 - 15:01

Просмотр сообщенияAleksandr (27 Август 2016 - 13:23) писал:

Сделал, но Меню всё равно не выпадает вертикально в один столбик ...
В дополнение к инструкции из сообщения 11, сделайте следующее:
в main.css найдите код
#custommenu ul.mainnav li.parent ul.dropdown-menu li a {
	color: #fff;
}
и замените на


#custommenu ul.mainnav li.parent ul.dropdown-menu li a {
	color: #fff;
	white-space: nowrap;
}



#14 Aleksandr

Aleksandr

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 77 сообщений
  • ГородСанкт-Петербург

Отправлено 27 Август 2016 - 18:45

Отлично! Теперь всё как надо. Спасибо.

#15 Артемка

Артемка

    Новичок

  • Пользователи
  • Pip
  • 7 сообщений
  • ГородМосква

Отправлено 22 Февраль 2018 - 15:16

Помогите пожалуйста. Некорректно работает выпадающее меню на мобильной версии. Аккаунт

SL-418611




Проблема видимо из - за фиксированной шапки
Дело в том что категории распределены по дереву кат. Яндекса. соответственно их очень много. (В одной категории несколько подкатегорий)  На мобильной версии при открывании основной категории выпадающее меню обрезается в по высоте  экрана и не прокручивается в низ. прокручивается только само тело сайта.
В итоге невозможно посмотреть нижние категории. Помогите решить.

1. Либо довести до ума действующую модель выпадающего меню.(сверху вниз) оставив при этом фиксированное меню.
2. Либо сделать меню выпадающим с лева (как в шаблоне Туризм).



Overflow: auto или scroll - не помогает

Благодарю за поддержку

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

  • Снимок.JPG


#16 Firefly

Firefly

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

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

Отправлено 28 Февраль 2018 - 15:52

Просмотр сообщенияАртемка (22 Февраль 2018 - 15:16) писал:

Помогите пожалуйста. Некорректно работает выпадающее меню на мобильной версии. Аккаунт

SL-418611




Проблема видимо из - за фиксированной шапки
Дело в том что категории распределены по дереву кат. Яндекса. соответственно их очень много. (В одной категории несколько подкатегорий)  На мобильной версии при открывании основной категории выпадающее меню обрезается в по высоте  экрана и не прокручивается в низ. прокручивается только само тело сайта.
В итоге невозможно посмотреть нижние категории. Помогите решить.

1. Либо довести до ума действующую модель выпадающего меню.(сверху вниз) оставив при этом фиксированное меню.
2. Либо сделать меню выпадающим с лева (как в шаблоне Туризм).



Overflow: auto или scroll - не помогает

Благодарю за поддержку



Здравствуйте.
Извините за ожидание.
В шаблоне main.css найдите код:
#mommenu .menu_collapse_wrap .collapse {position: relative;height: 0;overflow: hidden;}
#mommenu .menu_collapse_wrap .collapsing {position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;-o-transition:height .35s ease;transition:height .35s ease}
#mommenu .menu_collapse_wrap .collapse.in {height: auto;}

Замените на:
#mommenu .menu_collapse_wrap .collapse {position: relative;height: 0;overflow: scroll;}
#mommenu .menu_collapse_wrap .collapsing {position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;-o-transition:height .35s ease;transition:height .35s ease}
#mommenu .menu_collapse_wrap .collapse.in {height: 90vh;}





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

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