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

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


Smallbear

Recommended Posts

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

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

Изображение

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

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

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

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

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


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

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

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

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

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


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

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

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

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


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

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

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


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

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

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

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

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


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

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

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


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

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

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

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


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 еще больше. Пробуйте.

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

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

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


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

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

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

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

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

Вхід

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

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

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

Important Information

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