html5_BMW
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="/css/variables.css">
    <script src="./js/jquery.min.js"></script>
</head>
<body>
    <script>
         var navBol  =  false //导航下拉是否是开启状态
        $(function(){

            //全局字体大小
            fontSize();
            $(window).resize(fontSize)

            //导航
            nav();

        })
        function fontSize(){
            var h = $(window).width()/100+1;
            $("html").css("font-size",h+"px");
            $(".pcNavR .iconfont").css("font-size",h+5+"px");
        }
        //导航
        function nav(){
            var padding = 40 //导航
            var deviation = 0 //横线偏移量
            var lineWidth = 0 //横线宽度
            //导航移入移出事件
            $(".pcNavL .pcNavL_item").hover(function(){
                deviation = 0
                $(".pcNavL .line").css("display","block")
                var index = $(".pcNavL .pcNavL_item").index(this);
                lineWidth = $(this).width() + padding
                for(let i = 0 ; i < index; i++){
                    deviation += $(".pcNavL .pcNavL_item").eq(i).width() + padding
                }
                $(".pcNavL .line").css("width",lineWidth).css("left",deviation);

            },function(){
                $(".pcNavL .line").css("display","none");

            });
            //导航点击事件
            $(".pcNavL .pcNavL_item").click(function(event){
                nav_open()
            })
            //导航下拉关闭
            $(".down_box .colse").click(function(){
                nav_close();
            })
            function nav_close() {
                navBol = false
                $(".down_box").css("height",0)
            }
            function nav_open() {
                $(".down_box").css("height",$(window).height()-120)
                navBol = true
                $(".pcNavL .active_line").css("width",lineWidth).css("left",deviation);
                $(".Nav").css("background-color","#fff").css("color","#000")
            }
            //点击其他位置隐藏导航下拉框
            $(document).bind("click",function(e){
                var target = $(e.target);

                if(target.closest(".Nav").length == 1){

                }
                if(navBol){
                    if(target.closest(".down_box").length == 0){
                        nav_close();
                    }
                }

            })
        }
    </script>
    <div class="body">
       <!-- 顶部导航栏 star -->
       <div class="Nav flex-center">
           <div class="pcNav flex">
                <div class="pcNavL flex">
                        <div class="pcNavL_item">全部车型</div>
                        <div class="pcNavL_item">购车支持</div>
                        <div class="pcNavL_item">BMW电动未来</div>
                        <div class="pcNavL_item">BMW服务</div>
                        <div class="pcNavL_item">BMW天地</div>
                        <span class="line"></span>
                        <span class="active_line"></span>


                </div>
                <div class="pcNavR  flex jc-around">
                    <div class="">
                        <i class="iconfont iconyonghu"></i>
                    </div>
                    <div class="">
                        <i class="iconfont iconweizhi"></i>
                    </div>
                    <div class="">
                        <i class="iconfont iconfangdajing"></i>
                    </div>
                </div>
                <!-- 选中下拉 -->
                <div class="down_box">
                    <div class="colse">
                          <i class="iconfont iconziyuan"></i>
                    </div>
                    <div class="down_box_i">
                        全部车型
                    </div>
                    <div class="down_box_i">
                        购车支持
                    </div>
                    <div class="down_box_i">
                        BMW电动未来
                    </div>
                    <div class="down_box_i">
                        BMW服务
                    </div>
                    <div class="down_box_i">
                        BMW天地
                    </div>
                </div>
           </div>
           <div>
               <img src="/img/BMW_Grey_Logo.svg" alt="">
           </div>
       </div>
       <!-- 顶部导航栏 end -->
    </div>
</body>
<style scoped>

</style>
</html>