Новое Выпадающее Меню (Весна)
#1
Отправлено 04 Апрель 2015 - 14:15
Помогите реализовать такую идею:
Шаблон Весна. В верхней части сайта над корзиной хочу сделать меню-аккардион (типа как меню каталога).
Заголовок - "выбор региона"
Само меню - это города (Москва, Тула, Тверь и тд.)
Выбор города - ведет на другой сайт (представительство компании в регионе), т.е. по сути "город" - это ссылка
Скрин прилагаю
#2
Отправлено 04 Апрель 2015 - 15:17
pro_taras (04 Апрель 2015 - 14:15) писал:
Помогите реализовать такую идею:
Шаблон Весна. В верхней части сайта над корзиной хочу сделать меню-аккардион (типа как меню каталога).
Заголовок - "выбор региона"
Само меню - это города (Москва, Тула, Тверь и тд.)
Выбор города - ведет на другой сайт (представительство компании в регионе), т.е. по сути "город" - это ссылка
Скрин прилагаю
для начала зайдите в раздел Сайт-Меню и создайте меню, с пунктами меню(городами) и ссылками
Название: Дополнительное
имя переменной: 123
далее найдите в шаблоне HTML
<div id="logo"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}logo.png?design=spring" title="" alt=""></a></div> <div id="cart">после вставьте
<div class="boxqwe"> <div class="box-content qwe"> <div class="box-category"> <ul class="accordion"> <li class="parent"><a>Выберите город:</a> <ul class="accordion" style="display: none;"> {% FOR menu %} {% FOR 123 %} {% FOR links %} <li><a href="{menu.123.links.URL}" {% IF menu.123.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.123.links.TITLE %}title="{menu.123.links.TITLE}"{% ENDIF %}>{menu.123.links.NAME}</a></li> {%ENDFOR%} {%ENDFOR%} {%ENDFOR%} </ul></li> </ul> </div> </div> </div>
далее добавьте в конец файла main.css
.box-content.qwe { width: 150px; } .boxqwe { float: right; margin-top: 15px; padding-left: 14px; padding-right: 46px; position: relative; z-index: 1; }
#3
Отправлено 04 Апрель 2015 - 15:44
Только:
1. теперь основной каталог, который слева, всегда раскрыт, как сделать чтобы он свернулся?
2. Как подвинуть корзину под новое меню с городами, чтобы одно было под другим?
Сообщение отредактировал pro_taras: 04 Апрель 2015 - 16:24
#4
Отправлено 04 Апрель 2015 - 16:28
pro_taras (04 Апрель 2015 - 15:44) писал:
Только:
1. теперь основной каталог, который слева, всегда раскрыт, как сделать чтобы он свернулся?
2. Как выровнять корзину и новое меню с городами, чтобы одно было под другим?
// Меню-аккордеон. Каталог jQuery(document).ready(function () { jQuery("ul.accordion li.parent").each(function(){ jQuery(this).append('<em class="open-close"> </em>'); }); jQuery('ul.accordion').accordion(); jQuery("ul.accordion li.active").each(function(){ jQuery(this).children().next("ul").css('display', 'block'); }); });
замените на
// Меню-аккордеон. Каталог jQuery(document).ready(function () { jQuery("ul.accordion li.parent").each(function(){ jQuery(this).append('<em class="open-close"> </em>'); }); jQuery('ul.accordion').accordion(); jQuery("ul.accordion li.active").each(function(){ jQuery(this).children().next("ul").css('display', 'block'); }); }); // Меню-аккордеон. Каталог jQuery(document).ready(function () { jQuery("ul.accordion1 li.parent").each(function(){ jQuery(this).append('<em class="open-close"> </em>'); }); jQuery('ul.accordion1').accordion(); jQuery("ul.accordion1 li.active").each(function(){ jQuery(this).children().next("ul").css('display', 'block'); }); });
далее найдите в HTML
<div class="box-content qwe"> <div class="box-category"> <ul class="accordion"> <li class="parent"><a>Выберите город:</a> <ul class="accordion" style="display: none;">
замените на
<div class="box-content qwe"> <div class="box-category"> <ul class="accordion"> <li class="parent"><a>Выберите город:</a> <ul class="accordion1" style="display: none;">
далее найдите в main,css
#header #cart .heading { float: right; margin-top: 55px; padding-left: 14px; padding-right: 46px; position: relative; z-index: 1; }замените на
#header #cart .heading { float: right; margin-top: 55px; padding-left: 14px; padding-right: 46px; position: relative; z-index: 1; margin-right: -162px; }
#5
Отправлено 04 Апрель 2015 - 17:04
Ирина345 (04 Апрель 2015 - 16:28) писал:
// Меню-аккордеон. Каталог jQuery(document).ready(function () { jQuery("ul.accordion li.parent").each(function(){ jQuery(this).append('<em class="open-close"> </em>'); }); jQuery('ul.accordion').accordion(); jQuery("ul.accordion li.active").each(function(){ jQuery(this).children().next("ul").css('display', 'block'); }); });
замените на
// Меню-аккордеон. Каталог jQuery(document).ready(function () { jQuery("ul.accordion li.parent").each(function(){ jQuery(this).append('<em class="open-close"> </em>'); }); jQuery('ul.accordion').accordion(); jQuery("ul.accordion li.active").each(function(){ jQuery(this).children().next("ul").css('display', 'block'); }); }); // Меню-аккордеон. Каталог jQuery(document).ready(function () { jQuery("ul.accordion1 li.parent").each(function(){ jQuery(this).append('<em class="open-close"> </em>'); }); jQuery('ul.accordion1').accordion(); jQuery("ul.accordion1 li.active").each(function(){ jQuery(this).children().next("ul").css('display', 'block'); }); });
далее найдите в HTML
<div class="box-content qwe"> <div class="box-category"> <ul class="accordion"> <li class="parent"><a>Выберите город:</a> <ul class="accordion" style="display: none;">
замените на
<div class="box-content qwe"> <div class="box-category"> <ul class="accordion"> <li class="parent"><a>Выберите город:</a> <ul class="accordion1" style="display: none;">
далее найдите в main,css
#header #cart .heading { float: right; margin-top: 55px; padding-left: 14px; padding-right: 46px; position: relative; z-index: 1; }замените на
#header #cart .heading { float: right; margin-top: 55px; padding-left: 14px; padding-right: 46px; position: relative; z-index: 1; margin-right: -162px; }
Найдите в main.css
// Меню-аккордеон. Каталог
jQuery(document).ready(function () {
jQuery("ul.accordion li.parent").each(function(){
jQuery(this).append('<em class="open-close"> </em>');
});
jQuery('ul.accordion').accordion();
jQuery("ul.accordion li.active").each(function(){
jQuery(this).children().next("ul").css('display', 'block');
});
});
У меня в main.css нет ничего похожего на jQuery .......
#6
Отправлено 04 Апрель 2015 - 19:17
pro_taras (04 Апрель 2015 - 17:04) писал:
// Меню-аккордеон. Каталог
jQuery(document).ready(function () {
jQuery("ul.accordion li.parent").each(function(){
jQuery(this).append('<em class="open-close"> </em>');
});
jQuery('ul.accordion').accordion();
jQuery("ul.accordion li.active").each(function(){
jQuery(this).children().next("ul").css('display', 'block');
});
});
У меня в main.css нет ничего похожего на jQuery .......
#8
Отправлено 05 Апрель 2015 - 13:32
#9
Отправлено 06 Апрель 2015 - 17:18
pro_taras (05 Апрель 2015 - 13:32) писал:
.accordion1 ul { padding: 0 !important; margin: 0; display: block; width: 100%; position: absolute; overflow: hidden !important; }
#12
Отправлено 28 Май 2015 - 15:37
#13
Отправлено 28 Май 2015 - 17:23
pro_taras (28 Май 2015 - 15:37) писал:
Здравствуйте, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:
.boxqwe { float: right; margin-top: -40px; margin-left: 927px; padding-left: 14px; padding-right: 110px; position: absolute; z-index: 1; }
Замените его на:
.boxqwe { float: right; right: -35px; top: -41px; margin-right: 100px; padding-left: 14px; padding-right: 46px; position: relative; z-index: 1; }
#14
Отправлено 28 Май 2015 - 20:51
Cupuyc (28 Май 2015 - 17:23) писал:
.boxqwe { float: right; margin-top: -40px; margin-left: 927px; padding-left: 14px; padding-right: 110px; position: absolute; z-index: 1; }
Замените его на:
.boxqwe { float: right; right: -35px; top: -41px; margin-right: 100px; padding-left: 14px; padding-right: 46px; position: relative; z-index: 1; }
Спасибо, а как теперь сделать так, чтобы меню-аккордеон с городами при раскрытии вываливалось поверх слайдера, а не сдвигало всю страницу вниз?
#15
Отправлено 28 Май 2015 - 21:00
pro_taras (28 Май 2015 - 20:51) писал:
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:
.accordion ul { padding: 0 !important; margin: 0; display: block; width: 100%;position: relative;overflow: hidden !important;}
Замените его на:
.accordion ul { padding: 0 !important; margin: 0; display: block; width: 100%; position: absolute; overflow: hidden !important; }
#16
Отправлено 28 Май 2015 - 21:16
Cupuyc (28 Май 2015 - 21:00) писал:
.accordion ul { padding: 0 !important; margin: 0; display: block; width: 100%;position: relative;overflow: hidden !important;}
Замените его на:
.accordion ul { padding: 0 !important; margin: 0; display: block; width: 100%; position: absolute; overflow: hidden !important; }
#17
Отправлено 29 Май 2015 - 02:00
.accordion ul { padding: 0 !important; margin: 0; display: block; width: 100%; position: absolute; overflow: hidden !important; }
замените на:
.accordion ul { padding: 0 !important; margin: 0; display: block; width: 100%;position: relative;overflow: hidden !important;} .boxqwe .accordion ul { position: absolute; }
#18
Отправлено 29 Май 2015 - 08:44
Vaccina (29 Май 2015 - 02:00) писал:
.accordion ul { padding: 0 !important; margin: 0; display: block; width: 100%; position: absolute; overflow: hidden !important; }
замените на:
.accordion ul { padding: 0 !important; margin: 0; display: block; width: 100%;position: relative;overflow: hidden !important;} .boxqwe .accordion ul { position: absolute; }
#19
Отправлено 01 Сентябрь 2016 - 19:11
Помогите видоизменить шапку сайта:
Шаблон Весна.
1) В верхней красной плашке необходимо расположить элементы в таком порядке: "Аренда.Ремонт. Запчасти" - без изменений, рядом "аккордеон" (выбор города), рядом корзина, в конце - "поиск" (без изменений.) Все расположить в одну линию, размер самой плашки (ее высоту) при этом уменьшить до узкой полоски (как в скрине)
2) В поле, где размещен логотип - добавить 2 текстовых блока - один для рекламного слогана, второй для адреса организации, Расположить как в скрине
Скрин прилагаю
#20
Отправлено 05 Сентябрь 2016 - 11:19
pro_taras (01 Сентябрь 2016 - 19:11) писал:
Помогите видоизменить шапку сайта:
Шаблон Весна.
1) В верхней красной плашке необходимо расположить элементы в таком порядке: "Аренда.Ремонт. Запчасти" - без изменений, рядом "аккордеон" (выбор города), рядом корзина, в конце - "поиск" (без изменений.) Все расположить в одну линию, размер самой плашки (ее высоту) при этом уменьшить до узкой полоски (как в скрине)
2) В поле, где размещен логотип - добавить 2 текстовых блока - один для рекламного слогана, второй для адреса организации, Расположить как в скрине
Скрин прилагаю
1) В файле main.css найдите блок
.boxqwe { float: right; right: 0px; top: 0px; margin-right: 100px; padding-left: 14px; padding-right: 46px; position: relative; z-index: 1; }и замените его на
.boxqwe { float: left; left: 15px; top: 8px; margin-right: 100px; padding-left: 14px; padding-right: 46px; position: relative; z-index: 1; }Далее блок
#header #welcome { font-size: 25px; font-family: 'Ubuntu Condensed'; position: relative; padding-top: 20px; }замените на
#header #welcome { font-size: 25px; font-family: 'Ubuntu Condensed'; position: relative; padding-top: 13px; float: left; }Блок
#header #cart .heading { float: right; margin-top: 15px; margin-right: 100px; padding-left: 14px; padding-right: 46px; position: relative; z-index: 1; }замените на
#header #cart .heading { float: right; margin-right: 100px; padding-left: 14px; padding-right: 46px; position: relative; z-index: 1; }
Блок
#header #search { position: relative; float: right; top: 9px; right: 0px; margin-bottom: 9px; width: 225px; z-index: 15; }замените на
#header #search { position: relative; float: right; top: 3px; right: 0px; margin-bottom: 9px; width: 225px; z-index: 15; }И блок
#header_colapse .inner { padding: 0 0 10px; z-index: 0; position: relative; background: url('http://design.smstehno.ru/inner_shadow.png?design=spring') 50% 0px no-repeat !important; z-index: 1000; }замените на
#header_colapse .inner { padding: 0; z-index: 0; position: relative; background: url('http://design.smstehno.ru/inner_shadow.png?design=spring') 50% 0px no-repeat !important; z-index: 1000; }
2) В шаблоне HTML находим строку
<div id="logo"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}logo.png?design=spring" title="" alt=""></a></div>и сразу после нее вставляем
<div class ="sloganFirm">Сюда текст для слогана фирмы</div> <div class ="adressFirm">Сюда адрес фирмы</div>Здесь текст замените на Ваш.
Теперь в самый конец main.css вставляем блок
.sloganFirm{float:left;width:25%;} .adressFirm{float:right;width:25%;}
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных