一个认为不错的导航菜单栏,可做页面右上角更多内容使用,也可做隐藏侧边效果等,大家可以自由发挥。

简单效果如下图:

主要应用到一段js代码:

<script src="style/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(function(){
 $('.list_top_more').on('click', function(e){
 e.preventDefault();
 $(this).parent().toggleClass('nav--active');
 });
 })
</script>

另外代码中用到了阿里巴巴的iconfont 图标字体,具体如何使用在这里就不说了,字体文件在style/font文件夹中。

代码中有一段

<a href="javascript:window.history.go(-1)"></a>

源码下载:https://pan.lanzou.com/i0su7wh