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


Вопросы По Теме Лайт

Автор MrFox, 09 авг. 2015 21:29

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

#1 MrFox

MrFox

    Новичок

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

Отправлено 09 Август 2015 - 21:29

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

Решил взять за основу тему "Лайт", поправив всё что не устраивает.
Принцип - убрать всё лишнее (по моему мнению), оставив голую функциональность, чтобы даже на мобильниках с маленьким экраном магазин был работоспособен. Много что получилось, кое-что - нет. Одно из того, что надо бы добавить - навигация по каталогу как в теме "Snow" в сжатом режиме, когда ширина экрана очень маленькая. Так бывает если специально сжать окно браузера, или открыть магазин на экране мобильника. Тогда каталог сворачивается в выпадающий список, чего мне и хочется в дизайне моего магазина. Как сделать?

Адрес сайта:
http://caravan.storeland.ru/

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

Текущий код:
		<tr>
		  <td>
			<select name="Nav" style="font-size:1.2em; width:100%; height:2.4em; border: 1px solid #808080;">
			  <option selected>Каталог
			  <option>Саморезы
			  <option>→Саморезы по металлу
			  <option>→Саморезы по дереву
			  <option>Инструмент
			  <option>Расходники
			</select>
		  </td>
		</tr>

#2 Ирина345

Ирина345

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

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

Отправлено 12 Август 2015 - 11:32

Просмотр сообщенияMrFox (09 Август 2015 - 21:29) писал:

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

Решил взять за основу тему "Лайт", поправив всё что не устраивает.
Принцип - убрать всё лишнее (по моему мнению), оставив голую функциональность, чтобы даже на мобильниках с маленьким экраном магазин был работоспособен. Много что получилось, кое-что - нет. Одно из того, что надо бы добавить - навигация по каталогу как в теме "Snow" в сжатом режиме, когда ширина экрана очень маленькая. Так бывает если специально сжать окно браузера, или открыть магазин на экране мобильника. Тогда каталог сворачивается в выпадающий список, чего мне и хочется в дизайне моего магазина. Как сделать?

Адрес сайта:
http://caravan.storeland.ru/

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

Текущий код:
		<tr>
		 <td>
			<select name="Nav" style="font-size:1.2em; width:100%; height:2.4em; border: 1px solid #808080;">
			 <option selected>Каталог
			 <option>Саморезы
			 <option>→Саморезы по металлу
			 <option>→Саморезы по дереву
			 <option>Инструмент
			 <option>Расходники
			</select>
		 </td>
		</tr>
Здравствуйте, извините за долгий ответ.
Для того что бы добавить меню найдите в шаблоне HTML
  <select name="Nav" style="font-size:1.2em; width:100%; height:2.4em; border: 1px solid #808080;">
			  <option selected>Каталог
			  <option>Саморезы
			  <option>→Саморезы по металлу
			  <option>→Саморезы по дереву
			  <option>Инструмент
			  <option>Расходники
			</select>
перед данным кодом вставьте

  <!-- BEGIN: Main Navigation -->
			  <div id="mainnav" class="col-xs-10 col-md-9">
				<div id="custommenu">
				  <ul class="mainnav">
					{%IFNOT catalog_full_empty%}
					  {%FOR catalog_full%}
						{% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %}
						  <li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}">
							<a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% 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%}
					{%ENDIF%}
				  </ul>
				</div>
			  </div>
			  <div id="mommenu" class="menu-collapse">
				<span class="btn btn-navbar menusidebar collapsed" data-toggle="collapse" data-target="#menu_collapse">
				  <i class="fa icon-reorder"></i>
				</span>
				<div class="menu_collapse_wrap">
				  <div id="menu_collapse" class="mainnav collapse">
					<ul>
					{%IFNOT catalog_full_empty%}
					  {%FOR catalog_full%}
						{% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %}
						  <li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}">
							<a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}"><span>{catalog_full.NAME}</span></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%}
					{%ENDIF%}
					</ul>
				  </div>
				</div>
			  </div>
			  <!-- END: Main Navigation -->

далее найдите в файле main.js

	   // Обновляем возможность выбора другой модификации для текущих значений свойств модификации товара. 
	   updateVisibility(y);
	});
  });
после вставьте

/ Меню Аккордион
(function($){
  $.fn.SnsAccordion = function(options) {
   var $el	= $(this);
var defaults = {
active: 'open',
el_wrap: 'li',
el_content: 'ul',
accordion: true,
expand: true,
btn_open: '<i class="icon-plus"></i>',
btn_close: '<i class="icon-minus"></i>'
};
var options = $.extend({}, defaults, options);

$(document).ready(function() {
$el.find(options.el_wrap).each(function(){
$(this).find('> a, > span, > h4').wrap('<div class="accr_header"></div>');
if(($(this).find(options.el_content)).length){
$(this).find('> .accr_header').append('<span class="btn_accor">' + options.btn_open + '</span>');
$(this).find('> '+options.el_content+':not(".accr_header")').wrap('<div class="accr_content"></div>');
}
});
if(options.accordion){
$('.accr_content').hide();
$el.find(options.el_wrap).each(function(){
if($(this).hasClass(options.active)) {
$(this).find('> .accr_content')
  .addClass(options.active)
  .slideDown();
$(this).find('> .accr_header')
  .addClass(options.active);
}
});
} else {
$el.find(options.el_wrap).each(function(){
if(!options.expand){
$('.accr_content').hide();
} else {
$(this).find('> .accr_content').addClass(options.active);
$(this).find('> .accr_header').addClass(options.active);
$(this).find('> .accr_header .btn_accor').html(options.btn_close);
}
});
}
  });
   $(window).load(function() {
$el.find(options.el_wrap).each(function(){
var $wrap = $(this);
var $accrhead = $wrap.find('> .accr_header');
var btn_accor = '.btn_accor';

$accrhead.find(btn_accor).live('click', function(event) {
event.preventDefault();
var obj = $(this);
var slide = true;
if($accrhead.hasClass(options.active)) {
slide = false;
}
if(options.accordion){
$wrap.siblings(options.el_wrap).find('> .accr_content').slideUp().removeClass(options.active);
$wrap.siblings(options.el_wrap).find('> .accr_header').removeClass(options.active);
$wrap.siblings(options.el_wrap).find('> .accr_header ' + btn_accor).html(options.btn_open);
}
if(slide) {
$accrhead.addClass(options.active);
obj.html(options.btn_close);
$accrhead.siblings('.accr_content').addClass(options.active).stop(true, true).slideDown();
} else {
$accrhead.removeClass(options.active);
obj.html(options.btn_open);
$accrhead.siblings('.accr_content').removeClass(options.active).stop(true, true).slideUp();
}
return false;
});
});
});
};
})(jQuery);
 //Menu > Sidebar Боковое меню > сохранение открытой вложенности
jQuery(document).ready(function($){
  $('.block.menu .parent:not(".active") a').next('.sub').css('display', 'none');
  $('.block.menu .parent a .open-sub').click(function(event){
  event.preventDefault();
  
	if ($(this).closest('.parent').hasClass('active')) {
	  $(this).parent().next('.sub').slideUp(600);
	  $(this).closest('.parent').removeClass('active');
	} else {
	  $(this).parent().next('.sub').slideDown(600);
	  $(this).closest('.parent').addClass('active');
	}
  });
});

jQuery(document).ready(function($){
  $('#menu_collapse').SnsAccordion({
	btn_open: '<i class="icon-plus"></i>',
	btn_close: '<i class="icon-minus"></i>'
  });
  $('#mommenu .btn.menusidebar').live('click', function(){
	if($(this).hasClass('active')){
	  $(this).find('.overlay').fadeOut(250);
	  $(this).removeClass('active');
	} else {
	  $(this).addClass('active');
	  $(this).find('.overlay').fadeIn(250);
	}
  });
}); 
  // Кнопка добавления товара на сравнение сравнения товаров
  $('.goodsDataCompareButton').click(function(){
	window.location.href = $(this).attr('rel') +
	($(this).attr('rel').indexOf( '\?' ) > -1 ? '&' : '?') +
	'id='+
	$('.goodsDataMainModificationId').val()+
	'&from='+
	$('input[name="form[goods_from]"]').val();
	return false;
  });

далее в конец main.css добавьте
/* Меню в шапке */
#menu {position: relative;margin: 0 0;max-height: 80px;}
#menu:before {top: 0;}
#menu .inner {width: 100%;background: #3cabda url("{ASSETS_IMAGES_PATH}breadcrumbs-bg.jpg") no-repeat center top;}
#menu .inner:after {position: absolute;content: "";width: 100%;height: 1px;bottom: 0px;left: 0px;background: rgba(255, 255, 255, 0.1);}
#menu .container {position: relative;}
#menu #mainnav {position: static;float:left;}
#custommenu {z-index:1;}
#custommenu ul.mainnav {margin: 0;padding: 0;list-style: none;max-height: 80px;overflow: hidden;}
#custommenu ul.mainnav:before, #custommenu ul.mainnav:after {content: " ";display: table;}
#custommenu ul.mainnav:after {clear: both;}
#custommenu ul.mainnav li.level0 {display:block;float:left;border: none;position: static;text-align: left;padding: 21px 5px 21px 0px;}
#custommenu ul.mainnav li.level0.active > a, #custommenu ul.mainnav li.level0:hover > a {color: #000;position: relative;background-color: rgba(255, 255, 255, 0.1);border-color: rgba(255, 255, 255, 0.3);}
#custommenu ul.mainnav li.level0:first-child {padding-left: 0;}
#custommenu ul.mainnav li.level0 > a {display: block;padding: 8px 10px;font-size: 150%;font-weight: normal;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;position: relative;color: #000;border: 1px solid transparent;}
#custommenu ul.mainnav li ul.dropdown-menu {position: absolute;width:94%;left: 0;background: #123456;border-bottom: 3px solid #3cabda;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.parent:hover ul.dropdown-menu {display: block;visibility: visible;opacity: 1;filter: alpha(opacity=100);-khtml-opacity: 1;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transform-origin: top center;-moz-transform-origin: top center;transform-origin: top center;-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.level1 {list-style: none;width: 25%;float: left;}
#custommenu ul.mainnav li.level2 {padding: 0;display: block;}
#custommenu ul.mainnav li a.title-lv1 {font-size: 150%;margin-bottom: 10px;text-transform: uppercase;font-weight: normal;padding: 12px 0 4px;display: block;}
#custommenu ul.mainnav li a.title-lv1 {color: #666666;  background: none;  padding: 0px;}
#custommenu ul.mainnav li a.title-lv1:hover {color: #3cabda;}
#custommenu ul.mainnav li a.title-lv2 {background: url("{ASSETS_IMAGES_PATH}ico-dot.png") no-repeat left 11px;padding: 5px 5px 5px 20px;display: block;font-size: 13px;}
#custommenu ul.mainnav li a.title-lv2:hover {color: #3cabda;}
#custommenu ul.mainnav li ul.sub {list-style: none;padding: 0;margin: 0;}
#custommenu ul.mainnav li ul.sub.dropdown-menu {padding:10px 20px;}
.hide-cat {display:none;}
#mommenu {display: none;height:80px;}
#mommenu .btn {display:inline-block;cursor:pointer;margin: 14px 0 0;position: relative;z-index: 2;padding: 0 0;background:#123456;width: 49px;height: 49px;line-height: 49px;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;text-align: center;border: 1px solid rgba(255, 255, 255, 0.5);}
#mommenu .btn i {font-size: 21px;color: #000;line-height: 49px;}
#mommenu .btn:hover {background: rgba(255, 255, 255, 0.2);}
#mommenu .menu_collapse_wrap {width: 100%;position: absolute;left: 0;background: #222;z-index: 9999;}
#mommenu .menu_collapse_wrap:before {content: '';display: block;background: #222;height: 100%;width: 3000px;position: absolute;top: 0;left: -1000px;z-index: -1;}
.collapse {position: relative;height: 0;overflow: hidden;}
.collapsing {position:relative;height:0;overflow:hidden;-webkit-transition:height .35s ease;-o-transition:height .35s ease;transition:height .35s ease}
.collapse.in {height: auto;}
#mommenu ul {margin: 0;padding: 0;list-style: none;}
#mommenu .menu_collapse_wrap a {color: #b9b9b9;}
#mommenu .menu_collapse_wrap a:hover {color: #fff;}
#mommenu .menu_collapse_wrap #menu_collapse > ul {padding: 20px 20px;}
#mommenu .mainnav .accr_header {border-bottom: 1px solid #393939;padding: 3px 0;}
#mommenu .mainnav .accr_content {padding-left: 15px;}
#mommenu .mainnav .accr_header .btn_accor {cursor: pointer;float: right;}
#mommenu .btn .overlay {content: "";display: none;position: fixed;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;z-index: 9998;background: #000000;opacity: 0.2;filter: alpha(opacity=20);cursor: pointer;}
#menu.keep-menu {z-index: 100;background: fadeOut(#000000, 20%);position: fixed !important;top: 0px !important;}
#menu .nav-right {text-align: right;float:right;margin-top:14px;}
#menu .nav-right .header-right-inner {float: right;}
#menu .nav-right .block-search {display:none;}
#menu .nav-right .block-compare {margin-left: 8px;position: relative;display: block;text-align: left;float:left;}
#menu .nav-right .block-compare .compare-toggle {width: 49px;height: 49px;cursor: pointer;position: relative;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;border: 1px solid rgba(255, 255, 255, 0.5);background: url("{ASSETS_IMAGES_PATH}action-llist.png") no-repeat left -147px;}
#menu .nav-right .block-compare .compare-toggle span.compare-num {display: block;position: absolute;width: 25px;height: 25px;background: #f74444;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;color: #FFF;text-align: center;line-height: 25px;right: -8px;top: -8px;}
#menu .nav-right .block-compare:hover .compare-toggle {background-color: rgba(255, 255, 255, 0.2);}
#menu .nav-right .block-compare.have-items:hover .block-content {opacity: 1;filter: alpha(opacity=100);-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
#menu .nav-right .block-compare .block-content {position: absolute;z-index:999;top: 45px;right: -67px;background: transparent;width: 270px;padding: 21px 5px 5px;opacity: 0;filter: alpha(opacity=0);-webkit-transform: scale(0);-moz-transform: scale(0);-o-transform: scale(0);transform: scale(0);transform-origin: 50% 10% 0;-moz-transform-origin: 50% 10% 0;-webkit-transform-origin: 50% 10% 0;-o-transform-origin: 50% 10% 0;-ms-transform-origin: 50% 10% 0;}
#menu .nav-right .block-compare .block-content .block-inner {background: #123456;-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);padding: 15px;}
#menu .nav-right .block-compare .block-content .block-inner .product-name a {font-size: 116.7%;}
#menu .nav-right .block-compare .block-content .block-inner .dataid {display:none;}
#menu .nav-right .block-compare .btn-remove {position: absolute;top: 0px;right: -20px;}
#menu .nav-right .block-compare .actions {padding: 15px 0 0;text-align:center;}
#menu .nav-right .block-compare .actions .button {font-size: 116.7%;}
#menu .nav-right .block-compare ul {margin: 0 20px 0 0;padding:0;list-style: decimal;}
#menu .nav-right .block-compare ul li {margin: 5px 0;}
#compare-items li, .product-details {position: relative;}
#compare-items li p.product-name, .product-details p.product-name, .product-details p.product-mod {margin: 0 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#fancybox-close, #btn-close, .btn-remove {display: block;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;height: 20px;width: 20px;background: url("{ASSETS_IMAGES_PATH}ico-delete.png") no-repeat left top;text-indent: -999em;}
#fancybox-close:hover, #btn-close:hover, .btn-remove:hover {background-color: #f3f3f3;}
#menu .nav-right .block .link-hide {display: block;height: 50px;width: 50px;position: absolute;}
#mommenu .mainnav .accr_header {
	border-bottom: 1px solid #393939;
	padding: 3px 0;
}
@media all and (max-width: 979px) {
#menu #mainnav {width: 100%;}
#menu .nav-right {position: absolute;width: 100%;top: 0px;right: 0px;}
#custommenu {display: none;}
#mommenu {display: block;}
#botsl .block.block-latestblog .block-content ul .item .item-post {width:35%;}
.toolbar .sort-by {display:none;}
#content .products-list .item .item-img {width: 35%;}
#content .products-list .item .product-shop .actions-addtocart {padding: 10px 0 0;clear: left;display: block;}
.toolbar-bottom .limiter label {display:none;}
}

#3 MrFox

MrFox

    Новичок

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

Отправлено 12 Август 2015 - 20:30

Спасибо вам огромное!

Я прошу прощения, но по-моему, тут слишком много всего. :o :unsure:

Я плохо разбираюсь в этом, но всё равно создалось такое впечатление, что вы перетащили ВСЁ меню из SNOW в мой магазин. Мне же не нужно ВСЁ меню; нужна ТОЛЬКО урезанная версия, в виде простейшего выпадающего списка, без горизонтальных опций и украшательств.
Там, на мой дилетантский взгляд, десяти строк кода достаточно. Без стилей и прочего.
Обратно в Вопросы общие для всех шаблонов


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Вопросы общие для всех шаблонов
  5. Privacy Policy