Братишка (10 Декабрь 2012 - 07:35) писал:
2
Открыть Каталог На Один Уровень
Автор Братишка, 19 нояб. 2012 23:02
Сообщений в теме: 29
#21
Отправлено 17 Декабрь 2012 - 09:15
Установил менюшку вот эту http://www.rudebox.o...dvizshnoe-menu/ очень удобная, можете посмотреть тут http://bp44.ru/, кому интересно. Будет время, поделюсь с моей любительской точки зрения, как его поставить.
#22
Отправлено 20 Декабрь 2012 - 15:26
Рассказываю, как я добавил раздвижную менюшку.
Для начала я нарисовал кнопки (нижняя половина - нажатое состояние):
Потом прописал стили кнопок в main.css:
После этого добавляем скрипты Скрипты для меню.zip 2,54К 120 Количество загрузок: на ваш сайт и подключаем их в шаблоне HTML:
добавляем
Удачно освоить!
P.S.:Не забудьте бэкапнуться перед изменением шаблонов.
Для начала я нарисовал кнопки (нижняя половина - нажатое состояние):
Потом прописал стили кнопок в main.css:
/* Новое меню */ body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ margin:0px; padding:0px; } /* Задаем цвет по умолчанию, фон и шрифт */ body{ color:#000000; font:12px Verdana, Geneva, sans-serif !important; } ul{ margin:0; padding:0; } ul.container{ width:225px; margin:0 auto; padding:0px; } li{ list-style:none; text-align:left; } /* Главные элементы списка */ li.menu{ padding:5px 0; width:100%; } li.butt a{ display:block; font:bold 13px Verdana, Geneva, sans-serif !important; border-radius:8px; height:26px; overflow:hidden; padding:8px 20px 0; position:relative; width:185px; } li.butt a:hover{ text-decoration:none; } li.butt a span{ height:32px; position:absolute; right:0; top:0; width:0px; display:block; } /* Разные цветовые схемы для разных отделов */ li.butt a.blue{background:url({ASSETS_IMAGES_PATH}blue.png) repeat-x top left; color:#ffffff;} li.butt a.blue span{ background:url({ASSETS_IMAGES_PATH}blue.png) repeat-x top right;} li.butt a.vdv{background:url({ASSETS_IMAGES_PATH}vdv.png) repeat-x top left; color:#ffffff;} li.butt a.vdv span{ background:url({ASSETS_IMAGES_PATH}vdv.png) repeat-x top right;} li.butt a.vv{background:url({ASSETS_IMAGES_PATH}vv.png) repeat-x top left; color:#ffffff;} li.butt a.vv span{ background:url({ASSETS_IMAGES_PATH}vv.png) repeat-x top right;} li.butt a.spn{background:url({ASSETS_IMAGES_PATH}spn.png) repeat-x top left; color:#ffffff;} li.butt a.spn span{ background:url({ASSETS_IMAGES_PATH}spn.png) repeat-x top right;} li.butt a.afgan{background:url({ASSETS_IMAGES_PATH}afgan.png) repeat-x top left; color:#ffffff;} li.butt a.afgan span{ background:url({ASSETS_IMAGES_PATH}afgan.png) repeat-x top right;} li.butt a.slav{background:url({ASSETS_IMAGES_PATH}slav.png) repeat-x top left; color:#ffffff;} li.butt a.slav span{ background:url({ASSETS_IMAGES_PATH}slav.png) repeat-x top right;} li.butt a.kazak{background:url({ASSETS_IMAGES_PATH}kazak.png) repeat-x top left; color:#ffffff;} li.butt a.kazak span{ background:url({ASSETS_IMAGES_PATH}kazak.png) repeat-x top right;} /* Эффекты при наведении */ li.butt a:hover{ background-position:bottom left;} li.butt a:hover span{ background-position:bottom right;} /* Расширяющиеся списки */ .dropdown{ display:none; padding-top:5px; width:100%; } /* Каждый элемент в таких списках */ .dropdown li{ background-color:#ffffff; color:#1985b4; margin:5px 0; padding:4px 18px; } label.invalidInput {display:block;color:#b85454;height:auto;WIDTH:auto; font-size:10px; font-weight:normal;margin-top:0px;} input.invalidInput {border:1px solid #b85454 !important;background: #FFECE6 !important;}В этом коде в /* Разные цветовые схемы для разных отделов */ надо указать путь к вашим файлам кнопок. т.е. здесь:
li.butt a.blue{background:url({ASSETS_IMAGES_PATH}blue.png) repeat-x top left; color:#ffffff;} li.butt a.blue span{ background:url({ASSETS_IMAGES_PATH}blue.png) repeat-x top right;}меняем "{ASSETS_IMAGES_PATH}blue.png" на путь к вашему файлу и вместо blue пишете свой класс (у меня, например, классы vv, spn, kazak)
После этого добавляем скрипты Скрипты для меню.zip 2,54К 120 Количество загрузок: на ваш сайт и подключаем их в шаблоне HTML:
добавляем
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.easing.1.3.js"></script> <script type="text/javascript" src="{ASSETS_JS_PATH}script.js"></script>после строчки
<!-- Скрипты магазина -->И, наконец, я добавил уже само меню в шаблон HTML вместо каталога, те, после строчки
<div id="left">удалил каталог и вставил вместо него код
<!-- Меню товары --> <div id="main"> <div class="blocktitle bluesmall fnt14b txtalgncnt blue"><a href="http://bp44.ru/catalog/%D0%A2%D0%BE%D0%B2%D0%B0%D1%80%D1%8B">Товары</a></div> <ul class="container"> <li class="menu"> <ul> <li class="butt"><a href="#" class="blue">Подарки "Премиум"<span></span></a></li> <li class="dropdown"> <ul> <li><a href="http://bp44.ru/catalog/%D0%A1%D0%B5%D1%80%D0%B5%D0%B1%D1%80%D0%BE-2">Серебро</a></li> <li><a href="http://bp44.ru/catalog/%D0%9F%D0%BE%D0%B4%D0%B0%D1%80%D0%BE%D0%BA-%D0%B2%D0%BE%D0%B8%D0%BD%D1%83">Подарок воину</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="butt"><a href="#" class="blue">Обложки на документы<span></span></a></li> <li class="dropdown"> <ul> <li><a href="http://bp44.ru/catalog/%D0%92%D0%BE%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5-%D0%B1%D0%B8%D0%BB%D0%B5%D1%82%D1%8B">Военные билеты</a></li> <li><a href="http://bp44.ru/catalog/%D0%9F%D0%B0%D1%81%D0%BF%D0%BE%D1%80%D1%82%D0%B0">Паспорта</a></li> <li><a href="http://bp44.ru/catalog/%D0%90%D0%B2%D1%82%D0%BE%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B">Автодокументы</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="butt"><a href="#" class="blue">Сувениры<span></span></a></li> <li class="dropdown"> <ul> <li><a href="http://bp44.ru/catalog/%D0%97%D0%BD%D0%B0%D1%87%D0%BA%D0%B8-%D0%A4%D1%80%D0%B0%D1%87%D0%BD%D0%B8%D0%BA%D0%B8">Значки-фрачники</a></li> <li><a href="http://bp44.ru/catalog/%D0%91%D1%80%D0%B5%D0%BB%D0%BE%D0%BA%D0%B8-%D0%BA%D1%80%D1%83%D0%B3%D0%BB%D1%8B%D0%B5-2">Брелоки круглые</a></li> <li><a href="http://bp44.ru/catalog/%D0%91%D1%80%D0%B5%D0%BB%D0%BE%D0%BA%D0%B8-%D0%BF%D1%80%D1%8F%D0%BC%D0%BE%D1%83%D0%B3%D0%BE%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-2">Брелоки прямоугольные</a></li> <li><a href="http://bp44.ru/catalog/%D0%9C%D0%B0%D0%B3%D0%BD%D0%B8%D1%82%D1%8B-2">Магниты</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="butt"><a href="#" class="blue">Наклейки<span></span></a></li> <li class="dropdown"> <ul> <li><a href="http://bp44.ru/catalog/%D0%9D%D0%B0%D0%BA%D0%BB%D0%B5%D0%B9%D0%BA%D0%B8-%D0%BD%D0%B0-%D0%B0%D0%B2%D1%82%D0%BE">Наклейки на автомобиль</a></li> <li><a href="http://bp44.ru/catalog/%D0%9D%D0%B0%D0%BA%D0%BB%D0%B5%D0%B9%D0%BA%D0%B8-3D-%D0%BD%D0%B0-%D1%82%D0%B5%D0%BB%D0%B5%D1%84%D0%BE%D0%BD">Наклейки 3D на телефон</a></li> <li><a href="http://bp44.ru/catalog/%D0%9D%D0%B0%D0%BA%D0%BB%D0%B5%D0%B9%D0%BA%D0%B8-3D-%D1%81%D1%80%D0%B5%D0%B4%D0%BD%D0%B8%D0%B5">Наклейки 3D средние</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="butt"><a href="#" class="blue">Трикотаж<span></span></a></li> <li class="dropdown"> <ul> <li><a href="http://bp44.ru/catalog/%D0%A4%D1%83%D1%82%D0%B1%D0%BE%D0%BB%D0%BA%D0%B8-2">Футболки</a></li> <li><a href="http://bp44.ru/catalog/%D0%A2%D0%B5%D0%BB%D1%8C%D0%BD%D1%8F%D1%88%D0%BA%D0%B8">Тельняшки</a></li> <li><a href="http://bp44.ru/catalog/%D0%94%D0%B6%D0%B5%D0%BC%D0%BF%D0%B5%D1%80%D1%8B-2">Джемперы</a></li> </ul> </li> </ul> </li> <li class="menu"> <ul> <li class="butt"><a href="#" class="blue">Прикольные мелочи<span></span></a></li> <li class="dropdown"> <ul> <li><a href="http://bp44.ru/catalog/%D0%9E%D1%80%D0%B8%D0%B3%D0%B8%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D0%BF%D0%BE%D0%B4%D0%B0%D1%80%D0%BA%D0%B8">Оригинальные подарки</a></li> </ul> </li> </ul> </li> </ul> <div class="clear"></div> </div> <!-- END Меню товары -->Меню состоит вот из таких блоков, где вы пишете название кнопки и выпадающие пункты
<li class="menu"> <ul> <li class="butt"><a href="#" class="blue">НАЗВАНИЕ КНОПКИ<span></span></a></li> <li class="dropdown"> <ul> <li><a href="ССЫЛКА НА 1-Й ВЫПАДАЮЩИЙ ПУНКТ">НАЗВАНИЕ 1-ГО ВЫПАДАЮЩЕГО ПУНКТА</a></li> <li><a href="ССЫЛКА НА 2-Й ВЫПАДАЮЩИЙ ПУНКТ">НАЗВАНИЕ 2-ГО ВЫПАДАЮЩЕГО ПУНКТА</a></li> </ul> </li> </ul> </li>то есть редактировать, добавлять новые пункты к меню придется в коде шаблона HTML.
Удачно освоить!
P.S.:Не забудьте бэкапнуться перед изменением шаблонов.
#23
Отправлено 23 Декабрь 2012 - 21:47
Братишки, кто поставил подобную менюшку, отпишите. Интересно посмотреть, что получилось
#24
Отправлено 16 Февраль 2013 - 21:06
Подскажите ,а как сделать чтоб запоминало позицию ( куда нажали ) при обновлении страницы?
#25
Отправлено 17 Февраль 2013 - 08:59
Raritet1982 (16 Февраль 2013 - 21:06) писал:
Подскажите ,а как сделать чтоб запоминало позицию ( куда нажали ) при обновлении страницы?
Вставьте в шаблон HTML перед тегом </head> код:
<script type="text/javascript"><!— $(‘div.containerin li’).each(function () {if (this.getElementsByTagName("a")[0].href == location.href) this.className = "selected";}); //—></script>
#26
Отправлено 01 Май 2013 - 19:31
так возможно сделать наводишь на категории курсором появляются все вкладки, как тут www.focalprice.com
и еще вопрос возможно сделать что бы к примеру акция или регистрация появлялась всплывающем окном на входе на сайт SL-193288
скриншот http://i058.radikal....a4626c1099d.jpg ...
#27
Отправлено 01 Май 2013 - 20:16
vender12 (01 Май 2013 - 19:31) писал:
так возможно сделать наводишь на категории курсором появляются каталоги, если наводишь на каталоги появляются под каталоги как тут aliexpress.com в точности .
и еще вопрос возможно сделать что бы к примеру акция или регистрация появлялась всплывающем окном на входе на сайт SL-193288
скриншот http://i058.radikal....a4626c1099d.jpg
Как это сделать.
Архив Messi-master.zip 10,55К 105 Количество загрузок: распоковать на компьютере.
Загрузить файлы в раздел Сайт -> Редактор тем.
В файле "HTML" подключим скрипты.
До кода:
<!-- Скрипты магазина --> <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>Добавить:
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}messi.min.css" type="text/css" /> <script type="text/javascript" src="{ASSETS_STYLES_PATH}messi.min.js"></script>Теперь можно вставить само всплывающее окно.
В файле "".
После кода:
<div class="page-headline"> <h1>Личный кабинет</h1> </div>Добавить:
<script> new Messi('<p>Тут может быть любой html код.</p>', {title: 'Акция!', modal: true}); </script>
#28
Отправлено 02 Май 2013 - 14:38
Koderhan (01 Май 2013 - 20:16) писал:
Да. Возможно сделать всплывающее окно. Только оно будет появляться всегда когда пользователь заходит в свой личный кабинет.
Как это сделать.
Архив Messi-master.zip распоковать на компьютере.
Загрузить файлы в раздел Сайт -> Редактор тем.
В файле "HTML" подключим скрипты.
До кода:
В файле "".
После кода:
Как это сделать.
Архив Messi-master.zip распоковать на компьютере.
Загрузить файлы в раздел Сайт -> Редактор тем.
В файле "HTML" подключим скрипты.
До кода:
<!-- Скрипты магазина --> <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>Добавить:
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}messi.min.css" type="text/css" /> <script type="text/javascript" src="{ASSETS_STYLES_PATH}messi.min.js"></script>Теперь можно вставить само всплывающее окно.
В файле "".
После кода:
<div class="page-headline"> <h1>Личный кабинет</h1> </div>Добавить:
<script> new Messi('<p>Тут может быть любой html код.</p>', {title: 'Акция!', modal: true}); </script>
возможно сделать наводишь на категории курсором появляются все вкладки, как тут www.focalprice.com
#29
Отправлено 09 Май 2013 - 17:21
кто ни будь ответит
возможно сделать наводишь на категории курсором появляются все вкладки, как тут www.focalprice.com
возможно сделать наводишь на категории курсором появляются все вкладки, как тут www.focalprice.com
#30
Отправлено 14 Май 2013 - 04:55
вопрос о выпадающем каталоге неоднократно обсуждался у нас, инструкции по реализации вы можете просмотреть по сл.ссылке:
http://forum.storela...мышкойна-катег/
http://forum.storela...мышкойна-катег/
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных