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

Выпадающее меню для главной категории, вопрос по стилям [РЕШЕНО]

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

Добрый день! Подскажите пожалуйста, что еще нужно в стилях прописать, что бы при наведении курсора на категорию, подкатегория раскрывалась?!

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

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

.box-category {
margin-top: -5px;
}
.box-category ul {
list-style: none;
margin: 0;
padding: 0;
}
.box-category > ul > li {
padding: 8px 8px 8px 0px;
background: #FFFFC6   /* url('../image/cat1.png') no-repeat 0% 12px; */
/* -webkit-transition: background-color 0.5s ease-out; */
/* -moz-transition: background-color 0.5s ease-out; */
/* -ms-transition: background-color 0.5s ease-out; */
/* -o-transition: background-color 0.5s ease-out; */
/* transition: background-color 0.5s ease-out; */
}
.box-category > ul > li:hover {
background:#FADF71;
}
.box-category > ul > li + li {
border-top: 1px dashed #CCC;
}
.box-category > ul > li > a {
text-decoration: none;
color: #333;
padding-left:15px;
display:block;
}
.box-category > ul > li > a:hover {
text-decoration: none;
/* color:#8B0000; */
}
.box-category > ul > li ul {
display: none;
}
.box-category > ul > li a.active {
font-weight: bold;
}
.box-category > ul > li a:hover + ul { /* ЭТО ВСЕ ЧТО Я СМОГ СДЕЛАТЬ */
display: block;
}
.box-category > ul > li a.active + ul {
display: block;
}
.box-category > ul > li ul > li {
padding: 5px 5px 0px 10px;
}
.box-category > ul > li ul > li > a {
text-decoration: none;
display: block;

/* -webkit-transition: all 0.5s ease-out; */
/* -moz-transition: all 0.5s ease-out; */
/* -ms-transition: all 0.5s ease-out; */
/* -o-transition: all 0.5s ease-out; */
/* transition: all 0.5s ease-out; */
}
.box-category > ul > li ul > li > a:hover {
   /* padding-left:10px; */
   text-decoration: underline;
}
.box-category > ul > li ul > li > a.active {
font-weight: bold;
}

post-28173-0-80672000-1360828479_thumb.jpg

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


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

а вы смотрели, как организовано верхнее меню категорий в 15x ?

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


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

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

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

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


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

а вы смотрели, как организовано верхнее меню категорий в 15x ?

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

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

И как это можно сделать? Скажите пожалуйста подробнее я в js полный ноль.

Я решил сделать такое меню после того как прочитал эту статью, http://htmlbook.ru/css/hover

и тут ни о каком js даже упоминания нет.

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


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

а вы смотрели, как организовано верхнее меню категорий в 15x ?

верно, верно. и стили можете оттуда же взять

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


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

Я решил сделать такое меню после того как прочитал эту статью, http://htmlbook.ru/css/hover

и тут ни о каком js даже упоминания нет.

Короче ставь jquery =) Пиши после вывода меню:

<script type="text/javascript">
$('.box-category > ul > li a').hover(function(){
$(this).addClass('active');
})
</script>

доработаешь сам ;)

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


Ссылка на сообщение
Поделиться на другие сайты
Гость
Эта тема закрыта для публикации ответов.

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

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

×

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

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