HTML+css+js(jQuery)实现菜单栏适配(PC端到手机端)-CFANZ编程社区

效果图

在这里插入图片描述

HTML和js(jQuery)代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宝~你来啦~</title>
    <!-- <script src="./js/flexible.js"></script> -->
    <!-- 引入清除默认样式的css文件 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <!--  引入bootstrap css文件， 使用的是cnd链接-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 引入本文档的css文件 -->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- html -->
    <div class="nav">
        <!-- 用了bootstrap的图标 -->
        <div class="menuDown">
            <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
        </div>
        <h1 class="logo">欢迎小可爱</h1>
        <ul class="menu">
            <li>首页</li>
            <li>Memorable Day</li>
            <li>时间记录</li>
            <li>页面历史版本</li>
            <li>背景更换</li>
            <li>手机端页面</li>
        </ul>
        <ul class="logIn">
            <li>登录</li>
            <li>注册</li>
        </ul>
        <!-- 用了bootstrap的图标 -->
        <div class="logInAndRegister">
            <span class="glyphicon glyphicon-user"></span>
        </div>       
    </div>

    <!-- 以下是js（jquery） -->
    <!-- jQuery -->
    <script src="./js/jQuery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script>
        $(function() {
            // 窗口大小改变，组件适配窗口大小
            function suit() {
                // 浏览器窗口小于1260
                if ( window.innerWidth < 1260 ) {
                    $(".logo").css({
                        margin : "5px 15px"
                    });
                    $(".menuDown").show();
                    $(".menu").hide();
                } else {
                    $(".menuDown").hide();
                    $(".menu").show();
                }
                // 浏览器窗口小于510
                if ( window.innerWidth < 510 ) {
                    $(".logo").css({
                        margin : "5px 15px"
                    });
                    $(".logIn").find("li").css({
                        margin : "0px 5px"
                    });
                    $(".logIn").hide();
                    $(".logInAndRegister").show();
                } else {
                    // $(".logo").css({
                    //     margin : "10px 30px"
                    // });
                    $(".logIn").find("li").css({
                        margin : "0px 10px"
                    });
                    $(".logIn").show();
                    $(".logInAndRegister").hide();
                }
            } 
            window.onresize = function() {
                suit();
            }
            suit();

            // 窗口太小时,下拉菜单事件
            $(".menuDown").on( "click", function() {
                $(".menu").stop().slideToggle();
            } );
            $(".menu").on( "mouseenter", function() {
                $(".menu").stop().slideDown();
            } );
            $(".logInAndRegister").on( "click", function() {
                $(".logIn").slideToggle();
            } );
            
            // 鼠标经过变色
            $(".nav").find("li").mouseenter(function(){
                $(this).css({
                    backgroundColor : "rgba(255, 255, 255, 1)"
                }).siblings().css({
                    backgroundColor : "rgba(177, 177, 177, 0)"
                });
            });
            $(".nav").find("li").on( "mouseleave", function(){
                $(this).css({
                    backgroundColor : "rgba(177, 177, 177, 0)"
                })
            } )
            
        })
    </script>
</body>
</html>

css代码

body {
  background-image: url(../images/image01.jpg);
}
.nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 67px;
  background-color: rgba(255, 255, 255);
  background-color: rgba(177, 177, 177, 0.5);
}
.nav .logo {
  float: left;
  margin: 5px 30px;
  font-size: 45px;
  font-family: '方正舒体';
  font-weight: 900;
}
.nav .menu {
  float: left;
}
.nav li {
  float: left;
  height: 67px;
  margin: 0 10px;
  padding: 0 10px;
  background-color: rgba(177, 177, 177, 0);
  border-radius: 15px;
  line-height: 67px;
  font-size: 20px;
}
.nav .logIn {
  float: right;
}
.nav .menuDown {
  display: none;
}
@media (max-width: 1260px) {
  .menuDown {
    float: left;
    padding: 10px;
    font-size: 33px;
    text-align: center;
  }
  .menu {
    position: absolute;
    top: 67px;
    display: none;
    overflow: hidden;
  }
  .menu li {
    float: none;
    margin: 0px;
    border-radius: 5px;
    border-bottom: black solid 2px;
    background-color: rgba(177, 177, 177, 0.5);
    text-align: center;
  }
  .menu li:first-child {
    border-top: black solid 2px;
  }
  .logIn li {
    margin: 0 5px;
  }
}
@media (max-width: 510px) {
  .logIn {
    position: absolute;
    right: 0;
    top: 67px;
  }
  .logIn li {
    float: none;
    margin: 0 10px;
    border-radius: 5px;
    border-bottom: black solid 2px;
    background-color: rgba(177, 177, 177, 0.5);
  }
  .logIn li:first-child {
    border-top: black solid 2px;
  }
  .logInAndRegister {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    margin: 4px;
    font-size: 30px;
    text-align: center;
    line-height: 67px;
  }
}

base css代码

* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}