Как создать раскрывающееся меню, например, кнопку «Еще» google?

Question

На Google домашней страницы, если нажать на кнопку Дополнительно, откроется меню, ниже только этой кнопки, как это:

Как я могу сделать подобную вещь с одной из вкладок в навигационной панели мой сайт, используя css/javascript/jquery?

Edit: Чтобы быть более конкретным, я задаюсь вопросом, как выполнить CSS часть этого, то есть:

• Как сделать стрелкой вверх/вниз графическое шоу на вкладке, когда раскрывающийся переключены. (т. е. при переключении, стрелка вниз, если нет, стрелка вверх). (Вместо того, чтобы просто поставить <img>, я предпочел бы использовать фоновое изображение для переключения стрелок)

• Как добавить новый список под вкладку и выровнять ее.

Answer 1

Это пример того, как это можно сделать. Конечно, вы можете экспериментировать с методами diff и т. Д., Но это основное рабочее решение.

Выпадающий элемент, который нужно переключить, нажав ссылку, очень хорош.

<div id="topBar"> 
    <a href="#" id="more">More 
     <span id="arrow"> 
      <span id="arrdown">&#x25BC;</span> 
      <span id="arrup">&#x25B2;</span> 
     </span> 
    </a> 
    <div class="dropdown"> 
     <a href="#">One</a> 
     <a href="#">Two</a> 
     <a href="#">Three</a> 
    </div> 
</div>​ 

Затем вы делаете его переключателем с кликом JS.

$('#more').click(function() { 
    $(this).toggleClass('active'); 
    $(this).next('.dropdown').toggle(); 
    return false; 
}); 

$('.dropdown a').click(function() { 
    return false; 
}); 

CSS:

body { background: #fee; font-family: calibri; } 
#topBar { text-align: right; background: black; color: white; padding: 5px; } 
#topBar a { color: white; text-decoration: none; padding: 5px 7px; } 
#topBar a:hover { background: #ddd; color: black; } 
#topBar a.active { background: white; color: black; } 
.dropdown { display: none; position: absolute; right: 5px; background: white; color: black; } 
.dropdown a { display: block; color: black !important; text-decoration: none; padding: 5px 7px; } 
.dropdown a:hover { background: #ccc; } 
#arrup { display: none; } 
#arrow { font-size: 0.6em; } 

Вот живой пример с CSS: http://jsfiddle.net/ZUPBj/

Answer 2

Есть много разных подходов к этому, один из самых простых:

Создать скрытый DIV, которые получают переключено-х, когда пункт меню нажат.

<div class="menu"></div> 
<div class="dropDown"></div> <!-- Hidden by default --> 
<script> 
    $(".menu").on("click",function(){ 
     $(".dropDown").toggle(); 
    }); 
</script>​​​​ 

JsFiddle

Answer 3

Некоторые прибегая к помощи подберут вам множество обучающих программ в Интернете. Я искал «выпадающие меню в html». Эти ссылки ниже - некоторые из лучших учебников, которые я нашел.

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/

http://youhack.me/2011/09/18/how-to-build-a-drop-down-menu-enhanced-with-css3/

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