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


Мобильная Версия Шаблон Хамелеон


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

#141 Firefly

Firefly

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

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

Отправлено 15 Май 2018 - 17:02

Просмотр сообщенияac-dream (14 Май 2018 - 23:47) писал:

Здравствуйте!
Аккаунт  SL-343424П.
Помогите, пожалуйста, сделать так, чтоб в мобильной версии главное меню было по умолчанию свёрнуто и разворачивалось только после клика по нему (прикреплённый файл).

Здравствуйте.
В HTML код:
<ul class="menuLowRes" style="display:block;">

Заменил на:
								<ul class="menuLowRes" style="display:none;">


#142 ac-dream

ac-dream

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

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

Отправлено 21 Май 2018 - 09:57

Просмотр сообщенияFirefly (15 Май 2018 - 17:02) писал:

Здравствуйте.
В HTML код:
<ul class="menuLowRes" style="display:block;">

Заменил на:
							 <ul class="menuLowRes" style="display:none;">

Спасибо!

#143 AISantana

AISantana

    Новичок

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

Отправлено 16 Апрель 2019 - 15:14

Здравствуйте. Акк SL-472911
Вопрос такой: как поставить распознавание мобильный/большой экран и в зависимости от этого подключать один или другой вид таблицы.

Примерно такое:

{% IF MOB_VER %}
Table v.1
{% ELSE %}
Table v.2
{% ENDIF %}

В какой переменной хранятся сведения о разрешении экрана?

UPD

Попробовал в main.css сделать конструкцию вида

.my_class{display:block}
@media handheld {.my_class{display:none}}

и присвоить таблице класс my_class - не работает.

#144 ac-dream

ac-dream

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

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

Отправлено 08 Август 2019 - 21:05

Здравствуйте!
Помогите, пожалуйста, дополнить меню для мобильной версии.
В полной версии, для Desktop, в левом меню отображаются категории.
На смартфонах этого меню нет. Хотелось бы чтоб у пользователя была возможность искать товар по категориям и с мобильных.
Для этого надо добавить в главное меню пункт "Каталог по категориям", чтоб он раскрывался списком тех самых категорий. Скрины прилагаю.

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

  • 85.jpg
  • 86.jpg


#145 Vaccina

Vaccina

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

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

Отправлено 09 Август 2019 - 06:45

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

Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
			  <div class="menuopen"><b>ГЛАВНОЕ МЕНЮ</b></div>
			  <div>
								<ul class="menuLowRes" style="display:none;">
								 {% FOR menu %}
								   {% FOR header %}
										 {% FOR links %}
														   <li><a class="menuparent" href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
										 {% ENDFOR %}
								   {% ENDFOR %}
								 {% ENDFOR %}												  
								</ul>
			  </div>
                                              
замените на:
			  <div class="menuopen"><b>ГЛАВНОЕ МЕНЮ</b></div>
			  <div>
								<ul class="menuLowRes" style="display:none;">
								 {% FOR menu %}
								   {% FOR header %}
										 {% FOR links %}
														   <li><a class="menuparent" href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
										 {% ENDFOR %}
								   {% ENDFOR %}
								 {% ENDFOR %}												  
								</ul>
			  </div>
		 {%IFNOT catalog_full_empty%}
		  <div class="catalogLowRes">
			<div class="catalogButtonLowRes ftheme-color btheme-color">Каталог</div>		   
		  </div>
		  {%ENDIF%}
		  {%IFNOT catalog_full_empty%}
			<div class="catwrp">
			  <div class="catalogheader theme-color"><a href="{CATALOG_URL}">Каталог</a></div>
			   <div class="">
				<div class="">
				  {%FOR catalog_full%}
					{% IF catalog_full.FIRST %}<ul class="accordion">{% ENDIF %}
					<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
					  <a href="{catalog_full.URL}" class="accAnchor {% IF catalog_full.CURRENT %}selected{% ENDIF %}">{catalog_full.NAME}</a>
					{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
					{% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %}
				  {%ENDFOR%}
				</div>
			  </div>
			</div>
		 {%ENDIF%}


#146 ac-dream

ac-dream

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

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

Отправлено 09 Август 2019 - 13:26

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

#147 Vaccina

Vaccina

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

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

Отправлено 10 Август 2019 - 06:22

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

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.catalogButtonLowRes{padding:10px 20px;background:white;border:1px solid #ddd;width:200px;margin:0 auto;cursor:pointer;}

замените на:
.catalogButtonLowRes{padding:10px 20px;background:white;border:1px solid #ddd;width:235px;margin:10px auto 0;cursor:pointer;font-size: 18px;text-transform: uppercase;font-weight: bold;}

далее найдите:
.catwrp{border:1px solid #ddd;margin:10px 0 10px 0;display:block;overflow:hidden;}
.accordion{padding: 0px 5px 0px;list-style-type: none;position: relative;}
.accordion li{list-style:none;text-align:left;padding: 3px 10px;font-size: 13px;border-bottom: 1px solid #ddd;-webkit-transition:all 0.35s ease;-o-transition:all 0.35s ease;-moz-transition:all 0.35s ease;}
.accordion li:hover{background:#eee;}
.accAnchor{color:#666;-webkit-transition:all 0.35s ease-in-out;}
.catalogheader{font-size:24px;text-align:left;text-transform:uppercase; width:100%;padding:10px 15px;}

замените на:
.catwrp{margin:10px 0 10px 0;display:block;overflow:hidden;}
.accordion{padding: 0px 5px 0px;list-style-type: none;position: relative;}
.accordion li{list-style:none;text-align:center;padding: 3px 10px;font-size: 13px;border-bottom: none;-webkit-transition:all 0.35s ease;-o-transition:all 0.35s ease;-moz-transition:all 0.35s ease;background: none !important;}
.accordion li:hover{background:#eee;}
.accordion li a {color: #fff;}
.accAnchor{color:#666;-webkit-transition:all 0.35s ease-in-out;}
.catalogheader{font-size:24px;text-align:left;text-transform:uppercase; width:100%;padding:10px 15px;}

далее зайдите в шаблон HTML - найдите:
				 {%IFNOT catalog_full_empty%}
				  <div class="catalogLowRes">
						<div class="catalogButtonLowRes ftheme-color btheme-color">Каталог</div>				   
				  </div>
				  {%ENDIF%}
				  {%IFNOT catalog_full_empty%}
						<div class="catwrp">
						  <div class="catalogheader theme-color"><a href="{CATALOG_URL}">Каталог</a></div>
						   <div class="">
								<div class="">
								  {%FOR catalog_full%}
                
замените на:
				 {%IFNOT catalog_full_empty%}
				  <div class="catalogLowRes">
						<div class="catalogButtonLowRes btheme-color">Каталог</div>				   
				  </div>
				  {%ENDIF%}
				  {%IFNOT catalog_full_empty%}
						<div class="catwrp">
						   <div class="">
								<div class="">
								  {%FOR catalog_full%}


#148 ac-dream

ac-dream

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

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

Отправлено 10 Август 2019 - 17:49

Просмотр сообщенияVaccina (10 Август 2019 - 06:22) писал:

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

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
.catalogButtonLowRes{padding:10px 20px;background:white;border:1px solid #ddd;width:200px;margin:0 auto;cursor:pointer;}

замените на:
.catalogButtonLowRes{padding:10px 20px;background:white;border:1px solid #ddd;width:235px;margin:10px auto 0;cursor:pointer;font-size: 18px;text-transform: uppercase;font-weight: bold;}

далее найдите:
.catwrp{border:1px solid #ddd;margin:10px 0 10px 0;display:block;overflow:hidden;}
.accordion{padding: 0px 5px 0px;list-style-type: none;position: relative;}
.accordion li{list-style:none;text-align:left;padding: 3px 10px;font-size: 13px;border-bottom: 1px solid #ddd;-webkit-transition:all 0.35s ease;-o-transition:all 0.35s ease;-moz-transition:all 0.35s ease;}
.accordion li:hover{background:#eee;}
.accAnchor{color:#666;-webkit-transition:all 0.35s ease-in-out;}
.catalogheader{font-size:24px;text-align:left;text-transform:uppercase; width:100%;padding:10px 15px;}

замените на:
.catwrp{margin:10px 0 10px 0;display:block;overflow:hidden;}
.accordion{padding: 0px 5px 0px;list-style-type: none;position: relative;}
.accordion li{list-style:none;text-align:center;padding: 3px 10px;font-size: 13px;border-bottom: none;-webkit-transition:all 0.35s ease;-o-transition:all 0.35s ease;-moz-transition:all 0.35s ease;background: none !important;}
.accordion li:hover{background:#eee;}
.accordion li a {color: #fff;}
.accAnchor{color:#666;-webkit-transition:all 0.35s ease-in-out;}
.catalogheader{font-size:24px;text-align:left;text-transform:uppercase; width:100%;padding:10px 15px;}

далее зайдите в шаблон HTML - найдите:
				 {%IFNOT catalog_full_empty%}
				 <div class="catalogLowRes">
					 <div class="catalogButtonLowRes ftheme-color btheme-color">Каталог</div>				
				 </div>
				 {%ENDIF%}
				 {%IFNOT catalog_full_empty%}
					 <div class="catwrp">
						 <div class="catalogheader theme-color"><a href="{CATALOG_URL}">Каталог</a></div>
						 <div class="">
							 <div class="">
								 {%FOR catalog_full%}

замените на:
				 {%IFNOT catalog_full_empty%}
				 <div class="catalogLowRes">
					 <div class="catalogButtonLowRes btheme-color">Каталог</div>				
				 </div>
				 {%ENDIF%}
				 {%IFNOT catalog_full_empty%}
					 <div class="catwrp">
						 <div class="">
							 <div class="">
								 {%FOR catalog_full%}


Теперь видоизменилось меню. Надо оставить само меню категорий в прежнем виде. На скрине 87 - как стало, а на 88 - как должно быть.

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

  • 87.jpg
  • 88.jpg


#149 Vaccina

Vaccina

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

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

Отправлено 13 Август 2019 - 02:54

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

Вместо инструкции из сообщения #147 зайдите в main.css - найдите:
@media only screen and (max-width:480px){

замените на:
@media only screen and (max-width:480px){
.catalogButtonLowRes{padding:10px 20px;background:white;border:1px solid #ddd;width:235px;margin:10px auto 0;cursor:pointer;font-size: 18px;text-transform: uppercase;font-weight: bold;}
.catwrp{margin:10px 0 10px 0;display:block;overflow:hidden;border: none;}
.catwrp .catalogheader {display: none;}
.accordion{padding: 0px 5px 0px;list-style-type: none;position: relative;}
.accordion li{list-style:none;text-align:center;padding: 3px 10px;font-size: 13px;border-bottom: none;-webkit-transition:all 0.35s ease;-o-transition:all 0.35s ease;-moz-transition:all 0.35s ease;background: none !important;}
.accordion li:hover{background:#eee;}
.accordion li a {color: #fff;}
.accAnchor{color:#666;-webkit-transition:all 0.35s ease-in-out;}
.catalogheader{font-size:24px;text-align:left;text-transform:uppercase; width:100%;padding:10px 15px;}

Далее в шаблоне HTML найдите:
								 {%IFNOT catalog_full_empty%}
								 <div class="catalogLowRes">
										 <div class="catalogButtonLowRes ftheme-color btheme-color">Каталог</div>							  
								 </div>
								 {%ENDIF%}
								 {%IFNOT catalog_full_empty%}
										 <div class="catwrp">
												 <div class="catalogheader theme-color"><a href="{CATALOG_URL}">Каталог</a></div>
												 <div class="">
														 <div class="">
																 {%FOR catalog_full%}

замените на:
								 {%IFNOT catalog_full_empty%}
								 <div class="catalogLowRes">
										 <div class="catalogButtonLowRes btheme-color">Каталог</div>							  
								 </div>
								 {%ENDIF%}
								 {%IFNOT catalog_full_empty%}
										 <div class="catwrp">
												 <div class="catalogheader theme-color"><a href="{CATALOG_URL}">Каталог</a></div>
												 <div class="">
														 <div class="">
																 {%FOR catalog_full%}





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

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