自适应网站导航代码，结合font-awesome使用

我直接贴代码吧，样式我就不写了！贴个效果图：

html中

       <div id="nav-btn"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></div>
            <div class="right" id="youbian">
                    <ul class="tabs" id="nav">
                      <li class=""><a href="{$host}">首页</a></li>
                           <li class=""><a href="{$host}">首页</a></li>
                           </ul>
                    </div>

JS代码：

<script type="text/javascript">

$(document).ready(function(){

$("#nav-btn").click(function(){//点击ID为nav-btn的时候

    if($(".fa-bars").hasClass("fa-rotate-90")) {//如果fa-bars元素有fa-rotate-90样式的话
    
        $('.fa-bars').removeClass('fa-rotate-90'); //移除fa-rotate-90样式
        
    } else { 
    
        $('.fa-bars').addClass('fa-rotate-90'); //增加fa-rotate-90样式
        
        }
        
    $("#youbian").toggle(200);     //点击一次，ID为youbian的显示/隐藏，时间为2毫秒
    
  });
  
});
</script>

CSS样式可以自己写或者调整！实际就是相互切换，结合《一天把PC网站改成自适应网站》这篇文章，都能把网站改成自适应的！