OnClick垂直ナビゲーション

Question

私のサイトは大きく改訂されています。私はそれに多くの機能を追加したいが、私は私の頭の上に少し離れすぎていると思う。私の質問に関連

リンクは次のとおりです。http://www.andrewryan.me/AndrewRyan/index.html

私がトップメニューの左側のボタンを一つ持っています。私はそれを素晴らしくてきれいにしました。それは純粋にCSSです。私がメニューを使うときはいつも、私は目標から外れてしまったので、メニューやサブメニューから外れる危険性と不確実性の経路に従わなければならないのは非常に面倒です。

ユーザーは、そのボタンをクリックしてナビゲーションメニューを開くことができます。そこから、ユーザーは自分の好きな場所にマウスを置くことができ、要素の外側をクリックするか、選択を行うまでは離れません。私が右に出たいと思っているサブセクションもあります。それらもクリックする必要がありますが、マウスをサブメニューから離した場合、それは消えてしまう唯一のものです。メインメニューが残ります。ここに私がこれまでに持っているコードはありますが、私は複数のことを試みましたが、うまくいかないようです。私はjQueryやJavaScriptについてほとんど何も知らない。

HTML：

<div id="navigation"> 
       <ul id="nav"> 
        <li><a href="#">Navigation</a> 
         <ul class="menu"> 
          <li><a href="#">Professional</a> 
           <ul class="submenu"> 
            <li><a href="#">Ambitions</a></li> 
            <li><a href="#">Resume</a></li> 
            <li><a href="#">Portfolio ></a></li> 
           </ul> 
          </li> 
          <li><a href="#">About Myself</a> 
           <ul class="submenu"> 
            <li><a href="#">My Family</a></li> 
            <li><a href="#">Interests</a></li> 
            <li><a href="#">Scrap Book</a></li> 
           </ul> 
          </li> 
          <li><a href="#">Social Life</a> 
           <ul class="submenu"> 
            <li><a href="#">Social Philosiphy</a></li> 
            <li><a href="#">My Networks ></a> 
             <ul class="submenu"> 
              <li><a href="#" target="_blank">Facebook</a></li> 
              <li><a href="#" target="_blank">Google+</a></li> 
              <li><a href="#" target="_blank">Personal Tumblr</a></li> 
              <li><a href="#" target="_blank">YouTube</a></li> 
              <li><a href="#" target="_blank">Twitter</a></li> 
              <li><a href="#" target="_blank">Deviant Art</a></li> 
              <li><a href="#" target="_blank">Sound Cloud</a></li> 
              <li><a href="#" target="_blank">Github</a></li> 
              <li><a href="#" target="_blank">Diaspora</a></li> 
              <li><a href="#" target="_blank">MySpace</a></li> 
              <li><a href="#" target="_blank">about.me</a></li> 
             </ul> 
            </li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </div> 

CSS：

#navigation { 
    width:300px; 
    height:40px; 
    float:left; 
    margin-top:-4px; 
} 

#navigation a { 
    margin:0px auto; 
    color:#ccc; 
    outline:none; 
    z-index:5; 
} 

#nav { 
    padding:7px 6px 10px 0px; 
    background:none; 
    line-height: 100%; 
    display:inline-block; 
    } 

#nav li { 
    margin:0 0 0 5px; 
    padding:0 0 0 0px; 
    float:left; 
    position:relative; 
    list-style:none; 
    } 

#nav a { 
    border-radius:20px 25px 0 10px; 
    border-top:solid 3px #fff; 
    border-left:solid 3px #fff; 
    font-weight:bold; 
    color:#fff; 
    background:none; 
    text-decoration:none; 
    display:block; 
    padding:8px 20px; 
} 

    /* hovers and current tabs */ 
#nav a:hover { 
    border-radius:10px; 
    background:none; 
    color:#ccc; 
} 

    #nav .current a { 
    border-radius:20px 25px 0 10px; 
    background:none; 
    color:#ccc; 
    margin-bottom:0px; 
    border-top:solid 3px #ccc; 
    border-left:solid 3px #ccc; 
} 

    #nav li:hover > a { 
    border-radius:20px 25px 0 10px; 
    background:none; 
    color: #ccc; 
    margin-bottom:0px; 
    border-top: solid 3px #ccc; 
    border-left:solid 3px #ccc; 
} 

#nav ul li:hover a, #nav li:hover li a { 
    background:none; 
    border:none; 
    color:#333; 
    border-top:solid 1px #dfdfdf; 
} 

#nav ul a:hover { 
    color:black !important; 
} 

/* dropdown */ 
    #nav li:hover > ul { 
    display:block; 
    background-color:#fff; 
    border-radius:10px 10px 10px 10px; 
} 

/* level 2 list */ 
    #nav ul { 
    display:none; 
    margin: 0; 
    padding:0; 
    width:150px; 
    position:absolute; 
    top:33px; 
    left:0; 
    background:#aaa; 
    border:solid 1px #b4b4b4; 
} 

    #nav ul:hover { 
    background-color:#ddd; 
} 

    #nav ul li { 
    z-index:5; 
    font-weight:bold; 
    float:none; 
    margin:0px; 
    padding:0px; 
} 

#nav ul a { 
    font-weight:normal; 
} 

Answer 1

ここでは、非常に単純なクリックのナビゲーションメニューです：

http://jsfiddle.net/jtbowden/WGVum/

コードはかなり基本的である：この場合

$('#navigation').on('click', 'a[href="#"]', function() { 
    $('#navigation ul').hide(); // Hide everything when we click 
    var submenu = $(this).next('ul'); // Find the associated sub-menu 
    submenu.parentsUntil('#navigation').andSelf().show(); // Show all hierarchy above 
}); 

、我々は唯一のhrefとして#を持っクリックに応答します。これは、クラスまたは他の属性であってもよい。

あなたはどこか別の場所をクリックし、クリックでサブメニューを切り替えたときに非表示にするメニューをしたい場合は、このコードを使用することができます：

$('#navigation').on('click', 'a[href="#"]', function() { 
    var submenu = $(this).next('ul'); 
    $('#navigation ul').not(submenu).hide(); 
    submenu.parentsUntil('#navigation', 'ul').show().end().toggle(); 
    return false; 
}); 

$(document).click(function() { 
    $('#navigation ul ul').hide(); 
}); 

デモ：http://jsfiddle.net/jtbowden/WGVum/3/

Answer 2

このフィドルを見てみましょう：http://jsfiddle.net/5h6Vp/3/

$(document).on('click', function(e){ 
    if($(e.target).parents('#menu').length > 0){ 
     /*click in #menu*/ 
    }else if($(e.target).attr('id') == 'show'){ 
     $('#menu').toggle(); 
    }else{ 
     $('#menu').hide(); 
    } 
}); 

は、サブメニューは、このコードを使用します。

$('#menu>ul>li').has('ul').on('click', function(e){ 
    $('#menu>ul>li>ul').hide(); 
    $(this).find('ul').show(); 
}); 
$('#menu>ul>li>ul').on('mouseleave', function(e){ 
    $(this).hide(); 
}); 
$('#menu').on('mouseleave', function(e){ 
    $('#menu>ul>li>ul').hide(); 
}); 

（あなたのコードを貼り付け前に、私はこの答えを書いたので、私のコードの構造が少し異なっている - しかし、考え方は同じまま）