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

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

vavan1955
 Share

Recommended Posts

vavan1955 Collaborator

vavan1955

Опубліковано:
Опубліковано: (змінено)

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

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

Открываем файл 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 пересохраните, чтоб вернуться назад.

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

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

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

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

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

tehnikawdom Rising Star

tehnikawdom

Опубліковано:
Опубліковано:

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

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

Открываем файл 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 Collaborator

vavan1955

Опубліковано:
  • Автор
Опубліковано:

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

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

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

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

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

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

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

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

tehnikawdom Rising Star

tehnikawdom

Опубліковано:
Опубліковано:

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

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

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

  • 3 weeks later...
vavan1955 Collaborator

vavan1955

Опубліковано:
  • Автор
Опубліковано:

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

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

Вот он jquery.zip

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

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

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

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

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

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

  • 1 month later...
Harconen Collaborator

Harconen

Опубліковано:
Опубліковано:

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

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

Вот он jquery.zip

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

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

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

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

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

вот тебе на а я этот скрипт пытаюсь поставить на опенкарт а он аказываетса для dle
Надіслати
Поділитися на інших сайтах

Shoper Enthusiast

Shoper

Опубліковано:
Опубліковано:

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

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

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

  • 4 weeks later...
vavan1955 Collaborator

vavan1955

Опубліковано:
  • Автор
Опубліковано:

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

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

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

  • 2 years later...
system Enthusiast

system

Опубліковано:
Опубліковано:

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

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

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

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

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

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

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

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

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

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

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

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

Вхід

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

Вхід зараз
 Share
Перейти до списку тем

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

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

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

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

×
×
  • Створити...

Important Information

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

  Я даю згоду