페이 스북 버튼과 같은 메뉴 드롭 다운

Question

페이스 북의 3 버튼 ("친구, 알림, 메시지")과 같은 메뉴를 만드는 방법에 대한 자습서 나 설명을 찾고 있습니다. 나는 당신이 요소를 클릭 할 때 메뉴를 보여줄 때, 그리고이 요소의 바깥 쪽을 클릭 할 때와 비슷한 것을 만들고 싶습니다. 나는 많은 시간 동안 google에 성공없이 찾으려고 노력했다. 시간 내 주셔서 감사합니다.

Answer 1

길어질 수 있습니다! 그러나 마지막으로 읽으십시오.

페이스 북과 구글 및 많은 다른 웹 사이트에서는 이러한 목적으로 jQuery를 사용합니다.

코드가 숨어있는 div를 보여 : 이러한

<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합니다. 아약스는 데이터로드

:

는 다음의 주요 아이디어를 제공, 당신은 div의도 데이터로 채워 싶습니다. 이를 위해 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, 당신은 채워 할 DIV해야합니다; 그 3에서 div!

div는 요청 결과로 얻은 데이터로 채워집니다. 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 또는 범위의 클래스이며 삼각형으로 변환됩니다.

기본 아이디어를 얻길 바랍니다. 그게 내가 제공 할 수있는 모든 것. 당신이 diffrent 항목 ID의 OU 클래스

메뉴에 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> 

Answer 2

그것은 기본적으로 표시/숨기기 일을 기반으로 당신이 원하는대로 UH HTML을 스타일 을 누른 다음 ur가 javascript 또는 jquery에 익숙하다면 show hide 메서드를 메뉴 항목에 바인딩하여 cmenu 콘텐츠 div를 표시하고 숨길 수 있습니다.