Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

Расширяем возможности горизонтального меню... (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)
Ставим и отписываемся...

 

Змінено користувачем tim21701
  • +1 12
Надіслати
Поділитися на інших сайтах

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

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

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

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

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

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

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


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

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

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

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

  • 3 weeks later...

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

Screen:

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

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


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

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

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


Подскажите как решить проблему? Настроил меню. Установил 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
Надіслати
Поділитися на інших сайтах


при добавлении модуля новостей через 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

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


  • 2 weeks later...

tim21701

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

<div id="menu_holder">

<div class="inner">

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

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

</div>

</body>

  • +1 1
Надіслати
Поділитися на інших сайтах


  • 3 weeks later...

Изображение

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

Шаг 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: подгоняете размер таблицы, шрифты и прочее под свой шаблон. Я стилями не игрался - времени не было.

Змінено користувачем tim21701
Надіслати
Поділитися на інших сайтах


  • 2 weeks later...

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

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

post-8616-0-75907900-1330541511_thumb.jpg

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


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

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

Изображение

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


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

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

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

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

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


  • 1 month later...

Мега-Меню, крутая штука, работает у меня на основном магазине превосходно. НО магазин был без 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 )

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


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

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

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

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

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

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

:|

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


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

Ви повинні бути користувачем, щоб залишити коментар

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

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.