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

0

У меня есть Меню с ToolGroups:

Изображение 174551

Я хочу, чтобы появилось подменю в правой части зависающей div группы инструментов. Как я могу реализовать это с помощью html5, javascript (также jQuery) и CSS?

EDIT: Исходный код на JsFiddle

   <div id="menu">
        <center><h1>Toolbox</h1></center>
        <hr/>
        <div class="toolGroup">MyToolGroup&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup2&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup3&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup4&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup5&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup6&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup7&Rightarrow;</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;
}
  • 1
    Почтовый индекс. Еще лучше, отправьте JSFiddle. Мы не можем помочь вам без вашего HTML-кода, по крайней мере.
  • 0
    @NickBull: сделано
Показать ещё 3 комментария
Теги:

3 ответа

3
Лучший ответ

Вот простое решение 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; }
1

Вы можете использовать событие зависания в некоторых дочерних списках:

http://jsfiddle.net/qAZFC/1/

HTML:

<div class="toolGroup">MyToolGroup4&Rightarrow;
    <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 и затухайте в:

http://jsfiddle.net/7TPab/1/

1

Вам нужно иметь меню справа, уже существующее и отформатированное через 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/

  • 1
    +1 за использование jQuery, но это не соответствует моим потребностям, потому что я больше увлекаюсь js, чем веб-дизайном. Это моя большая проблема.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню