JavaScript直接实现响应式可折叠导航栏

最新推荐文章于 2024-07-23 16:23:26 发布

肥宅Davina

最新推荐文章于 2024-07-23 16:23:26 发布

阅读量1.9k

点赞数 1

文章标签： javascript js css html

本文链接：https://blog.csdn.net/m0_51146371/article/details/113405459

版权

这篇博客是一位前端新手尝试仅使用JavaScript实现响应式可折叠导航栏的实践记录。作者详细介绍了实现思路，包括创建导航栏图标，针对不同屏幕尺寸设置显示状态，并分享了在代码实现过程中遇到的问题及解决方案，如媒体查询、窗口大小变化时的处理等。

摘要由CSDN通过智能技术生成

这是一只前端小白，只会一点点Html、CSS和JavaScript，而且暂时不会Bootstrap框架和jQuery库，甚至也不会Canvas……而且如果改用Bootstrap框架需要对已有的网站大改，所以不得不尝试只用JavaScript实现。

一、实现思路

用Ps画一个背景透明的32px×32px导航栏图标nav.png。

@media screen and (min-width: 768px)大屏幕：
<style>导航栏图标{display:none}

@media screen and (min-width: 768px)小屏幕：
<style>初始：导航栏图标{display:inline}、导航栏项目{display:none}

<script>点击图标（单次）：导航栏项目{display:inline}
<script>点击图标（双次）：导航栏项目{display:none}
<script>窗口变化：如果是大屏幕，设置导航栏项目{display:inline}

二、代码全文

Html文件<head>部分

<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
	@media screen and (min-width: 768px) {
    
		ul.navigation li img {
    
			display: none;
		}
	}

	@media screen and (max-width: 768px) {
    
		ul.navigation li {
    
			float: none;
		}

		ul.navigation li img {
    
			position: absolute;
			left: 1em;
			top: 1em;
			display: inline;
		}

		ul.navigation li:not(:first-child) {
    
			display: none;
		}
	}

	#content {
    
		text-align: center;
		clear: right;