0
Сообщений в теме: 8
#1
Отправлено 10 Декабрь 2015 - 15:16
Здравствуйте, появилась необходимость сделать один пункт главного меню выпадающим, создал пункт меню помощь в него надо перенести пункты как сделать заказ, оплата и доставка и таблица размеров, на форуме описываются изменения для других шаблонов для осени не нашел. Можно по порядку расписать что нужно куда добавить что бы сделать меню ?
#2
Отправлено 10 Декабрь 2015 - 16:24
Dmitri (10 Декабрь 2015 - 15:16) писал:
Здравствуйте, появилась необходимость сделать один пункт главного меню выпадающим, создал пункт меню помощь в него надо перенести пункты как сделать заказ, оплата и доставка и таблица размеров, на форуме описываются изменения для других шаблонов для осени не нашел. Можно по порядку расписать что нужно куда добавить что бы сделать меню ?
Здравствуйте, перед изменениями создайте бэкап. Затем зайдите сайт -> меню.
1) Сначала отредактируем ВЕРХНЕЕ меню. На сколько я Вас понимаю, Вам нужно убрать три пункта, и вместо них добавить один с "выпадением" .
В верхнем меню удалите пункты "Как сделать заказ", "Оплата и доставка" , а так же "Таблица размеров", чтобы это сделать нажмите справа на крестики:
2) Затем там же создайте дополнительное меню с названием "Выпадающее меню" и переменой header, сверху там же нажмите "Создать блок меню".
3) Затем добавьте пункты меню "Как сделать заказ", "Оплата и доставка" , а так же "Таблица размеров", с ссылками на страницы, что Вам требуется.
4) Далее переходим в Редактор шаблонов - HTML, найдите код:
<!-- Блок навигации --> {% IFNOT menu_empty %} <ul id="megamenu"> {% FOR menu %} {% FOR header %} {% FOR links %} <li class="root_menu {% IF menu.header.links.SELECTED %}active{% ENDIF %}" > <a href="{menu.header.links.URL}" class="root_link" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} >{menu.header.links.NAME}</a> </li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> {% ENDIF %}
и замените на код:
<!-- Верхний блок навигации --> <div class="containerin col-" id="top-menu"> <ul class="pad-box cont620" id="mainmenu"> <li><a href="ссылка" title="На главную">Главная</a></li> <li><a href="ссылка" title="В каталог">Каталог</a></li> <li><a href="ссылка" title="Помощь">Помощь</a> <ul> {% FOR menu %} {% FOR header1 %} {% FOR links %} <li><a href="{menu.header1.links.URL}" {% IF menu.header1.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header1.links.TITLE %}title="{menu.header1.links.TITLE}"{% ENDIF %}>{menu.header1.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </li> <li><a href="ссылка" title="Контакты">Контакты</a></li> <li><a href="ссылка" title="Корзина">Корзина</a></li> <li><a href="ссылка" title="Личный кабинет">Войти в ЛК</a></li> </ul> <div class="clr"></div> </div> <!-- end Верхний блок навигации -->
Замените "ссылка" на ссылки на соответствующие с страницы.
Далее в конце main.css добавьте код:
#mainmenu{ position:relative; } #mainmenu li{ display: block !important; float: left; } #mainmenu li ul { display: none; left: 181; width:200px; position: absolute; top: 29px; z-index:99; } #mainmenu li:hover ul{display:block;} #mainmenu li ul li{ width:200px; padding:10px; border-bottom:1px solid #000; background:#999; } #mainmenu li ul li a{ font: bold 12px/20px Helvetica,Tahoma,Arial,sans-serif; padding: 0px; background:none; } #mainmenu li ul li a:hover{ background:none; } #mainmenu li a { color: white; text-decoration: none; margin-left: 20px; font-size: 16px; line-height: 29px; }
#3
Отправлено 11 Декабрь 2015 - 12:22
Здравствуйте, сделал все инструкции то что нужно получилось, осталось пара вопросов
1. почему то меню сползло вниз на рисунке видно что пункты главная и каталог остались на месте в черном поле, а остальные сползли вниз.
2. если не сложно уточните где правятся размер шрифта, фон и цвет выпадающего меню.
1. почему то меню сползло вниз на рисунке видно что пункты главная и каталог остались на месте в черном поле, а остальные сползли вниз.
2. если не сложно уточните где правятся размер шрифта, фон и цвет выпадающего меню.
#4
Отправлено 11 Декабрь 2015 - 12:52
Dmitri (11 Декабрь 2015 - 12:22) писал:
Здравствуйте, сделал все инструкции то что нужно получилось, осталось пара вопросов
1. почему то меню сползло вниз на рисунке видно что пункты главная и каталог остались на месте в черном поле, а остальные сползли вниз.
2. если не сложно уточните где правятся размер шрифта, фон и цвет выпадающего меню.
1. почему то меню сползло вниз на рисунке видно что пункты главная и каталог остались на месте в черном поле, а остальные сползли вниз.
2. если не сложно уточните где правятся размер шрифта, фон и цвет выпадающего меню.
<!-- Верхний блок навигации --> <div class="containerin col-" id="top-menu"> <ul class="pad-box cont620" id="mainmenu"> <li><a href="http://bmodnitsa.ru/" title="На главную">Главная</a></li> <li><a href="http://bmodnitsa.ru/catalog" title="В каталог">Каталог</a></li> <li><a href="http://bmodnitsa.ru/page/help" title="Информация для клиентов">Информация для клиентов</a> <ul> {% FOR menu %} {% FOR header1 %} {% FOR links %} <li><a href="{menu.header1.links.URL}" {% IF menu.header1.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header1.links.TITLE %}title="{menu.header1.links.TITLE}"{% ENDIF %}>{menu.header1.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </li> <li><a href="http://bmodnitsa.ru/page/kontact" title="Контакты">Контакты</a></li> <li><a href="http://bmodnitsa.ru/cart" title="Корзина">Корзина</a></li> <li><a href="http://bmodnitsa.ru/user/login" title="Личный кабинет">Войти в ЛК</a></li> </ul> <div class="clr"></div> </div> <!-- end Верхний блок навигации -->
и перенесите после строк
<div class="container"> <div class="column full" id="header">
далее в style.css найдите
#search_block_top{position:static;float:right;margin:26px 10px 0 0}
замените на
#search_block_top{position:static;float:right;margin:2px 10px 0 0}
далее найдите
#header_shopping_cart{position: static;width:170px;float:right;clear:both;margin-top:26px;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box; background:#f7f7f7 url('{ASSETS_IMAGES_PATH}cart_red.png?design=autumn') no-repeat 12px;border:1px solid #cecece;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px; box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05)}замените на
#header_shopping_cart{position: static;width:170px;float:right;clear:both;margin-top:2px;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box; background:#f7f7f7 url('{ASSETS_IMAGES_PATH}cart_red.png?design=autumn') no-repeat 12px;border:1px solid #cecece;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px; box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05)}
далее найдите
#header #cart_block{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ; -webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);top:86px; background:#fcfcfc;width:auto;*border: solid 1px #c0c0c0;}замените на
#header #cart_block{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ; -webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1) ;box-shadow:0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);top:44px; background:#fcfcfc;width:auto;*border: solid 1px #c0c0c0;}2. Найдите в style.css
#mainmenu li ul li{ width:200px; padding:10px; border-bottom:1px solid #000; background:#999; } #mainmenu li ul li a{ font: bold 12px/20px Helvetica,Tahoma,Arial,sans-serif; padding: 0px; background:none; }и
#mainmenu li a { color: white; text-decoration: none; margin-left: 20px; font-size: 16px; line-height: 29px; }где цвет фона это background:#999;
цвет текста color: white;
размер шрифта это font: bold 12px/20px Helvetica,Tahoma,Arial,sans-serif;
#5
Отправлено 11 Декабрь 2015 - 16:56
Огромное спасибо, все получилось !
#6
Отправлено 30 Август 2016 - 10:13
Добрый день. попытался создать, подобное меню по вышеуказанной инструкции. нозадача немного другая))))
- перемеенная header, уже используется. как прописать, для другойпеременной.
- нужно всплывающие меню для двух пунктов : "о компании" и "Услуги"
#7
Отправлено 31 Август 2016 - 05:51
В инструкции выше используется переменная header1, можете назвать и по своему просто в коде выше необходимо будет изменить переменную header1 на свою.
#8
Отправлено 01 Сентябрь 2016 - 13:52
Vaccina (31 Август 2016 - 05:51) писал:
В инструкции выше используется переменная header1, можете назвать и по своему просто в коде выше необходимо будет изменить переменную header1 на свою.
#9
Отправлено 02 Сентябрь 2016 - 04:03
Изменения произвести в этом случае аналогичные, приведу подробный пример на основе вашего шаблона.
Допустим нам необходимо сделать выпадающие пункты "О компании" и "Услуги", в разделе Сайт - Меню - в верхнем меню удаляем оба этих пункта и создаем два новых блока меню с переменными "uslugi" и "company" (переменные указывать без кавычек), в них добавляем необходимые выпадающие пункты.
В шаблоне HTML находим:
заменяем на:
Далее в main.css находим:
заменим на:
В результате данных изменений получим:
Допустим нам необходимо сделать выпадающие пункты "О компании" и "Услуги", в разделе Сайт - Меню - в верхнем меню удаляем оба этих пункта и создаем два новых блока меню с переменными "uslugi" и "company" (переменные указывать без кавычек), в них добавляем необходимые выпадающие пункты.
В шаблоне HTML находим:
<div class="navbar-collapse collapse"> <ul class="top-navbar-links"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a 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="navbar-collapse collapse"> <ul class="top-navbar-links"> <li><a href="#" title="О компании">О компании</a> <ul> {% FOR menu %} {% FOR company %} {% FOR links %} <li><a href="{menu.company.links.URL}" {% IF menu.company.links.TITLE %}title="{menu.company.links.TITLE}"{% ENDIF %}>{menu.company.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </li> <li><a href="#" title="Услуги">Услуги</a> <ul> {% FOR menu %} {% FOR uslugi %} {% FOR links %} <li><a href="{menu.uslugi.links.URL}" {% IF menu.uslugi.links.TITLE %}title="{menu.uslugi.links.TITLE}"{% ENDIF %}>{menu.uslugi.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> </li> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a 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>
Далее в main.css находим:
.header-top .header-top-left .top-navbar-links {float:left;list-style:none;overflow: hidden;height: 50px;} .header-top .header-top-left .top-navbar-links li {float: left;border-left: 1px solid #fff;height: 50px;background-repeat: no-repeat;} .header-top .header-top-left .top-navbar-links li a {padding: 18px 18px 12px 18px;display: block;font-size:115%;} .header-top .header-top-left .top-navbar-links li:hover {background-color: #1cae5c;} .header-top .header-top-left .top-navbar-links li:hover a {color: #fff;text-decoration: none;}
заменим на:
.header-top .header-top-left .top-navbar-links {float:left;list-style:none;height: 50px;} .header-top .header-top-left .top-navbar-links li {position: relative;float: left;border-left: 1px solid #fff;height: 50px;background-repeat: no-repeat;} .header-top .header-top-left .top-navbar-links li a {padding: 18px 18px 12px 18px;display: block;font-size:115%;} .header-top .header-top-left .top-navbar-links li:hover {background-color: #1cae5c;} .header-top .header-top-left .top-navbar-links li:hover a {color: #fff;text-decoration: none;} .header-top .header-top-left .top-navbar-links li ul { display: none; position: absolute; left: 0; top: 43.8px; background: #fff; width: 150px; } .header-top .header-top-left .top-navbar-links li:hover ul { display: block; } .header-top .header-top-left .top-navbar-links li ul li { list-style: none; float: none; width: 100%; } .header-top .header-top-left .top-navbar-links li ul li a { color: #21AE5E; } .header-top .header-top-left .top-navbar-links li ul li:hover a { color: #ffffff; }
В результате данных изменений получим:
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных