У меня есть Меню с ToolGroups:
Я хочу, чтобы появилось подменю в правой части зависающей div группы инструментов. Как я могу реализовать это с помощью html5, javascript (также jQuery) и CSS?
EDIT: Исходный код на JsFiddle
<div id="menu">
<center><h1>Toolbox</h1></center>
<hr/>
<div class="toolGroup">MyToolGroup⇒</div>
<hr/>
<div class="toolGroup">MyToolGroup2⇒</div>
<hr/>
<div class="toolGroup">MyToolGroup3⇒</div>
<hr/>
<div class="toolGroup">MyToolGroup4⇒</div>
<hr/>
<div class="toolGroup">MyToolGroup5⇒</div>
<hr/>
<div class="toolGroup">MyToolGroup6⇒</div>
<hr/>
<div class="toolGroup">MyToolGroup7⇒</div>
<hr/>
<br/>
</div>
#menu
{
position: absolute;
top: 20px;
left: 20px;
background-color: #c0c0c0;
border-radius: 8px;
padding: 10px 10px 10px 10px;
}
.toolGroup
{
cursor: pointer;
text-align: center;
font-size: 18px;
font-weight: bold;
}
Вот простое решение css для него http://jsfiddle.net/Mohinder/UJErC/
HTML
<ul class="toolgroup">
<li><a href="">Toolgroup</a>
<ul>
<li><a href="">Toolgroup</a>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
</li>
</ul>
</li>
<li><a href="">Toolgroup</a>
<ul>
<li><a href="">Toolgroup</a>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
</li>
</ul>
</li>
<li><a href="">Toolgroup</a>
<ul>
<li><a href="">Toolgroup</a>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
</li>
</ul>
</li>
<li><a href="">Toolgroup</a>
<ul>
<li><a href="">Toolgroup</a>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
<li><a href="">Toolgroup</a></li>
</li>
</ul>
</li>
</ul>
CSS
body,ul,li { margin:0px; padding:0px; }
.toolgroup,.toolgroup li ul { padding:0px; list-style:none; width:150px; background:#ccc; border:1px solid #000; }
.toolgroup li,.toolgroup li ul li { width:100%; position:relative; }
.toolgroup li a,.toolgroup li ul li a { padding:7px 10px; display:block; border-bottom:1px solid #000; }
.toolgroup li ul { display:none; position:absolute; left:150px; top:0px; }
.toolgroup li:hover ul { display:block; }
Вы можете использовать событие зависания в некоторых дочерних списках:
HTML:
<div class="toolGroup">MyToolGroup4⇒
<ul>
<li>Test item</li>
<li>Test item</li>
<li>Test item</li>
</ul>
</div>
CSS:
.toolGroup ul {
display:none;
}
.toolGroup:hover ul {
display:block;
}
Или с jQuery, привяжите событие mouseenter/mouseout и затухайте в:
Вам нужно иметь меню справа, уже существующее и отформатированное через HTML и CSS. Как только это будет сделано, установите все, чтобы display:none
через CSS.
Теперь переходим к javascript (я покажу вам решение jQuery, потому что это проще, и вы предложили его).
Что-то вроде этого должно выполнить вашу задачу:
$(function(){
$(MyToolGroup).hover(function(){
$(MyToolGroupSubMenu).css("display","box")
},function(){
$(MyToolGroupSubMenu).css("display","none")
})
})
Это ОЧЕНЬ простая, урезанная версия, чтобы заставить вас двигаться в правильном направлении.
Важно следующее следующее подменю внутри каждой связанной группы инструментов, таким образом обработчик hover применяется как к пункту меню, так и к подменю.
Обратите внимание, что селекторы в приведенном выше коде - это всего лишь псевдокод, я не могу использовать ваш код, потому что вы его не поставляли, но замените их, если применимо.
Здесь основной jsfiddle http://jsfiddle.net/rsEGZ/1/
Единственная причина, по которой я рекомендую javascript (и jQuery) вместо CSS, это потому, что он позволяет свободе вырастить это во что-то более сложное с помощью анимаций и обратных вызовов.
НО, вот CSS-решение http://jsfiddle.net/rsEGZ/2/