Добавить Меню
#1
Отправлено 02 Сентябрь 2016 - 14:20
#2
Отправлено 02 Сентябрь 2016 - 15:03
Teraweb (02 Сентябрь 2016 - 14:20) писал:
Здравствуйте.
Уточните, пожалуйста, Вам необходимо добавить новое горизонтальное меню или перенести то, что расположено внизу страницы: Главная, Доставка...
#3
Отправлено 02 Сентябрь 2016 - 16:04
#4
Отправлено 02 Сентябрь 2016 - 16:22
Teraweb (02 Сентябрь 2016 - 16:04) писал:
Создал Вам бэкап. В шаблоне HTML после кода:
<!-- Основная часть --> <div id="main">
Добавил код:
<div id="top-block"> <div class="top"> <div class="container"> <div class="row"> <div class="col-xs-12"> <ul class="links"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> </div> </div> </div>
В конце main.css добавил Вам код:
/*** Верхнее меню ***/ #top-block {color: #808080;border-color: #343434;background-color: #272727;border-left: 1px solid #343434;} #top-block.fixed {display: inline-block;position: absolute;width: 100%;bottom: 0;left: 0;padding-left: 250px;} #top-block .top {padding: 0;text-align: center;} #top-block .links {margin-bottom: 0px;} #top-block .links li {display: inline-block;margin: 10px 15px;} #top-block .links li a {color: #808080;line-height: 22px;} #top-block .links li a:hover {color: #1c8a71;}
Проверьте, пожалуйста.
#5
Отправлено 02 Сентябрь 2016 - 16:31
Сообщение отредактировал Teraweb: 02 Сентябрь 2016 - 20:08
#6
Отправлено 03 Сентябрь 2016 - 01:53
#7
Отправлено 03 Сентябрь 2016 - 21:56
#10
Отправлено 13 Октябрь 2017 - 17:46
Задача похожая, но нужно не сделать новое меню, а переместить нижнее меню вверх и чтобы оно не прокручивалось, а было всегда видно. выравнивание пунктов меню по левой стороне
Также, нужно из подвала переместить информацию о контактах в левое меню вниз и добавить туда пункт меню "Напишите нам" (связь с администрацией) с иконкой перед пунктом, как в остальных элементах.
Аккаунт SL-423783
#11
Отправлено 14 Октябрь 2017 - 08:38
Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<!-- Основная часть --> <div id="main">
после него пропишите:
<div id="top-block"> <div class="top"> <div class="container"> <div class="row"> <div class="col-xs-12"> <ul class="links"> {% FOR menu %} {% FOR footer %} {% FOR links %} <li><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </div> </div> </div> </div> </div>
далее найдите и удалите:
<div class="contact col-md-6 col-xs-12"> <h4 class="title">Контакты</h4> {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<p><i class="fa fa-phone"> </i> <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a></p>{% ENDIF %} {% IF SETTINGS_STORE_WORK_TIME %}<p><i class="fa fa-clock-o"> </i> {SETTINGS_STORE_WORK_TIME}</p>{% ENDIF %} {% IF SETTINGS_STORE_REGION %}<p><i class="fa fa-map-marker"> </i>{SETTINGS_STORE_REGION}</p>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<p><i class="fa fa-phone"> </i>Телефон: <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2}{SETTINGS_STORE_PHONE_CITY_CODE2}{SETTINGS_STORE_PHONE_NUMBER2}">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</a></p>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<p><i class="fa fa-fax"> </i>Телефон: <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3}{SETTINGS_STORE_PHONE_CITY_CODE3}{SETTINGS_STORE_PHONE_NUMBER3}">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</a></p>{% ENDIF %} {% IF SETTINGS_STORE_EMAIL_MAIN %}<p><i class="fa fa-envelope"> </i>Email: <a href="mailto:{SETTINGS_STORE_EMAIL_MAIN}">{SETTINGS_STORE_EMAIL_MAIN}</a></p>{% ENDIF %} {% IF SETTINGS_STORE_SKYPE %}<p><i class="fa fa-skype"> </i>Skype: <a href="skype:{SETTINGS_STORE_SKYPE}?call">{SETTINGS_STORE_SKYPE}</a></p>{% ENDIF %} </div>
далее найдите:
<!-- Меню --> <div class="block-menu"> <i class="fa fa-home"></i> <ul class="links"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%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="contact"> {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<p><i class="fa fa-phone"> </i> <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a></p>{% ENDIF %} {% IF SETTINGS_STORE_WORK_TIME %}<p><i class="fa fa-clock-o"> </i> {SETTINGS_STORE_WORK_TIME}</p>{% ENDIF %} {% IF SETTINGS_STORE_REGION %}<p><i class="fa fa-map-marker"> </i>{SETTINGS_STORE_REGION}</p>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER2 %}<p><i class="fa fa-phone"> </i>Телефон: <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2}{SETTINGS_STORE_PHONE_CITY_CODE2}{SETTINGS_STORE_PHONE_NUMBER2}">{SETTINGS_STORE_PHONE_COUNTRY_CODE2}({SETTINGS_STORE_PHONE_CITY_CODE2}){SETTINGS_STORE_PHONE_NUMBER2}</a></p>{% ENDIF %} {% IF SETTINGS_STORE_PHONE_NUMBER3 %}<p><i class="fa fa-fax"> </i>Телефон: <a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3}{SETTINGS_STORE_PHONE_CITY_CODE3}{SETTINGS_STORE_PHONE_NUMBER3}">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}({SETTINGS_STORE_PHONE_CITY_CODE3}){SETTINGS_STORE_PHONE_NUMBER3}</a></p>{% ENDIF %} {% IF SETTINGS_STORE_EMAIL_MAIN %}<p><i class="fa fa-envelope"> </i>Email: <a href="mailto:{SETTINGS_STORE_EMAIL_MAIN}">{SETTINGS_STORE_EMAIL_MAIN}</a></p>{% ENDIF %} {% IF SETTINGS_STORE_SKYPE %}<p><i class="fa fa-skype"> </i>Skype: <a href="skype:{SETTINGS_STORE_SKYPE}?call">{SETTINGS_STORE_SKYPE}</a></p>{% ENDIF %} <p><i class="fa fa-envelope"> </i><a href="{FEEDBACK_URL}">Напишите нам</a></p> </div>
далее зайдите в main.css - найдите:
/* Логотип */ #header .header-container .logo {margin-bottom: 20px;}
перед ним пропишите:
/*** Верхнее меню ***/ #top-block {color: #808080;border-color: #343434;background-color: #272727;border-left: 1px solid #343434;position: fixed;width: calc(100% - 250px);top: 0;left: 250px;z-index: 10;border-bottom: 2px solid #F1F2F4;} #top-block .top {padding: 0;text-align: center;} #top-block .links {margin-bottom: 0px;} #top-block .links li {display: inline-block;margin: 10px 15px;} #top-block .links li a {color: #808080;line-height: 22px;} #top-block .links li a:hover {color: #1c8a71;}
далее найдите:
#footer .footer-top {padding: 30px 0;text-align: center;}
замените на:
#footer .footer-top {display: none;padding: 30px 0;text-align: center;}
далее найдите:
/* Меню */ .block-menu {display: inline-block;position: relative;}
перед ним пропишите:
/* Контакты */ .contact, .contact a {color: #fff;}
#13
Отправлено 15 Октябрь 2017 - 20:58
bronko (15 Октябрь 2017 - 18:24) писал:
Покажите, где поправить код, чтобы контакты в боковом меню выравнивались по левой стороне, а не по центру.
Блок "мы в соцсетях" нужно переместить вправо рядом с блоком "обратный звонок".
Скриншот со схемой прикрепил
Здравствуйте.
В данном случае, попробуйте, пожалуйста, в шаблоне html найти следующий код:
<div class="callback col-md-6 col-xs-12"> <h4 class="title">Обратный звонок</h4> <form method="post" action="{CALLBACK_URL}" class="callbackForm" enctype="multipart/form-data"> <input type="hidden" name="hash" value="{HASH}" /> <input class="callbackredirect" type="hidden" name="return_to" value="{CALLBACK_URL}"/> <!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации --> {ANTISPAM_CODE} <div class="callback-input"> <i class="fa fa-user"></i> <input id="callback_person" class="inputText callback_person required" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" placeholder="Ваше имя" maxlength="50" title="Представьтесь, пожалуйста" autocomplete="off"> </div> <div class="callback-input"> <i class="fa fa-phone"></i> <input id="callback_phone" class="inputText callback_phone required" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" placeholder="Номер телефона" maxlength="50" title="Введите номер телефона" autocomplete="off"> </div> <button type="submit" title="Отправить" class="button button2">Отправить</button> </form> <!-- Соц. сети --> <h4 class="title">Мы в социальных сетях</h4> <div class="social-links"> <a class="facebook fa fa-facebook" href="https://www.facebook.com/" title="FaceBook.com" target="_blank"><span>facebook</span></a> <a class="twitter fa fa-twitter" href="https://twitter.com/" title="Twitter.com" target="_blank"><span>twitter</span></a> <a class="odnoklassniki fa fa-odnoklassniki" href="https://ok.ru/" title="Odnoklassniki" target="_blank"><span>odnoklassniki</span></a> <a class="vk fa fa-vk" href="https://vk.com/" title="VK.com" target="_blank"><span>vk</span></a> <a class="instagram fa fa-instagram" href="https://instagram.com/" title="Instagram.com" target="_blank"><span>instagram</span></a> </div> </div> </div> </div> </div> <div class="footer-bottom">
И замените его вот этим вот кодом:
<div class="callback col-md-6 col-xs-12"> <h4 class="title">Обратный звонок</h4> <form method="post" action="{CALLBACK_URL}" class="callbackForm" enctype="multipart/form-data"> <input type="hidden" name="hash" value="{HASH}" /> <input class="callbackredirect" type="hidden" name="return_to" value="{CALLBACK_URL}"/> <!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации --> {ANTISPAM_CODE} <div class="callback-input"> <i class="fa fa-user"></i> <input id="callback_person" class="inputText callback_person required" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PERSON}]" value="{FORM_CALLBACK_PERSON}" placeholder="Ваше имя" maxlength="50" title="Представьтесь, пожалуйста" autocomplete="off"> </div> <div class="callback-input"> <i class="fa fa-phone"></i> <input id="callback_phone" class="inputText callback_phone required" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_CALLBACK_PHONE}]" value="{FORM_CALLBACK_PHONE}" placeholder="Номер телефона" maxlength="50" title="Введите номер телефона" autocomplete="off"> </div> <button type="submit" title="Отправить" class="button button2">Отправить</button> </form> </div> <!-- Соц. сети --> <h4 class="title">Мы в социальных сетях</h4> <div class="social-links"> <a class="facebook fa fa-facebook" href="https://www.facebook.com/" title="FaceBook.com" target="_blank"><span>facebook</span></a> <a class="twitter fa fa-twitter" href="https://twitter.com/" title="Twitter.com" target="_blank"><span>twitter</span></a> <a class="odnoklassniki fa fa-odnoklassniki" href="https://ok.ru/" title="Odnoklassniki" target="_blank"><span>odnoklassniki</span></a> <a class="vk fa fa-vk" href="https://vk.com/" title="VK.com" target="_blank"><span>vk</span></a> <a class="instagram fa fa-instagram" href="https://instagram.com/" title="Instagram.com" target="_blank"><span>instagram</span></a> </div> </div> </div> </div> <div class="footer-bottom">
#15
Отправлено 17 Октябрь 2017 - 07:37
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
/* Контакты */ .contact, .contact a {color: #fff;}
замените на:
/* Контакты */ .contact{text-align:left;} .contact, .contact a {color: #fff;}
#17
Отправлено 18 Октябрь 2017 - 16:27
bronko (18 Октябрь 2017 - 16:15) писал:
После внесенных изменений с переносом нижнего меню наверх мобильная версия совсем перекосилась.
Нужно поправить, чтобы все было красиво. Сейчас вот так, как на фото:
@media all and (max-width: 767px) {
после вставьте
#top-block { display: none !important; }
Количество пользователей, читающих эту тему: 1
0 пользователей, 1 гостей, 0 анонимных