Как сделать выпадающее меню в шапке?

[Smallbear]

Очень хочется сделать выпадающее меню категории в области шапки сайта .

На этом сайте очень хороший пример того что я хочу сделать http://themeforest.net

Здесь нашел само меню http://markup-javascript.com/2009/04/26/dropdaun-vypadayushhee-menyu-s-effektami-na-jquery/

симпатично выглядит,думаю его можно подогнать под свои нужды.

Но вот главная проблема - как расположить модуль категории на фоне шапки сайта?

В данный момент это главное что понять не могу,ну а если кто подскажет как правильно сделать из этого модуля выпадающее меню буду очень благодарен:)

[EvzeNsx]

а если у вас категории изменятся/добавятся, то каждый раз будете в код лазить?

[Smallbear]

а если у вас категории изменятся/добавятся, то каждый раз будете в код лазить?

Обьясните пожалуйста подробнее что Вы имеете ввиду?

Я ведь привел пример сайта с таким меню как хотелось бы сделать,там ведь никто в код не лазит при добавлении\изменении категории,другой вопрос в том как это реализовать в опенкарте?

Напишите хотя бы примерно то что Вы имели ввиду,я уже думал что можно просто ссылки на категории вручную добавить,т.к. категорий всего 2-3 планируется,но пока не пробовал. Не пробовал т.к. или опять будут ошибки вылазить или все из-за этих дурацких отступов посьежает,но может и прийдется добавлять ссылки вручную.Пока еще надеюсь что может кто-то подскажет как лучше сделать

[Гість]

http://easyframework.com/ глянь тут. я на своем сайте сделал на основе этого. там есть демо примеры

[EvzeNsx]

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

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

Что касается вашей "главной проблемы" - то любой элемент можно расположить где угодно на странице порой даже не одним способом).

[Smallbear]

http://easyframework.com/ глянь тут. я на своем сайте сделал на основе этого. там есть демо примеры

спасибо большое,что ответили,сейчас буду смотреть. А Вы категории в меню сами прописывали,или туда выводятся те что в админке добавлены?

[Smallbear]

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

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

Что касается вашей "главной проблемы" - то любой элемент можно расположить где угодно на странице порой даже не одним способом).

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

[EvzeNsx]

ааааа, я сразу неправильно понял (что-то со мной это пугающе часто стало происходить...)

Если не ошибаюсь, то что-то похожее уже обсуждалось, поищите на форуме.

[Smallbear]

ааааа, я сразу неправильно понял (что-то со мной это пугающе часто стало происходить...)

Если не ошибаюсь, то что-то похожее уже обсуждалось, поищите на форуме.

ничего поиск не дал..такое впечатление что такое меню никому не нужно))

[AlexFisher]

jQuery dropDown, по-моему, самое то для данной ситуации.

В код точно не нужно будет лазить ;)

С уважением.

[EvzeNsx]

ничего поиск не дал..такое впечатление что такое меню никому не нужно))

такое впечатление, что вы поиском не умеете пользоваться

[Smallbear]

jQuery dropDown, по-моему, самое то для данной ситуации.

В код точно не нужно будет лазить ;)

С уважением.

Спасибо,хорошая менюшка

Если бы еще кто-то обьяснил как это меня прикрутить это меню или какое-то другое к модулю категорий в опенкарт было очень хорошо.

[Smallbear]

такое впечатление, что вы поиском не умеете пользоваться

Зря Вы так думаете.

Я ведь привел пример сайта с таким меню как хочу сделать http://themeforest.net , по прикручиванию такого меню я так ничего и не нашел толкового.

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

Там к категориям относится всего один стиль:

#category ul {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 8px;
	padding-left: 12px;
	list-style: url('../image/bullet_1.png');
}

и вот как его прописать так чтобы было слово "КАТЕГОРИИ" (на фоне картинки например,как на сайте что я привел выше),а при наводе мышки на это слово чтобы выпадал список категорий?

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

Хоть это и простая задача поидее,но как решить не пойму.

Вроде и понял что в коде :

<div id="category" class="middle"><?php echo $category; ?></div>

вместо

<?php echo $category; ?>

выводится список типа

<ul>

<li>

</li>

</ul>

но всеравно не могу сделать то что хочется..

[Smallbear]

Может все-таки кто-то подскажет?

[EvzeNsx]

В stylesheet.css добавляешь

.e-box {
	height:75px;
}
.categories {
    position: absolute;
}
.categories h3 {
    background-position: -531px -3px;
    cursor: pointer;
    height: 19px;
    left: 6px;
    padding: 10px 10px 10px 20px;
    position: absolute;
    text-indent: -9999px;
    top: -10px;
    width: 132px;
    z-index: 1100;
}

h3 {
    font-size: 24px;
}
.categories ul {
    background-color: #F4F4F4;
    border: 1px solid #A7A7A7;
    display: none;
    left: -1px;
    list-style: none outside none;
    padding: 25px 10px 15px;
    position: absolute;
    top: 20px;
    width: 136px;
    z-index: 1000;
}
.categories:hover ul {
	display:block;
}
.categories ul li {
    color: #3B3B3A;
    font-size: 15px;
    padding: 4px 10px;
}
.categories ul li a {
    color: #3B3B3A;
    font-size: 12px;
}
.categories ul li ul {
    border-width: 0 0 0 1px;
    display: block;
    margin-top: 5px;
    padding: 0;
    position: relative;
    top: auto;
}
.sprite {
    background: url("http://1.envato-static.com/images/sprites/sprite_themeforest.png?1299466799") no-repeat scroll left top transparent;
}

а файл module/category.tpl делаешь таким

<div class="e-box">
  <div id="category" class="categories">
  <h3 class="sprite"><a title="Categories" href="#">Categories</a></h3>
  <?php echo $category; ?> 
  </div>
</div>

оформление уже сам настроишь

[Smallbear]

оформление уже сам настроишь

спасибо большое,мне эта вещь действительно очень нужна была,а самому сделать никак не получалось.

[Smallbear]

а никто не подскажет как коректно расположить это меню категорий в шапке?

изначально это меню у меня расположено вот так (не обращайте внимание что оно на слайдере,это я немного контейнер растянул,поэтому категории впринципи сейчас на стандартном месте)

потом поставил модуль расширение-модульных-позиций

установил позицию отображать в шапке,стало вот так:

т.е. теперь оно стало распологаться в шапке,НО как его сдвинуть немного ниже и при этом чтобы это не повлияло на расположение хлебных крошек и "Поиск" , т.к. сейчас они сдвинулись ниже ??

подозреваю что дело в этой части , которая прописана в css

.categories {
    position: absolute;
}

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

мои файлы header.tpl и stylesheet.css прикрепил к сообщению,может кто-то посмотреть захочет :)

P.S.Если кому-то интересно есть еще вариант как расположить категории в шапке без установки модуля расширение-модульных-позиций

Нужно просто в файле header.tpl добавить в нужное место этот код (если точнее нужно добавить середину то что в теге <?php .... ?> , а остальное относится к стилям :

<div class="mycategory ">
  <div id="category" class="categories">
  <h3 class="sprite"><a title="Categories" href="#">Categories</a></h3>



<?php
$this->load->model('tool/seo_url');
$results = $this->model_catalog_category->getCategories();
if ($results) {$output = '<ul>';}
foreach ($results as $result) {
$output .= '<li>';
$new_path = $result['category_id'];
$unrewritten = HTTP_SERVER.'index.php?route=product/category&path='.$new_path;
$rewritten = $this->model_tool_seo_url->rewrite($unrewritten);
$output .= '<a href="'.str_replace('&', '&', $rewritten).'">'.$result['name'].'</a>';
$output .= '</li>';
}
if ($results) {$output .= '</ul>';}
echo $output;
?>





</div>
</div>

header.zip

stylesheet.zip

[EvzeNsx]

сумбурный пост - ничего не понял.

может предоставите две картинки: на первой скриншот того, что сейчас, а на второй - как должно быть?

[Smallbear]

сумбурный пост - ничего не понял.

может предоставите две картинки: на первой скриншот того, что сейчас, а на второй - как должно быть?

сейчас вот так выглядит

хочу чтобы было вот так

Возможно ли как-то расположить сам модуль категорий в том месте где мне нужно только с помощью css не прописывая ничего в файле header.tpl ?

Или если и прописывать что-то в хедере,то как правильно написать чтобы поиск не сьежал вниз?

P.S.Может быть можно как-то вынести категории на первый план чтоли а остальное чтобы как фон было. (звучит конечно глупо но все-таки))

[EvzeNsx]

если только css:

.categories {
    position: absolute;
    margin-top: -15px;
}

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

[Smallbear]

если только css:

.categories {
    position: absolute;
    margin-top: -15px;
}

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

спасибо большое еще раз, все получилось

самое обидное я ведь margin-top и padding-top в первую очередь пробовал прописать , и помоему отрицательное тоже прописывал но у меня всеравно все сьежало,даже не знаю почему наверно все-таки что-то опять напутал..