Jump to content
Sign in to follow this  
SergeyV

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

Recommended Posts

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

Все что мне удалось, это сделать так что бы при наведении на категорию (зона 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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.