はhatena_gmenyu_mobile

<!--グローバルナビゲーション-->

<div id="menu">
<div id="btnArea">
<span id="menuBtn"><i class="blogicon-reorder lg"></i> MENU</span>
</div>
<ul id="menuContent">

 <div id="nav">
    <ul>
        <li><a href="http://josh-s.hatenadiary.com"><i class="fa fa-home" aria-hidden="true"></i>  HOME</a></li>
        <li><a href="http://josh-s.hatenadiary.com/archive/category/Tips"><i class="fa fa-laptop" aria-hidden="true"></i>  Tips</a></li>
        <li><a href="http://josh-s.hatenadiary.com/archive/category/Farm"><i class="fa fa-sun-o" aria-hidden="true"></i></i>  Farm</a></li>
        <li><a href="http://josh-s.hatenadiary.com/about"><i class="fa fa-user-circle" aria-hidden="true"></i>  About</a></li>
        <li><a href="http://josh-s.hatenadiary.com/privacy"><i class="fa fa-user-secret" aria-hidden="true"></i>  Privacy</a></li>
    </ul>
</div>

</style>

 
<style type="text/css">
#top-editarea .section{
    margin: 0;
    width: 100%;
}
#menu{background: #eee;/*メニューバーの背景*/}
#btnArea{text-align: right;/*MENUの文字の位置*/}
#menuBtn{
    display: inline-block;
    padding: 8px;
    margin: 5px;
    border-radius: 5px;
    background: #444;/*MENUの背景色*/
    color: #fff;/*MENUの文字色*/
    font-size: 80%;
}
#menu > ul{
    display: none;
    padding: 0;
    margin: 0;
}
#menuContent > li{
    list-style-type: none;
    margin: 0 auto;
}
#menuContent > li > a{
    display: block;
    padding: 7px;
    text-align: center;/*リストの文字の位置*/
    background: #444;/*リストの背景色*/
    color: #fff;/*リストの文字色*/
    font-size: 80%;
    font-weight: bold;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
    var menuBtn = $("#menuBtn"),
        menuContent = $("#menuContent");
    menuBtn.click(function(){
        menuContent.slideToggle();
    });
});
</script>