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


Открыть Каталог На Один Уровень


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

#21 dervish

dervish

    Продвинутый пользователь

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

Отправлено 17 Декабрь 2012 - 09:15

Просмотр сообщенияБратишка (10 Декабрь 2012 - 07:35) писал:

Установил менюшку вот эту http://www.rudebox.o...dvizshnoe-menu/ очень удобная, можете посмотреть тут http://bp44.ru/, кому интересно. Будет время, поделюсь с моей любительской точки зрения, как его поставить.
Очень интересно. Поделитесь опытом, пожалуйста.

#22 Братишка

Братишка

    Продвинутый пользователь

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

Отправлено 20 Декабрь 2012 - 15:26

Рассказываю, как я добавил раздвижную менюшку.
Для начала я нарисовал кнопки (нижняя половина - нажатое состояние):
blue.png
spn.png
Потом прописал стили кнопок в 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 Братишка

Братишка

    Продвинутый пользователь

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

Отправлено 23 Декабрь 2012 - 21:47

Братишки, кто поставил подобную менюшку, отпишите. Интересно посмотреть, что получилось;)

#24 Raritet1982

Raritet1982

    Новичок

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

Отправлено 16 Февраль 2013 - 21:06

Подскажите ,а как сделать чтоб запоминало позицию ( куда нажали ) при обновлении страницы?

#25 miyako

miyako

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

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

Отправлено 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 vender12

vender12

    Продвинутый пользователь

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

Отправлено 01 Май 2013 - 19:31

Изображение



так возможно сделать наводишь на категории курсором появляются все вкладки, как тут www.focalprice.com

и еще вопрос возможно сделать что бы к примеру акция или регистрация появлялась всплывающем окном на входе на сайт SL-193288

скриншот http://i058.radikal....a4626c1099d.jpg                 ...

#27 Koderhan

Koderhan

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

  • Модератоpы
  • 6 227 сообщений

Отправлено 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 vender12

vender12

    Продвинутый пользователь

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

Отправлено 02 Май 2013 - 14:38

Просмотр сообщенияKoderhan (01 Май 2013 - 20:16) писал:

Да. Возможно сделать всплывающее окно. Только оно будет появляться всегда когда пользователь заходит в свой личный кабинет.
Как это сделать.

Архив Прикрепленный файл 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 vender12

vender12

    Продвинутый пользователь

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

Отправлено 09 Май 2013 - 17:21

кто ни будь ответит

возможно сделать наводишь на категории курсором появляются все вкладки, как тут www.focalprice.com

#30 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 14 Май 2013 - 04:55

вопрос о выпадающем каталоге неоднократно обсуждался у нас, инструкции по реализации вы можете просмотреть по сл.ссылке:
http://forum.storela...мышкойна-катег/




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

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