Выпадающее горизонтальное меню категорий для магазина / Сообщение / Плагины и модификации / SX CMS / Форум / SX CMS

Добрый вечер, Гость! Представляем Вам наши форумы. Вы можете зарегистрироваться чтобы писать на форумах или зайдите под своим именем, если Вы уже регистрировались.

Форум

Пользователи

Календарь

Помощь

Поиск

Новые сообщения

Новые темы

Темы без ответов

Форум

SX CMS / Плагины и модификации

Выпадающее горизонтальное меню категорий для магазина

Похожие темы

Выпадающее горизонтальное меню категорий для магазина

Ссылка на сообщение в теме Ссылка на страницу сообщения

Суббота, 27.10.2012, 20:58

lugobor

Группа: Пользователь

Ранг: Новичок

Cообщений: 28

Регистрация: 26.05.2012

Город: Харьков

Разобрался на примере http://gamestar.com.ua/

Качайе архив http://lugobor.org.ua/wp-content/uploads/2012/10/men-status-x.zip

В ваш_сайт/javascripts/ положить из архива файл hnav.js

В ваш_сайт/theme/ваша_тема/shop положить из архива файл shopnavi_h.tpl

В ваш_сайт/theme/ваша_тема/images/page положить из архива картинки down.gif и right.gif

В файл ваш_сайт/theme/ваша_тема/other/header_scripts.tpl вниз, перед  добавьте код

Код

<script language="javascript" src="{$jspath}/hnav.js" type="text/javascript"></script> 
 <script type="text/javascript">
 var arrowimages={ldelim}down:['downarrowclass', '{$imgpath_page}down.gif', 23], right:['rightarrowclass', '{$imgpath_page}right.gif']{rdelim};
 jqueryslidemenu.buildmenu("myslidemenu", arrowimages);
 </script>

В файл ваш_сайт/theme/ваша_тема/css/standard/style.navi.css в самый низ добавить стиль вывода меню (выкладываю стиль с gamestar.com.ua, под себя правьте сами)

Код

.jqueryslidemenu{
 font: bold 12px arial;
 background: #0066CC;
 width: 100%;
 margin-top:1px
 }
 
 .jqueryslidemenu ul{
 margin: 0;
 padding: 0;
 list-style-type: none;
 }
 
 /*Top level list items*/
 .jqueryslidemenu ul li{
 position: relative;
 display: inline;
 float: left;
 }
 
 /*Top level menu link items style*/
 .jqueryslidemenu ul li a{
 display: block;
 background: #0066CC; /*background of tabs (default state)*/
 color: #ccc;
 padding: 8px 20px;
 /*border-right: 1px solid #ccc;*/
 text-decoration: none;
 z-index:10000;
 overflow:visible;
 }
 #myslidemenu {
 overflow:visible;
 z-index:10000;
 }
 
 * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
 display: inline-block;
 }
 
 .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
 color: white;
 }
 
 .jqueryslidemenu ul li a:hover{
 background: #0033ff; /*tab link background during hover state*/
 color: white;
 }
 
 /*1st sub level menu*/
 .jqueryslidemenu ul li ul{
 position: absolute;
 left: 0;
 display: block;
 visibility: hidden;
 }
 
 /*Sub level menu list items (undo style from Top level List Items)*/
 .jqueryslidemenu ul li ul li{
 display: list-item;
 float: none;
 overflow:visible;
 z-index:10000;
 }
 
 /*All subsequent sub menu levels vertical offset after 1st level sub menu */
 .jqueryslidemenu ul li ul li ul{
 top: 0;
 }
 
 /* Sub level menu links style */
 .jqueryslidemenu ul li ul li a{
 font: normal 12px arial;
 width: 160px; /*width of sub menus*/
 padding: 5px;
 margin: 0;
 border-top-width: 0;
 border-top: 1px solid #ccc;
 }
 
 .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
 background: #eff9ff;
 color: black;
 }
 
 /* ######### CSS classes applied to down and right arrow images ######### */
 
 .downarrowclass{
 position: absolute;
 top: 12px;
 right: 7px;
 }
 
 .rightarrowclass{
 position: absolute;
 top: 6px;
 right: 5px;
 }

Теперь выводите само меню в ваш_сайт/theme/ваша_тема/page/main.tpl, shop.tpl и если нужно forums.tpl кодом

Код

{include file="$incpath/shop/shopnavi_h.tpl"}

Благодарности Kurman, ShadoW

Быстрый переход:

Сейчас на сайте

Пользователей: 0, Гостей: 6

Поисковые боты: 105
oBot(24), Bot(71), Googlebot(3), BingBot(6), Yandex

Статистика форума

	Темы	Сообщения	Пользователи
За сутки:	0	0	0
За неделю:	0	0	0
За месяц:	0	0	0
Всего:	1444	9452	3409
Мы приветствуем нового участника: wonad81290

Дни рождения

ser9ey (58)