js和CSS3媒体查询制作简单的响应式导航菜单

news/2024/11/29 16:21:32/文章来源:https://www.cnblogs.com/mybook000/p/18577007

这是一款使用纯js和css3媒体查询制作的简单的响应式导航菜单效果。该导航菜单类似bootstrap导航菜单,它通过media query制作760像素断点,当视口小于760像素时,菜单会收缩为隐藏的汉堡包菜单。

在线演示  下载

 使用方法

 HTML结构

该导航菜单使用<nav>元素最为包裹容器,div.menu_button_wrapper是汉堡包图标,无序列表.menu_list是菜单项。

<nav><div id="menu_button_wrapper"><div id="menu_button">Menu  <div id="hamburger"><span></span><span></span><span></span></div></div><div class="clearfix"></div></div><ul id="menu_list"><li class="current_page"><a href="#">Home</a></li><li><a href="#">Audio</a></li><li><a href="#">Video</a></li><li><a href="#">About Us</a></li><li><a href="#">Contacts</a></li></ul>
</nav>
 CSS样式

为导航菜单添加一些必要的CSS样式。

nav {font-family: Helvetica;text-align: right;text-transform: uppercase;background-color: #222;
}nav ul {width: 90%;max-width: 1024px;margin: 0 auto;list-style-type: none;
}nav ul li { display: inline-block; }nav ul li a {color: #9d9d9d;font-weight: bold;text-decoration: none;display: inline-block;padding: 1em;box-sizing: border-box;
}nav ul li a:hover { color: white; }.current_page { background-color: black; }.current_page a { color: white; }#menu_button_wrapper { display: none; }.hidden { display: none; }                  

然后通过media query媒体查询制作760像素时的断点。

@media (max-width: 760px) {#menu_button_wrapper {display: block;padding: 1em;color: #9d9d9d;border-bottom: 1px solid #101010;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.1);box-shadow: 0 1px 0 rgba(255,255,255,.1);margin-bottom: .5em;}#menu_button {box-sizing: border-box;float: right;padding: .5em 1em;border: 1px solid #333;border-radius: 5px;color: white;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}#menu_button:hover {cursor: pointer;background-color: #333;}#hamburger {float: right;padding-top: .15em;}#menu_button span {display: block;background-color: #fff;width: 1.2em;height: .15em;border-radius: 1px;margin-bottom: .2em;}nav ul {width: 100%;margin: 0 auto;padding: 0;box-sizing: border-box;}nav ul li { display: block; }nav ul li a { width: 100%; }}                  
 JavaScript

该导航菜单通过JavaScript代码来监听浏览器窗口的尺寸变化,为相应的菜单元素添加和移除相应的class类。

function addListener(element, type, callback) {if (element.addEventListener) {element.addEventListener(type, callback);} else if (element.attachEvent) {element.attachEvent('on' + type, callback);}
}addListener(document, 'DOMContentLoaded', function () {var mq = window.matchMedia("(max-width: 760px)");if (mq.matches) {document.getElementById("menu_list").classList.add("hidden");}addListener(document.getElementById("menu_button"), 'click', function () {document.getElementById("menu_list").classList.toggle("hidden");});addListener(window, 'resize', function () {var width = window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;if (width > 760) {document.getElementById("menu_list").classList.remove("hidden");} else {document.getElementById("menu_list").classList.add("hidden");}});});  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/843497.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

hhdb数据库介绍(10-4)

实例管理 该功能用来查看和管理所有计算节点集群中存储节点所在实例的主从关系。实例信息可以通过主机名、端口号、和存储节点版本号进行筛选。 实例管理信息 功能入口: 登录管理用户界面->实例管理实例管理信息以一个存储节点为单位显示一条记录,可对具体的存储节点进行“…

PE文件结构解析 Part3 NT Headers

文章来源:https://0xrick.github.io/win-internals/pe4/ 目录简介NT Headers(IMAGE_NT_HEADERS)签名 SignatureFile Header(IMAGE_FILE_HEADER)Optional Header (IMAGE_OPTIONAL_HEADER)总结 简介 在前面的文章中,我们看过了DOS Header的结构以及逆向了DOS stub。 这篇文章我…

人员背夹佩戴识别智慧矿山一体机斜井人员进出识别:安防设备时间显示错乱原因及具体解决办法

在现代矿山行业中,安全和效率是两个核心议题。随着智能化技术的不断进步,智慧矿山的概念逐渐成为现实,特别是在非煤矿山的管理与运营中,智能化手段的应用已经成为提升安全性、效率和经济性的关键。本文将深入探讨人员背夹佩戴识别智慧矿山一体机在配电室无人巡检识别算法中…

windows下python批量更新软件包

前言 相信很多小伙伴都遇到过python有些软件包版本过低导致无法安装一些模块的问题,刚好我前两天也遇到了,这里写个文章记录一下 一、更新pip版本 打开命令控制面板,输入: python -m pip install --upgrade pip二、查看过期的软件包 pip list可以看到有很多已经过期的包也可…

配电室长期无人巡检识别智慧矿山一体机非煤矿山算法:配电室监控与安全管理

随着科技的进步和智能化技术的迅速发展,矿山行业正在经历一场深刻的变革。智慧矿山的概念应运而生,尤其是非煤矿山的管理与运营中,利用智能化手段提升安全性、效率和经济性已成为热门趋势。长期无人巡检作为智能矿山运营的重要组成部分,其应用不仅降低人力成本,还能实时监…

Web小案例

web小案例web小案例 HTML + CSS3dTab<style> *{margin: 0;padding: 0;box-sizing: border-box;font-family: Oswald, sans-serif; } body {display: flex;justify-content: center;align-items: center;height: 100vh;background: #434750; } ul {position: relative;/*整…

电脑桌面好用便签软件有哪些推荐

打工人在电脑桌面上使用一款好用的便签软件,不仅可以随手记录工作信息,还可以高效管理待办事项,让工作事半功倍! 下面一起来看四款电脑桌面好用的便签软件吧! 一、Win 系统自带便笺 优点: 操作简单,系统自带,直接搜索就能打开,创建、编辑便签都非常容易,新手也能快速…

安装cuda

(1)介绍CUDA(Compute Unified Device Architecture)是 NVIDIA 推出的一种并行计算平台和编程模型。它允许开发者利用 NVIDIA GPU(图形处理器)的强大计算能力进行通用计算,而不仅仅局限于图形渲染。eg:大量的矩阵运算等计算密集型任务CUDA 提供了一套完整的开发工具,包括…

PbootCMS缩略图上传图片被截取变模糊的解决方法

在使用PbootCMS设置缩略图的时候,发现被自动截取了,缩略图没匹配到后台,而是在程序里设置的。具体方法:打开/config/config.php文件,在第40行// 缩略图配置 ico => array(max_width => 2000,max_height => 1000 ), 此两个参数为最大宽度和最大高度,max_height为空…

PbootCMS授权中文域名方法

中文域名需要转码后才能获取授权码 转码步骤:访问转码工具:https://tool.chinaz.com/urlencode 输入中文域名,选择“转成Punycode” 使用转码后的域名进行授权扫码添加技术【解决问题】专注中小企业网站建设、网站安全12年。熟悉各种CMS,精通PHP+MYSQL、HTML5、CSS3、Javas…

浅谈随机化算法

用处 在很多情况下,我们很难想到一道题目的正解,这时候,,我们不应什么都不干,我们可以骗分! 随机化——一种最常用的骗分方式,而且它在大部分情况下只要使用方式正确,就能获得非常高的部分分,有时甚至能骗过整道题 分类 我所知道的随机化算法大致分三种,分别是纯随机…

高效安全迁移:PG高可用集群实战方案深度解析

PostgreSQL是一个开源的数据库管理系统,相比于其他开源数据库系统,PostgreSQL有更加丰富的数据类型和可扩展性,并因此被广泛采用。在实际工作中,若企业业务需求变动,则有可能面临PG高可用集群迁移的情况。 云掣具备丰富的帮助企业迁移数据平台的实战经验,提供专业的数据库…