現在､ｽﾏﾎｻｲﾄを作成しています｡そこで､ﾅﾋﾞｹﾞｰｼｮﾝをよくある3本線を押すとﾒﾆｭｰが出てきてﾍﾟｰｼﾞ内ﾘﾝｸで飛ぶという仕組みを作成しています｡ﾒﾆｭｰ…

現在､ｽﾏﾎｻｲﾄを作成しています｡
そこで､ﾅﾋﾞｹﾞｰｼｮﾝをよくある3本線を押すとﾒﾆｭｰが出てきてﾍﾟｰｼﾞ内ﾘﾝｸで飛ぶという仕組みを作成しています｡

ﾒﾆｭｰ3本線ﾎﾞﾀﾝをおして閉じてって所までできています｡
そこから先がなかなか進まないので､助けて頂けないでしょうか？

$(function(){
$("#globalnavi").css("display","none");
$("#nav_button").on("click", function() {
$("#globalnavi").slideToggle();
});
});

http://jsfiddle.net/fh7cago1/
ﾎﾟｲﾝﾄは#globalnavi要素を#nav_button要素内に入れておくことでしょうか｡
これで#globalnavi要素をｸﾘｯｸすると必然的に#nav_button要素もｸﾘｯｸした事になり､#globalnavi要素が閉じます｡
これが出来ないときは#globalnavi要素にもｲﾍﾞﾝﾄを登録してください｡

<head>
 <style type='text/css'>
 #nav_button {
 position: fixed;
 background-color: lightgray;
 top: 0;
 left: 60px;
 padding: 6px;
 min-height: 20px;
 z-index: 99;
}
#content {
 padding-top: 20px;
 z-index: 0;
}
.poem {
 width: 1.2em;
}
h1 {
 margin-top: -12px;
 padding-top: 24px;
 margin-bottom: 6px;
}
 </style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$("#globalnavi").css("display", "none");
$("#nav_button").on("click", function () {
 $("#globalnavi").slideToggle();
});
});//]]> 
</script>
</head>
<body>
 <div id="nav_button">三
 <div id="globalnavi"><ul>
 <li><a href="#i">いろは</a></li>
 <li><a href="#w">わかよ</a></li>
 <li><a href="#u">うゐの</a></li>
 <li><a href="#a">あさき</a></li>
 </ul></div>
</div>
<div id="content">
 <h1 id="i">い</h1> <div class="poem">ろはにほへと ちりぬるを</div>
 <h1 id="w">わ</h1> <div class="poem">かよたれそ つねならむ</div>
 <h1 id="u">う</h1> <div class="poem">ゐのおくやま けふこえて</div>
 <h1 id="a">あ</h1> <div class="poem">さきゆめみし ゑひもせすん</div>
</div>
</body>