Здравствуйте! Как сделать чтобы при наведении курсора на вертикальное меню , категория открывалась? Открывалась вправо. Ни вниз, ни вверх, а вправо.
3 ответа
Судя по вашей HTML-структуре, на валидацию, как я понимаю, вы чихать хотели )) Ну да ладно... jQuery вы используете, поэтому прописываете для списка подкатегорий абсолютное позиционирование в CSS, а в JS высчитываете положение родительского пункта меню
var posTop = $('parent_point').offset().top;
var posLeft = $('parent_point').offset().left + $('parent_point').width();
и задаете эти координаты для списка подпунктов.
Я делал решениеи с использование только CSS для несложного меню. HTML код:
<div class="main_menu_item">
<a href="/billing/">Billing</a>
<div class="submenu">
<div><a href="/billing/">Manage orders and invoices</a></div>
</div>
</div>
CSS код:
.submenu
{
display: none;
position: absolute;
text-align: left;
background-color: white;
padding: 5px;border: 1px solid #6B93FF;
}
div.main_menu_item:hover div
{
display: block;
}
При наведение курсора на ссылку "Billing" Отобразится его подменю, в котором будет ссылка "Manage orders and invoices"
-
Поддерживаю решение на CSS. Могу добавить, что выпендрежа ради, можно попробовать не display: none/block, а opacity: 0/1. В случае с прозрачностью можно добавить плавное проявление подменю при помощи transition или animation. Однако, обратите внимание на то, что полностью прозрачные блоки, в отличии от display: none, укладываются поверх других слоев, которые могут содержать кликабельные элементы. Так что помимо opacity нужно еще и с z-index поиграть. Так же задумайтесь, что будет с вашем меню на ТАЧ-устройствах.– Cypher27 авг 2012 в 11:13
И так если не подключая никаких скриптов обычно используя html и css то решение таково или по крайней мере как сделал бы я:
html содержание то есть само меню
<!--menu start-->
<ul class="menu">
<li class="menu__item">
<a href="#" class="menu__item__link">Home</a>
<div class="menu__item__sublist">
<ul>
<li class="menu__item__sublist_item">
<a href="#" class="menu__item__sublist_link">Submenu1</a>
</li>
<li class="menu__item__sublist_item">
<a href="#" class="menu__item__sublist_link">Submenu1</a>
</li>
<li class="menu__item__sublist_item">
<a href="#" class="menu__item__sublist_link">Submenu1</a>
</li>
</ul>
</div>
</li>
<li class="menu__item">
<a href="#" class="menu__item__link">About</a>
<div class="menu__item__sublist">
<ul>
<li class="menu__item__sublist_item">
<a href="#" class="menu__item__sublist_link">Submenu1</a>
</li>
<li class="menu__item__sublist_item">
<a href="#" class="menu__item__sublist_link">Submenu1</a>
</li>
<li class="menu__item__sublist_item">
<a href="#" class="menu__item__sublist_link">Submenu1</a>
</li>
</ul>
</div>
</li>
</ul>
<!--menu end-->
Теперь сам CSS
/ menu -------------------------/
.menu {
width: 98px;
border: 1px solid #000;
}
/* menu__item
-------------------------*/
.menu__item {
position: relative;
top: 0;
left: 0;
list-style-type: none;
}
/* menu__item__link
-------------------------*/
.menu__item__link {
display: block;
text-decoration: none;
}
/* menu__item__sublist
-------------------------*/
.menu__item__sublist {
position: absolute;
top: 0;
left: 98px;
padding: 0 0 0 2px;
display: none;
}
.menu__item:hover .menu__item__sublist { display: block; }
/* menu__item__sublist UL
-------------------------*/
.menu__item__sublist UL {
}
.menu__item__sublist_item {
list-style-type: none;
}
.menu__item__sublist_link {
display: block;
text-decoration: none;
}
Ширина меню задана (98px) для того чтобы выпадающее меню у вас было закреплено. Если уберете бордер то не забудьте два пикселя вернуть (100px). Остально думаю по комментам разберете.