如何制作左侧导航菜单

Question

有人请指导我如何使用（jQuery）的帮助制作左侧导航菜单（左侧滑块），仅使用单个CSS和最低JavaScript。

请参阅此link。

谢谢！

Answer 1

首先，不要问这样的问题。首先你必须尝试。开发者需要先尝试。这是开发者的形状。我们是知识求职者。 :-D

无论如何！ TRY THIS。我也试图从我自己身上学到东西。您必须根据需要更改一些脚本。或者你可以使用这个CSS TRICKS。尽量做到最好。

这里有些代码。

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> 

JS

$(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(); 
    }); 

}); 

CSS

#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; 
} 

你必须改变一些脚本也。建议http://jpanelmenu.com/。

如果你需要我的帮助。请通过搜索yeshansachithak找到我的任何社交网络。