how-to [How-To] Делаем МЕГА-МЕНЮ

tim21701 · 21 грудня 2011

Расширяем возможности горизонтального меню... (1.5.х)

Открываем catalog/view/theme/ВАША_ТЕМА/template/common/header.tpl и перед тегом </head> добавляем скрипт:

<script src="catalog/view/javascript/MEGAmenu.js" type="text/javascript"></script>

В этом же файле, находим и удаляем блок:

<div id="menu"><ul><?php foreach ($categories as $category) { ?><li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a><?php if ($category['children']) { ?><div><?php for ($i = 0; $i < count($category['children'])/>/> { ?><ul><?php $j = $i + ceil(count($category['children']) / $category['column']); ?><?php for (; $i < $j; $i++) { ?><?php if (isset($category['children'][$i])) { ?><li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li><?php } ?><?php } ?></ul><?php } ?></div><?php } ?></li><?php } ?></ul></div>

В самом конце файла добавляем:

<div id="menu_holder"><div class="inner"><?php include 'MEGAmenu.php'; ?><div class="clear"></div></div></body>

Открываем файл catalog/view/theme/ВАША_ТЕМА/stylesheet/stylesheet.css и (примерно с 316 по 389 строки) удаляем всё, что относится к меню:

/* menu */
#menu {
background: #585858;
border-bottom: 1px solid #000000;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
}
#menu > ul > li:hover {
background: #000;
}
#menu > ul > li > a {
font-size: 13px;
color: #FFF;
line-height: 14px;
text-decoration: none;
display: block;
padding: 12px 15px 11px 15px;
z-index: 6;
position: relative;
}
#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #000000;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
background: #000000;
}
#menu > ul > li > div > ul > li > a {
color: #FFFFFF;
}

Вместо стилей стандартного меню, мы будем использовать свои. Вставляем:

/* MEGA-MENU */
#menu_holder {
width:100%;
background-color:#585858;
border-bottom: 1px solid #000000;
height: 37px;
position:relative;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
}
.menu {
width:980px;
min-height:70px;
clear:both;
padding:0px;
margin-bottom: -17px;
}
.menu ul#topnav ul.children li.pic_name h3 a{
float:left;
margin:0 0 0 0;
font-size:30px;
}
.menu ul#topnav ul.children li.pic_name h3 a span {
padding:30px 0 0 0;
}
.menu ul#topnav ul.children li.pic_name h3 a:hover {
color:#CCCCCC;
}
.menu ul#topnav {
margin:0;
padding:0;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
display:block;
width:100%;
min-height:45px;
position:relative;
}
.menu ul#topnav li {
display: block;
float: left;
list-style: none;
margin:0;
z-index:1099;
height: 50px;
line-height: 20px;
}
.menu ul#topnav li.dropdown {
background:url(../image/arrow-down.png) 97% 15px no-repeat;
}
.menu ul#topnav li a {
color: #FFFFFF;
display: block;
float: left;
font-size: 13px;
padding: 9px 15px;
text-decoration: none;
white-space: nowrap;
}
.menu ul#topnav li:hover {
z-index:1600;
}
.menu ul#topnav li:hover a {
color:#38b0e3;
/* background-color:#fff; */
}
.menu ul#topnav li.dropdown:hover a {
color:#38b0e3;
/* background-color:#fff; */
}
.menu ul#topnav ul.children {
position:absolute;
display:none;
width:980px;
top:44px;
left:0;
z-index:9998;
padding:5px 0 30px 0;
margin:0;
background:url(../image/back_menu.png) bottom center no-repeat;
float:left;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
-khtml-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
}
.menu ul#topnav ul.children2 {
position:absolute;
display:none;
top:43px;
left:0px;
z-index:9999;
padding:5px 0px;
margin:0;
float:left;
background-color:#fff;
width:100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border-radius: 5px;
box-shadow: 0px 0px 5px #999999;
-moz-box-shadow: 0px 0px 5px #999999;
-webkit-box-shadow: 0px 0px 5px #999999;
}
.menu ul#topnav ul.children li {
float:left;
height:auto;
border-bottom:1px solid #f1f1f1;
position:relative;
margin:0 0 2px 2px;
padding:0;
width:33%;
}
.menu ul#topnav ul.children li img {
float:left;
margin:0px 15px 0px 0px;
border:1px solid #fff;
}
ul.children li a span {
padding:10px 0;
float:left;
}
.menu ul#topnav ul.children2 li {
float:left;
height:auto;
border-bottom:1px solid #f1f1f1;
position:relative;
margin:0;
padding:0;
width:100%;
}
.menu ul#topnav ul.children a, .menu ul#topnav li:hover ul.children a {
display:block;
height:auto;
width:100%;
padding:0px 0px 2px 0px;
float:left;
font-size:12px;
font-weight:normal;
background:none;
text-align:left;
text-transform:none;
color:#333;
border:none;
margin:0;
}
.menu ul#topnav ul.children2 a, .menu ul#topnav li:hover ul.children2 a {
display:block;
height:auto;
width:285px;
padding:10px 8px 10px 13px;
float:left;
font-size:12px;
font-weight:normal;
background:none;
text-align:left;
text-transform:none;
color:#333;
border:none;
margin:0;
}
.menu ul#topnav li:hover .children li ul.children2 a {
color:#222;
}
.menu ul#topnav li:hover .children li ul.children2 a:hover {
color:#666666;
/* background-color:#f1f1f1; */
}
.menu ul#topnav ul.children li.dropdown, .menu ul#topnav li:hover ul.children li.dropdown {
background:url(../image/arrow-down.png) 270px 16px no-repeat;
}
.menu ul#topnav ul.children li a:hover {
color:#cecece;
}
.menu ul#topnav ul.children li.pic_name {
padding:5px 5px 35px 5px;
border-bottom:1px solid #e1e1e1;
width:970px;
height:75px;
margin:0 0 5px 0;
display:block;
}
.menu ul#topnav ul.children li.pic_name img {
float:left;
margin:0 10px 0 0;
}
/* MEGA-MENU */

Файл MEGAmenu.php распаковываем в папку catalog/view/theme/ВАША_ТЕМА/template/common/
Изображение back_menu.png в папку catalog/view/theme/ВАША_ТЕМА/image/
Скрипт в catalog/view/javascript/

MEGAmenu.zip

Цвет и размер шрифта в css. Размер "изображения категорий" в файле MEGAmenu.php, строка 14 (по умолчанию 80х80).

Собиралось на 1.5.3.1 но, должно пойти на всех 1.5.х (в том числе и на ocStore v1.0.1)
Ставим и отписываемся...

Змінено 4 березня 2015 користувачем tim21701

mkomblr · 23 грудня 2011

ЁЁЁййй. Супер!!! Спасибо!!!

Немного подправьте только:

В самом конце файла добавляем:

- добавляем туда где удалили;

- вместо </body> (опечатка) - </div>

И что где убрать чтобы название главных категорий второй раз не появлялось?

tim21701 · 23 грудня 2011

...название главных категорий второй раз не появлялось?

Так в этом и есть вся прелесть и фишка этого меню, что он категории картинками выводит...

Если без них - то мрачно будет (ИМХО)

ixion · 24 грудня 2011

Спасибо за меню. А без картинок и названия текущей категории было бы неплохо. В идеале бы такое меню найти как на http://rozetka.com.ua/

tumanchik · 24 грудня 2011

а как такое сделать на опен карт 1.4.9.3?

tim21701 · 24 грудня 2011

а как такое сделать на опен карт 1.4.9.3?

А где у 1.4.9.3 горизонтально меню. :D

Benjamin · 10 січня 2012

Установил, всё получилось. Спасибо! :)

ELITE · 10 січня 2012

Одна проблема. почему меню и баннер сливаются? и как исправить?

Screen:

DominicCooper · 10 січня 2012

Одна проблема. почему меню и баннер сливаются? и как исправить?

Screen:

Я так понял, что это маленький баг...достаточно сделать чуть меньше подкатегорий и дать им картинки и всё станет на свои места.

ELITE · 10 січня 2012

Я так понял, что это маленький баг...достаточно сделать чуть меньше подкатегорий и дать им картинки и всё станет на свои места.

Вы правы. стер всеволиш 3 подкатегории в MP3 и все зомечатьльно :-)

Artemm · 10 січня 2012

Не совсем понял, какое Вам меню нужно, которое "зелёное"? ))))

Да, а можно его сделать как вы показывали на 1.5?

tim21701 · 11 січня 2012

нет, на 1.4.х так не сделать... это меню - лишь "дополнение" к уже существующему на 1.5...

serxion · 16 січня 2012

Подскажите как решить проблему? Настроил меню. Установил VQMOD и поставил модуль зума "product zoom" вылазит ошибка - Warning

: include(MEGAmenu.php) [

function.include

]: failed to open stream: No such file or directory in

Z:homelocalhostwwwopenvqmodvqcachevq2-catalog_view_theme_default_template_common_header.tpl

on line

128Warning

: include() [

function.include

]: Failed opening 'MEGAmenu.php' for inclusion (include_path='.;/usr/local/php5/PEAR') in

Z:homelocalhostwwwopenvqmodvqcachevq2-catalog_view_theme_default_template_common_header.tpl

on line

128

serxion · 16 січня 2012

при добавлении модуля новостей через vqmod почти та же история

Warning: include(MEGAmenu.php) [function.include]: failed to open stream: No such file or directory in Z:homelocalhostwwwopenvqmodvqcachevq2-catalog_view_theme_default_template_common_header.tpl on line 123Warning: include() [function.include]: Failed opening 'MEGAmenu.php' for inclusion (include_path='.;/usr/local/php5/PEAR') in Z:homelocalhostwwwopenvqmodvqcachevq2-catalog_view_theme_default_template_common_header.tpl on line 123

Benjamin · 19 січня 2012

присоединяюсь, та же проблема с модулем зума. помогите

Benjamin · 20 січня 2012

del

xeon8 · 1 лютого 2012

tim21701

Огромное спасибо, супер штука. Только в описании по инсталлу есть небольшая опечатка, последний тег </body> лишний.

<?php include 'MEGAmenu.php'; ?>

</div>

</body>

blogizm · 21 лютого 2012

Не знаю, насколько это решение грамотное, так как я не профессиональный программист.

Шаг 1: Заходим в /ваш_сайт/catalog/view/theme/ваш_шаблон/template/common и находите файл header.tpl;

Шаг 2: Находите в header.tpl строки, отвечающие за вывод главного меню (в стандартном шаблоне это строки 91-116), он имеет следующий вид:

<div id="menu">
  <ul>
	<?php foreach ($categories as $category) { ?>
	<li><?php if ($category['active']) { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>
	  <?php if ($category['children']) { ?>
	  <div>
		<?php for ($i = 0; $i < count($category['children']);) { ?>
		<ul>
		  <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
		  <?php for (; $i < $j; $i++) { ?>
		  <?php if (isset($category['children'][$i])) { ?>
		  <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
		  <?php } ?>
		  <?php } ?>
		</ul>
		<?php } ?>
	  </div>
	  <?php } ?>
	</li>
	<?php } ?>
  </ul>
</div>

Шаг 3: удаляете весь код между <div id="menu"> и последним закрывающим тегом </div>, чтобы получилась такая картина:

<div id="menu">


</div>

Шаг 4: вставляете на освободившееся место табличку со следующими характеристиками, у меня получилось 5 столбцов и 2 строки:

<table border="0" cellpadding="1" cellspacing="1" style="width: 960px; height: 150px">
<tbody>
  <tr>
   <td>
	<center><a href='#'><img src='http://мой_сайт/catalog/view/theme/default/image/картинка_меню.png' border=0 title='Перейти'></a></center></td>
   <td>
	<center><a href='http://мой_сайт/index.php?route=product/category&path=20'><img src='http://мой_сайт/catalog/view/theme/default/image/ картинка_меню .png' border=0 title='Перейти'></a></center></td>
   <td>
	<center><a href='http://мой_сайт/index.php?route=product/category&path=18'><img src='http://мой_сайт/catalog/view/theme/default/image/картинка_меню .png' border=0 title='Перейти'></a></center></td>
   <td>
	<center><a href='http://мой_сайт/index.php?route=product/category&path=25'><img src='http://мой_сайт/catalog/view/theme/default/image/картинка_меню .png' border=0 title='Перейти'></a></center></td>
   <td>
	<center><a href='http://мой_сайт/index.php?route=information/contact'><img src='http://мой_сайт/catalog/view/theme/default/image/картинка_меню .png' border=0 title='Перейти'></a></center></td>
  </tr>
  <tr>
   <td>
	<center><a href="#">Домой</a></center></td>
   <td>
	<center><a href="http:// мой_сайт /index.php?route=product/category&path=20">Компьютеры</a></center></td>
   <td>
	<center><a href="http:// мой_сайт /index.php?route=product/category&path=18">Ноутбуки</a></center></td>
   <td>
	<center><a href="http:// мой_сайт /index.php?route=product/category&path=25">Компоненты</a></center></td>
   <td>
	<center><a href="http:// мой_сайт /index.php?route=information/contact">Контакты</a></center></td>
	<tr></tbody>
</table>

Первая строка, заключенная в <tr>...</tr> отвечает за вывод картинок,а вторая - за текст. Сохраняете и проверяете. Ссылки в пункты меню вставляются вручную, поэтому заранее запишите ссылки на категории из стандартного меню. !!! Выпадающее меню подкатегорий при данном способе не отображается !!! Для того, чтобы был видно выпающее меню, поиграйтесь с тегами <ul> и <li> (кто сделает - распишите, я специально убрал выпадающий список).

Шаг 5: подгоняете размер таблицы, шрифты и прочее под свой шаблон. Я стилями не игрался - времени не было.

Змінено 2 березня 2012 користувачем tim21701

samsonio · 29 лютого 2012

Подскажите как отредактировать количество отображаемых категорий? У меня их слишком много и они не помещаются в одну строку и соответственно сезжают на другую строку!

Скрин прилагается. Убирать галочку в настройках категории не помогает.

iones · 2 березня 2012

У меня после накатывания мега меню, боковая левая панель, где размещаю рекомендуемые и т.п. в результате располагается по центру.

А вот только на Ghrome нормально все работает. На всех остальных браузерах вот такое..

iones · 2 березня 2012

Я понял.... панель размещается сразу же за меню, т.е. если провести линию с последнего пункта меню, не левее...где я сделал и что не так?

tim21701 · 2 березня 2012

iones, что то "не так" с Вашим шаблоном, или с тем, что Вы сделали что то "не так". Мега-меню работает превосходно, и на большинстве шаблонов... Такой глюк как у Вас - вижу впервые.

Nadya · 6 березня 2012

Подскажите как в меню сделать категории в столбик допустим обувь сумки

чтоб сверху было слово обувь, а под ним сумки. И в этих категориях

были названия для под категории.

KaReGlAzKa · 6 квітня 2012

Мега-Меню, крутая штука, работает у меня на основном магазине превосходно. НО магазин был без vqmod, после установки vqmod у меня слетела меню.

В чем может быть причина ? Как исправить ?

Warning: include(MEGAmenu.php) [function.include]: failed to open stream: No such file or directory in Z:homeredroomwwwvqmodvqcachevq-catalog_view_theme_hanashop_template_common_header.tpl on line 157Warning: include() [function.include]: Failed opening 'MEGAmenu.php' for inclusion (include_path='.;/usr/local/php5/PEAR') in Z:homeredroomwwwvqmodvqcachevq-catalog_view_theme_hanashop_template_common_header.tpl on line 157

Строка 157:

	<div class="clear"></div>

Решил проблему ! Закинул мега-меню в vqmod )

magsilver · 13 квітня 2012

Немного не понятен смысл такого мега меню - все красиво, но если ты имеешь мало категорий- но если у меня например 25 категорий, то какой мне от этого меню смысл .

Скрипт меню не дает возможности влиять на количество выводимых категорий в нем - выводит все что имеются. В админке бесполезно ставить и убирать галочки в чекбоксе вывода категорий.

Мне кажется, что это самый большой минус этого меню.

А ведь как было бы здорово - выводишь самые интересные категории в главное меню, а все в боковое..

На =^_^=e купил шаблон,где установлено это меню. Разработчик не предупредил о том что имеет место быть такая проблема, сослался на данный топик.

Получается деньги потрачены зря, да хрен с ними бы, шаблон нравился. Теперь наверно придется идти и покупать нормальное меню за денюшку- если конечно там имеется такая возможности регулировки вывода категорий по разным менюшкам.

:|

Вхід

how-to [How-To] Делаем МЕГА-МЕНЮ

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Схожі публікації

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information