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

vavan1955 · July 5, 2011

Как то спрашивали выпадающее меню для модуля категорий, покажу как сделать но...

Вводить имя категорий и под категорий придётся вручную!

Открываем файл header.tpl вашего шаблона оформления и перед </head> добавляем скрипт:

<script type="text/javascript">
$(document).ready(function()
{
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url/images/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url/images/down.png)"});
});
});
</script>

Затем открываем файл таблицы стилей stylesheet.css и дописываем внизу:

/* БЛОК МЕНЮ - ВЫПАДАЮЩАЯ ЧАСТЬ */
.menu_head {
display:block;
cursor: pointer;
padding:5px 0px;
border-top:1px solid #fff;
border-bottom:1px solid #ceeaf8;
color:#666;
padding-left:8px;
font-size:12px;
font-weight:bold;
}

.menu_body {
display:none;
}
.menu_body a{
padding:5px 0px;
display:block;
font-size:12px;
}

.menu_body a: hover {
color:#d37f35;
font-size:12px;
text-decoration:none;
)
}


.mcont a{
   display:block;
   padding:5px 0px;
   border-top:1px solid #fff;
   border-bottom:1px solid #ceeaf8;
   background:url(../image/myfon.gif) no-repeat;
   color:#666;
   padding-left:18px;
}

.mcont {
   display:block;
   color:#666;
   padding-left:4px;
}

.mcont a:hover {
   background:url(../image/myfon2.gif) no-repeat;
   color:#d37f35;
}

Теперь осталось открыть category.tpl и заменить вот этим:

<div class="box">
<div class="top"><?php echo $heading_title; ?></div>
<div id="category" class="middle">
<div class="mcont">
<div style="border-bottom:1px solid #ceeaf8;"></div>
<div id="firstpane">
<p class="menu_head">DVD проигрыватели</p>
<div class="menu_body">
<a href="/">Первая категория</a>
<a href="/">Втораяая категория</a>
</div>

<p class="menu_head">Автомагнитолы</p>
<div class="menu_body">
<a href="/car_radio/Alpine/">Alpbne</a>
<a href="/car_radio/Blaupunkt/">Blaupunkt</a>
</div>

<p class="menu_head">Видеокамеры</p>
<div class="menu_body">
<a href="/">Первая категория</a>
<a href="/">Втораяая категория</a>
</div>

<p class="menu_head">Музыкальные центры</p>
<div class="menu_body">
<a href="/">Первая категория</a>
<a href="/">Втораяая категория</a>
</div>

<p class="menu_head">Плееры</p>
<div class="menu_body">
<a href="/">Первая категория</a>
<a href="/">Втораяая категория</a>
</div>

<p class="menu_head">Телевизоры</p>
<div class="menu_body">
<a href="/">Первая категория</a>
<a href="/">Втораяая категория</a>
</div>

<p class="menu_head">Усилители НЧ</p>
<div class="menu_body">
<a href="/">Первая категория</a>
<a href="/">Втораяая категория</a>
</div>

<p class="menu_head">Фотоаппараты</p>
<div class="menu_body">
<a href="/">Первая категория</a>
<a href="/">Втораяая категория</a>
</div>


</div></div></div>
<div class="bottom"> </div>
</div>

Не забываем сохранять эот файл в utf-8 (Без BOM) Ну и сам файл category.tpl пересохраните, чтоб вернуться назад.

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

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

Посмотреть и потыкать в меню можно у меня на сайте ЗДЕСЬ

Поправил, работает

Edited July 5, 2011 by vavan1955

vavan1955 · July 5, 2011

Забыл добавить две картинки а при правке вставить уже никак, вот они:

tehnikawdom · July 5, 2011

Как то спрашивали выпадающее меню для модуля категорий, покажу как сделать но...

Вводить имя категорий и под категорий придётся вручную!

Открываем файл header.tpl вашего шаблона оформления и перед </head> добавляем скрипт:
<script type="text/javascript">
$(document).ready(function()
{
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url/images/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url/images/down.png)"});
});
});
</script>
Затем открываем файл таблицы стилей stylesheet.css и дописываем внизу:
/* БЛОК МЕНЮ - ВЫПАДАЮЩАЯ ЧАСТЬ */
.menu_head {
display:block;
cursor: pointer;
padding:5px 0px;
border-top:1px solid #fff;
border-bottom:1px solid #ceeaf8;
color:#666;
padding-left:8px;
font-size:12px;
font-weight:bold;
}

.menu_body {
display:none;

}
.menu_body a{
padding:5px 16px;
display:block;
font-size:12px;
}
.menu_body a:hover{
color:#d37f35;
font-size:12px;
text-decoration:none;

.mcont a {
   display:block;
   padding:5px 8px;
   border-top:1px solid #fff;
   border-bottom:1px solid #ceeaf8;
   background:url(../image/myfon.gif) no-repeat;
   color:#666;
   padding-left:18px;
}

.mcont {
   display:block;
   color:#666;
   padding-left:4px;
}

.mcont a:hover {
   background:url(../image/myfon2.gif) no-repeat;
   color:#d37f35;
}
}
Теперь осталось открыть category.tpl и заменить вот этим:
<div class="box_category">
  <div class="top"><?php echo $heading_title; ?></div>
  <div id="category" class="middle">
<div class="mcont">
<div style="border-bottom:1px solid #ceeaf8;"></div>
<div id="firstpane">
<p class="menu_head">DVD проигрыватели</p>
<div class="menu_body">
<a href="/">Первая категория</a>
<a href="/">Втораяая категория</a>
</div>

<p class="menu_head">Автомагнитолы</p>
<div class="menu_body">
<a href="/car_radio/Alpine/">Alpbne</a>
<a href="/car_radio/Blaupunkt/">Blaupunkt</a>
</div>

<p class="menu_head">Видеокамеры</p>
<div class="menu_body">
<a href="/">Первая категория</a>
<a href="/">Втораяая категория</a>
</div>

<p class="menu_head">Музыкальные центры</p>
<div class="menu_body">
<a href="/">Первая категория</a>
<a href="/">Втораяая категория</a>
</div>

<p class="menu_head">Плееры</p>
<div class="menu_body">
<a href="/">Первая категория</a>
<a href="/">Втораяая категория</a>
</div>

<p class="menu_head">Телевизоры</p>
<div class="menu_body">
<a href="/">Первая категория</a>
<a href="/">Втораяая категория</a>
</div>

<p class="menu_head">Усилители НЧ</p>
<div class="menu_body">
<a href="/">Первая категория</a>
<a href="/">Втораяая категория</a>
</div>

<p class="menu_head">Фотоаппараты</p>
<div class="menu_body">
<a href="/">Первая категория</a>
<a href="/">Втораяая категория</a>
</div>


</div></div></div>
<div class="bottom"> </div>
</div>
Не забываем сохранять эот файл в utf-8 (Без BOM) Ну и сам файл category.tpl пересохраните, чтоб вернуться назад.
Всё, меню правите под себя, так как я выложил свои категории, прописываете пути и пользуетесь.

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

Посмотреть и потыкать в меню можно у меня на сайте ЗДЕСЬ

где то наверняка что-то не так...у меня не работает. Сделал всё как написано прописывал свои ссылки в category.tpl в общем всё что написано, а получается, что при нажатии на род.категорию открывает пустую страницу с системой этого меню, что прописано в category.tpl .

Но не как не выпадает...

vavan1955 · July 5, 2011

Ищи что не так сделал, я брал со своих файлов изменения и выложил. У меня то работает. :rolleyes:

И вообще, у тебя не сайт а какая то каша, извини за резкость.

Ну закажи нормальный дизайн со всеми причиндалами, занимайся продажами и не парься.

Есть у меня не востребованный шаблон, вернее только PSD файл который можно немного переделать, ГЛЯНУТЬ МОЖНО ЗДЕСЬ

Делал под DLE но клиент куда то исчез больше пол года назад.

Сразу скажу - ДОРОГО!

Точно, поставил на чистую дефолтную, не работает, поправил, уже работает

tehnikawdom · July 5, 2011

Точно, поставил на чистую дефолтную, не работает, поправил, уже работает

Неееееее...не работает - пробовал ещё раз...снова тож самое, что и описывал...

vavan1955 · July 22, 2011

Приношу извинения!!! :blink: :blink: :blink:

А файлик скрипта я то не приложил, дурень...

Вот он jquery.zip

Распакрвать и закинуть в папку со скриптами, у меня она в корне и называется js

Можно в шаблон, прописав путь до файла.

В хедере надо его вставить вот этой конструкцией:

<script type="text/javascript" src="/js/jquery.js"></script>

Всё работает, я забыл что у меня он есть, заметил при вёрстке нового магазина. Ещё раз звиняйте.

Harconen · September 16, 2011

Приношу извинения!!! :blink: :blink: :blink:

А файлик скрипта я то не приложил, дурень...

Вот он jquery.zip

Распакрвать и закинуть в папку со скриптами, у меня она в корне и называется js

Можно в шаблон, прописав путь до файла.

В хедере надо его вставить вот этой конструкцией:
<script type="text/javascript" src="/js/jquery.js"></script>
Всё работает, я забыл что у меня он есть, заметил при вёрстке нового магазина. Ещё раз звиняйте.

вот тебе на а я этот скрипт пытаюсь поставить на опенкарт а он аказываетса для dle

Shoper · September 16, 2011

Пробывал ставить все как написанно НИфига не работает, чегото не хватает

Harconen · September 17, 2011

Пробывал ставить все как написанно НИфига не работает, чегото не хватает

у меня так сама

Shoper · September 18, 2011

у меня так сама

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

aachernishev · September 24, 2011

del

Bazilio · September 24, 2011

А такое готовое не подойдёт? Сколько хочешь уровней вложения

SidebarMenu.zip

aachernishev · September 24, 2011

а что конкретно заменять в category.tpl ?

aachernishev · September 24, 2011

А такое готовое не подойдёт? Сколько хочешь уровней вложения

+1

пойдёт, но в IE не работает, по крайней мере, в 6ом

Bazilio · September 25, 2011

но в IE не работает

В IE7 и выше работает

vavan1955 · October 22, 2011

Я давно уже с опеном не работаю и доделывать не буду. Брал с инета так что кому надо ищите. А работает он везде, не только на дле. Есть один нюанс, если у вас куэрти стоит то работать не будет, или будет что то одно. У меня работает и на дле и на самописном магазине http://shop.teletehnika.info

И пофиг ему браузер, работает во всех. А ИЕ6 вообще уберите нах, его давно никто не пользует, вижу по статистике. И нечего под него хаки лепить, инвалид он по жизни.

system · October 27, 2013

вот тебе на а я этот скрипт пытаюсь поставить на опенкарт а он аказываетса для dle

Ага, а я понял это только после того как прочитал твое сообщение :) Но прикольно то, что все заработало. Никакие js Никуда ставить не пришлось. Это тоже потом дочитал, что у кого-то не работает и оказывается надо еще и js дополнительно закинуть. Версия opencart у меня 1.5.4.1

Я с радости здесь зарегистрировался, чтобы поделиться маленьким опытом.

Вот скрин с локалки:

http://i58.servimg.com/u/f58/15/39/09/67/screen11.png

Сам скрин конечно мало что дает, но я уверяю вас, что все прекрасно работает. Меню еще не оформил под себя, а сразу с радости решил рассказать. Потому что весь инет облазил и ничего, только платные модули. Уже хотел покупать, а тут на тебе. Автору респект.

Sign In

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

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Similar Content

Recently Browsing 0 members

Покупателям

Разработчикам

Полезная информация

Последние дополнения

Important Information