Меню выпадающего меню, как кнопки facebook

Question

Я ищу учебник или объяснение о том, как создать меню, например, 3 кнопки facebook («Друзья, уведомление, сообщения»). Я хотел бы создать что-то подобное, когда вы нажимаете на элемент, он показывает меню, и когда вы нажимаете на элемент за пределами этого элемента. Я пытался много раз искать в Google без успеха. Благодарю вас за время.

Answer 1

Это может быть длинный! Но продолжайте читать.

Facebook и Google и многие другие сайты используют jQuery для этой цели. Посмотрите на это:

Код, чтобы скрыть показать дивы:

<div class="friends" style="display: none;">Friends</div>
<div class="messages" style="display: none;">Messages</div>
<div class="notifications" style="display: none;">Notifications</div>

Все они скрыты. Они будут отображаться, когда они щелкните, использовать JQuery:

$(document).ready(function() {
$(this).show();
})
$(".friends").blur(function() { // hide on blur
$(this).hide();
}

Вы могли бы хотеть, чтобы узнать некоторые более здесь: jQuery OFFICIAL Site или здесь: W3schools.

Ajax для загрузки данных:

Затем идет основная идея, вы хотите дивы, чтобы заполняться данными тоже. Для этого вы можете прочитать Ajax jQuery.

Пример запроса Ajax:

$.ajax({
url: "any_link_to_page",
data: "mainly_the_query_strings",
success: function(result) {
$("some_div_class_or_id").html(result);
}
})

В DIV, который должен использоваться в AJAX, должны быть ДИВ, что вы хотите получить заселена; div от тех 3!

Этот раздел будет заполнен данными, полученными в результате запроса.

Вот ссылка учебник: jQuery Ajax - Documentation.

CSS Trianlges:

Если вы хотите, чтобы получить треугольники тоже, вы должны прочитать: css-tricks

код, который они используют это :

.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}

Стрелка вверх - это класс для этого div или span, который будет преобразован в треугольник.

Надеюсь, вы получите основную идею. Это все, что я могу предоставить.

Answer 2

это в основном на основе шоу/скрыть вещи: у вас есть меню с различными пунктами ID оу классом

и контейнером COLLED в меню: как это:

<ul> 
    <li id="notifications">menu item 1</li> 
    <li>menu item 2</li> 
    <li>menu item 3</li> 
</ul> 
<div id="container"> 
    <div id="menu_notifications" class="menu_content">your content</div> 
</div> 

конечно вы создаете ур html, как вы хотите , а затем, если ур, знакомый с javascript или jquery, вы можете привязать методы show hide к пунктам меню, чтобы показать и скрыть разделы контента cmenu.