L丶孤痞 2022-06-20 09:44 采纳率: 80%
浏览 33
已结题

响应式的网站导航栏如何缩进手机端图标

因为第一次做响应式的网站导航栏，而且也是第一次做这种下拉类型，导航栏在页面缩小时会根据页面进行收缩，但是想做成手机端就会缩进小图标那种
以下是HTML代码
```html
<div class="container-l">
  <div class="sy-dhl">
    <div class="main">
      <nav id="cbp-hrmenu" class="cbp-hrmenu"> <img class="logo-qw2" src="assets/img/LOGO/logo-light1.png" width="180px" height="60px"> <img class="logo-qw" src="assets/img/LOGO/logoh2.png" width="180px" height="60px">
        <ul>
          <li onclick="window.location.href='index.html'"> <span  onclick="window.location.href='index.html'">首页</span></li> <li> <a href="#">关于我们</a>
            <div class="cbp-hrsub">
              <div class="cbp-hrsub-inner">
                <div> <a href="about.html">
                  <h3>公司简介</h3>
                  </a>
                  <ul>
                  </ul>
                </div>
                
                <div> <a href="fazhanlishi.html">
                  <h3>发展历史</h3>
                  </a> </div>
                <div><a href="QYRY.html">
                  <h3>企业荣誉</h3>
                  </a></div>
              </div>
              <!-- /cbp-hrsub-inner --> 
            </div>
            <!-- /cbp-hrsub --> 
          </li>
          <li> <a href="#">服务</a>
            <div class="cbp-hrsub">
              <div class="cbp-hrsub-inner">
                <div>
                  <h4>审计</h4>
                  <ul>
                    <li><a href="chanpin/cwbbsj.html">财务报表审计</a></li>
                    <li><a href="#">资本市场服务</a></li>
                    <li><a href="chanpin/jzfw.html">鉴证服务</a></li>
                  </ul>
                  &nbsp;
                  <h4>金融服务</h4>
                  <ul>
                    <li><a href="#">普汇金融</a></li>
                    <li><a href="chanpin/rzzl.html">融资租赁</a></li>
                  </ul>
                  &nbsp;
                  <h4>科技生产力咨询</h4>
                  <ul>
                    <li><a href="#">众创空间</a></li>
                    <li><a href="#">企业数字化</a></li>
                  </ul>
                </div>
                <div>
                  <h4>税务与商务咨询</h4>
                  <ul>
                    <li><a href="chanpin/qysfw.html">企业税服务</a></li>
                    <li><a href="#">间接税服务</a></li>
                    <li><a href="#">个税&灵活就业</a></li>
                  </ul>
                  &nbsp;
                  <h4>财务咨询</h4>
                  <ul>
                    <li><a href="chanpin/qykjjjfa.html">企业会计解决方案</a></li>
                    <li><a href="#">价值服务</a></li>
                  </ul>
                  &nbsp;
                  &nbsp;
                  <h4>私人客户服务</h4>
                  <ul>
                    <li><a href="#">家族企业</a></li>
                    <li><a href="#">高科技高成长项目</a></li>
                  </ul>
                </div>
                <div>
                  <h4>风险管理咨询</h4>
                  <ul>
                    <li><a href="chanpin/kuaijifuwu.html">会计服务与内部控制</a></li>
                    <li><a href="#">网络安全与战略风险</a></li>
                    <li><a href="#">合规支持</a></li>
                  </ul>
                  &nbsp;
                  <h4>跨境企业服务</h4>
                  <ul>
                    <li><a href="#">中国政策资讯</a></li>
                    <li><a href="#">生活在中国</a></li>
                  </ul>
                  &nbsp;
                  <h4>热点服务</h4>
                  <ul>
                    <li><a href="#">政府服务</a></li>
                    <li><a href="#">国有企业服务</a></li>
                    <li><a href="#">民营企业与私人客户服务</a></li>
                  </ul>
                </div>
                <div> </div>
              </div>
              <!-- /cbp-hrsub-inner --> 
            </div>
            <!-- /cbp-hrsub --> 
          </li>
          <li> <a href="#">行业</a>
            <div class="cbp-hrsub">
              <div class="cbp-hrsub-inner">
                <div>
                  <h4>消费行业</h4>
                  <ul>
                    <li><a href="hangyedalei/qc.html">汽车</a></li>
                    <li><a href="hangyedalei/xfp.html">消费品</a></li>
                    <li><a href="hangyedalei/jtjdfw.html">交通、酒店及服务</a></li>
                    <li>&nbsp;</li>
                  </ul>
                  <h4>金融服务行业</h4>
                  <ul>
                    <li><a href="hangyedalei/kuazihangye.html">跨子行业</a></li>
                    <li><a href="hangyedalei/yinhang.html">银行业及资本市场</a></li>
                    <li><a href="hangyedalei/baoxian.html">保险业</a></li>
                    <li><a href="hangyedalei/touzi.html">投资管理</a></li>
                    <li><a href="hangyedalei/fdc.html">房地产</a></li>
                  </ul>
                </div>
                <div>
                  <h4>能源、资源及工业行业</h4>
                  <ul>
                    <li><a href="hangyedalei/gongye.html">工业产品及建筑业</a></li>
                    <li><a href="hangyedalei/kyjjs.html">矿业及金属</a></li>
                    <li><a href="hangyedalei/shiyou.html">石油、天然气及化学品</a></li>
                    <li><a href="hangyedalei/dianlikezaisheng.html">电力、公共设施及可再生能源</a></li>
                  </ul>
                  <h4>生命科学与医疗行业</h4>
                  <ul>
                    <li><a href="hangyedalei/yiliao.html">医疗</a></li>
                    <li><a href="hangyedalei/shengmingkexue.html">生命科学</a></li>
                  </ul>
                </div>
                 <div>
                  <h4>公共服务</h4>
                  <ul>
                    
                    <li><a href="hangyedalei/gonggweisheng.html">公共卫生及社会服务</a></li>
                    <li><a href="hangyedalei/cishanjigou.html">国际非营利性机构/慈善机构</a></li>
                    <li><a href="hangyedalei/gonggongjiaotong.html">公共交通</a></li>
                  </ul>
                </div>
              </div>
              <!-- /cbp-hrsub-inner --> 
            </div>
            <!-- /cbp-hrsub --> 
          </li>
          <li> <a href="#">伙伴</a>
            <div class="cbp-hrsub">
              <div class="cbp-hrsub-inner">
                <div> <a href="rencaizp.html">
                  <h3>人才招聘</h3>
                  </a>
                  <ul>
                  </ul>
                </div>
                <div> <a href="shehuizp.html">
                  <h3>社会招聘</h3>
                  </a> </div>
                <div> <a href="xiaoyuanzp.html">
                  <h3>校园招聘</h3>
                  </a> </div>
              </div>
              <!-- /cbp-hrsub-inner --> 
            </div>
            <!-- /cbp-hrsub --> 
          </li>
          <li> <a href="caishuizhishi.html">新闻</a>
            <div class="cbp-hrsub">
            <div class="cbp-hrsub-inner">
              <div> <a href="xinwenzixun.html">
                <h3>新闻资讯</h3>
                </a> </div>
              <div> <a href="caishuizhishi.html">
                <h3>财税知识</h3>
                </a> </div>
              
              <!-- /cbp-hrsub-inner --> 
            </div>
          </li>
          <!-- /cbp-hrsub --> 
          <!-- /cbp-hrsub-inner --> 
          
          <!-- /cbp-hrsub --> 
          
          <!-- /cbp-hrsub-inner --> 
          
          <!-- /cbp-hrsub -->
          <li> <a href="caishuizhishi.html">社区</a>
            <div class="cbp-hrsub">
            <div class="cbp-hrsub-inner">
              <div> <a href="lianxiwomen.html">
                <h3>联系我们</h3>
                </a> </div>
              <div> <a href="hongyuansh.html">
                <h3>泓远生活</h3>
                </a> </div>
              
              <!-- /cbp-hrsub-inner --> 
            </div>
          </li>
        </ul>
      </nav>
    </div>
      <select class="yyqh-xl">
        <option>ZH-CN</option>
        <option>EN-GB</option></select>
  </div>
</div>
<div class="mb_bar"></div>
<!-- End Header --> a




以下是CSS代码
```css

.sy-dhl{
    background-color: rgba(0,0,0,0.3);
    width: 100%;
    height: 7%;
     position: fixed;
    z-index: 999999;
    margin-top: 0;
    transition:  0.8s;
    }
.cbp-hrmenu {
    width: 120%;
    margin-top: 0em;
    float: left;
}

/* general ul style */
.cbp-hrmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
    width: 90%;
    max-width: 70em;
    margin: 0 auto;
    padding: 0 1.875em;
    float: left;

}

.cbp-hrmenu > ul > li {
    display: inline-block;
}

.cbp-hrmenu > ul > li > a {
    font-weight: 700;
    padding: 1em 2em;
    color: #555555;
    display: inline-block;
}

.cbp-hrmenu > ul > li > a:hover {
    color:  #FF2326;
    transition:  0.5s;
}

.cbp-hrmenu ul li span{
    font-weight: 700;
    padding: 1em 2em;
    color: #555555;
    display: inline-block;
    cursor: pointer;
}
.cbp-hrmenu ul li span:hover{
    color:  #FF2326;
    transition:  0.5s;
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
    display: none;
    position: absolute;
    background-color: rgba(0,0,0,0.3);
    width: 100%;
    left: 0;
    flex-direction: column;
   

}

.cbp-hrmenu .cbp-hrsub:hover{
    color: #170B0C;
    
}

.cbp-hropen .cbp-hrsub {
    display: block;
    padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
    width: 33%;
    float: left;
    padding: 0 2em 0;
   
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
    content: " ";
    display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
    clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
    line-height: 2em;
}

.cbp-hrsub h4 {
    color: #FFFFFF;
    padding: 0.6em 0 0.6em;
    margin: 0;
    font-size: 160%;
    font-weight: 600;
}
.cbp-hrsub h3 {
    color: #FFFFFF;
    padding: 1.5em 0 0.6em;
    margin: 0;
    font-size: 120%;
    font-weight: 600;
}

.cbp-hrsub a h3:hover{
 color: #FF2326; 
    transition:  0.5s;
}

.cbp-hrsub ul li a{
    color: #EDEDED;
    font-size: 100%;
    font-weight: 500;
}
.cbp-hrsub ul li a:hover{
    color: #FF2326;
    transition:  0.5s;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) { 

    .cbp-hrmenu {
        font-size: 80%;
         transition:  0.9s;
    }

}
@media screen and (max-width: 52.75em) { 

    .sy-dhl{
         display:flex;display: -webkit-flex;height:100%;flex-direction:column;
    }
}

@media screen and (max-width: 43em) { 

    .cbp-hrmenu {
        font-size: 120%;
        border: none;
        transition:  0.9s;
         background-color: #FFFFFF;
    }

    .cbp-hrmenu > ul,
    .cbp-hrmenu .cbp-hrsub-inner {
        width: 100%;
        padding: 0;
    }

    .cbp-hrmenu .cbp-hrsub-inner {
        padding: 0 2em;
        font-size: 75%;
    }

    .cbp-hrmenu > ul > li {
        display: block;
        border-bottom: 1px solid #FF2D2D;
    }

    .cbp-hrmenu > ul > li > a { 
        display: block;
        padding: 1em 3em;
    }

    .cbp-hrmenu .cbp-hrsub { 
        position: relative;
    }

    .cbp-hrsub h4 {
        padding-top: 0.6em;
        color: #000000;
    }
.cbp-hrsub h3 {
        padding-top: 0.6em;
        color: #000000;
    }
.cbp-hrsub ul li a{
    color: #282828;
    font-size: 100%;
    font-weight: 500;
}
}

@media screen and (max-width: 36em) { 
    .cbp-hrmenu .cbp-hrsub-inner > div {
        width: 100%;
        float: none;
        padding: 0 2em;
        background-color: #FFFFFF;
    }
}

现在是这样

img


想做成这样

img

求指点一二

  • 写回答

2条回答 默认 最新

  • 徫_ 2022-06-21 18:08
    关注

    不知道你解决问题没有

    <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>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        nav {
            outline: 1px solid red;
        }
        .menu > ul {
            height: 0;
            padding: 0 1rem;
            overflow: hidden;
            outline: 1px solid red;
            transition: all 0.2s ease-in-out;
        }
        .menu > div {
            position: relative;
        }
        .arrow {
            transition: all 0.2s ease-in-out;
            position: absolute;
            height: 8px;
            width: 8px;
            right: 8px;
            top: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 1px solid red;
            border-bottom: 1px solid red;
            transform: translateY(-50%) rotate(-45deg);
        }
        .arrow-down {
            transform: translateY(-50%) rotate(45deg);
        }
    </style>
</head>
<body>

    <nav>
        <div class="menu">
            <div>
                <span>Item 1</span>
                <i class="arrow"></i>
            </div>
            <ul class="sub-menu">
                <li>Item 1-1</li>
                <li>Item 1-2</li>
                <li>Item 1-3</li>
            </ul>
        </div>
        <div class="menu">
            <div>
                <span>Item 2</span>
                <i class="arrow"></i>
            </div>
            <ul class="sub-menu">
                <li>Item 2-1</li>
                <li>Item 2-2</li>
            </ul>
        </div>
        <div class="menu">
            <div>
                <span>Item 3</span>
                <i class="arrow"></i>
            </div>
            <ul class="sub-menu">
                <li>Item 3-1</li>
            </ul>
        </div>
    </nav>

    <script>

        let current = null
        let currentArrow = null
        
        const list = document.querySelectorAll('.menu')
        list.forEach(item => {
            item.addEventListener('click', (e) => {
                /* 关闭 */
                if(current) {
                    current.style.height = '0px'
                    currentArrow.classList.remove('arrow-down')
                }

                current = item.querySelector('ul')
                currentArrow = item.querySelector('.arrow')
                
                /* 展开 */
                current.style.height = eval(`{ ${
                    Array.from(current.children).map(child => {
                        const { height } = getComputedStyle(child)
                        return parseFloat(height)
                    }).join('+')
                } }`)

                /* 箭头 */
                currentArrow.classList.add('arrow-down')
            })
        })

    </script>
    
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 2月8日
  • 已采纳回答 1月31日
  • 创建了问题 6月20日

悬赏问题

  • ¥15 如果要做一个老年人平板有哪些需求
  • ¥15 k8s生产配置推荐配置及部署方案
  • ¥15 matlab提取运动物体的坐标
  • ¥15 人大金仓下载，有人知道怎么解决吗
  • ¥15 一个小问题，本人刚入门，哪位可以help
  • ¥15 python安卓开发
  • ¥15 使用R语言GD包一直不出结果
  • ¥15 计算机微处理器与接口技术相关问题，求解答图片的这个问题，有多少个端口，端口地址和解答问题的方法和思路，不要AI作答
  • ¥15 如何根据一个截图编写对应的HTML代码
  • ¥15 stm32标准库的PID角度环