Перейти к содержанию
Smallbear

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

Рекомендуемые сообщения

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

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

Изображение

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

Поделиться сообщением


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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

С уважением.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

С уважением.

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Я ведь привел пример сайта с таким меню как хочу сделать 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>

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

В 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>

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

post-7435-0-88140600-1303905154_thumb.png

post-7435-0-51031400-1303905235_thumb.png

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Изображение

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

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

Изображение

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

подозреваю что дело в этой части , которая прописана в 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Изображение

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

Изображение

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.