Jquery 如何制作左侧导航菜单

有人能告诉我如何在（jQuery）的帮助下制作左侧导航菜单（左侧滑块），只使用单个CSS和最少的JavaScript

请参考这个

---

谢谢

首先，不要问这样的问题。首先你得试试。开发人员需要首先尝试。这就是开发者的形状。我们是求知者-D

无论如何。我也试着从自己身上学习。您必须根据需要更改一些脚本。或者你可以用这个。尽力做到最好

这里有一些代码

HTML

<header>
        <ul id="menu" class="jpanelMenu" style="display: none;">
            <li><a class="menu" link="/">Home</a></li>
            <li><a class="menu" link="/">Gallery</a></li>
            <li><a class="menu" link="about.html">About</a></li>
            <li><a class="menu" link="/">Contact</a></li>
        </ul>
    </header>

    <div class="container-fluid" id="trigger">
        <div class="col-sm-4">
            <button type="button" class="menu-trigger btn btn-default btn-lg">
              <span class="glyphicon glyphicon-th-list"></span> Menu
            </button>
        </div>
        <div class="col-sm-4">Yeshan App</div>
        <div class="col-sm-4">Web Developer</div>
    </div>

<section id="contents">
    <p>I have another page call about.html. in that page I have contents inside the area div. Now, This functions are working fine in my localhost.</p>
    <p>Just I want to know is, when I click on the navigation menu. I want to hide the jPanelMenu as a result there website.</p>
    <a href="http://jpanelmenu.com/" target="_blank">Click Here</a>
</section>

CSS

$(document).ready(function () {
    var jPM = $.jPanelMenu({
        menu: '#menu',
        trigger: '.menu-trigger',
        duration: 600
    });
    jPM.on();

    $(".menu").click(function(){
        var url = $(this).attr("link");
        //alert(url);
        //$( "#contents" ).fadeIn("slow").load(url+" #contents");
        $('#contents').fadeOut('slow', function(){
            $('#contents').load(url+' #contents', function(){
                $('#contents').fadeIn('slow');
            });
        });
        jPM.close();
    });

});

#jPanelMenu-menu {
    overflow-y:hidden !important;
}
#trigger { padding: 5px; cursor: pointer; background: #000; }
.jpanelMenu { list-style: none; padding: 0px;}
.jPanelMenu li a {
    background: none repeat scroll 0 0 #000000;
    line-height: 20px;
    padding: 20px;
    text-align: left;
    display: block;
    color:#FFF;
}
.jPanelMenu li a:hover {
    background: none repeat scroll 0 0 #ccc;
    text-decoration: none;
    text-align: center;
    color: #999;
    cursor: pointer;
    font-weight: bold;
}

您还必须更改一些脚本。建议

---

如果你需要我的帮助。请通过搜索

yeshansachithak

找到我的任何社交网络。你为此做了一些家庭作业吗？你在问题中链接的页面似乎就是答案。你在问什么？是的，这是我想要的，但是dis页面有很多jscript和css，我想要在一个css中，v如何做dat？？？@user3632406你也可以使用这个。或者试试我的answer@user3632406请投票支持我的评论，并检查我的答案是否正确。因为，我知道，我的答案是正确的。