深圳公司网站建设_深圳公司网站自然排名优化首选壹网互联!
当前位置
首页 - 前端Js+Css教程 - 自适应网站导航代码,结合font-awesome使用

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

发布时间:2021-08-16 阅读:115

我直接贴代码吧,样式我就不写了!贴个效果图:

自适应网站导航代码,结合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网站改成自适应网站》这篇文章,都能把网站改成自适应的!

  • 评论内容:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

联系我们
CONTACT US

深圳网站建设电话:13510778477 姚先生

深圳网站推广电话:13715035554 刘先生

地址:深圳市南山区西丽镇龙珠五路南汾大厦416