MST

星途 面试题库

面试题:JavaScript中如何结合CSS媒体查询实现简单响应式导航栏切换

假设已有一个HTML的导航栏结构,通过JavaScript结合CSS媒体查询,实现在屏幕宽度小于600px时,将导航栏从水平排列切换为垂直排列,并通过点击按钮显示隐藏菜单,描述实现思路并给出关键代码示例。
31.2万 热度难度
编程语言JavaScript

知识考点

AI 面试

面试题答案

一键面试

实现思路

  1. 媒体查询:使用CSS媒体查询,当屏幕宽度小于600px时,设置导航栏为垂直排列。
  2. JavaScript操作:通过JavaScript获取按钮元素和导航栏元素,为按钮添加点击事件,在点击时切换导航栏的显示或隐藏状态。

关键代码示例

  1. HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Responsive Navbar</title>
</head>
<body>
    <button id="menuButton">菜单</button>
    <nav id="navbar">
        <a href="#">首页</a>
        <a href="#">关于</a>
        <a href="#">服务</a>
        <a href="#">联系</a>
    </nav>
    <script src="script.js"></script>
</body>
</html>
  1. CSS部分(styles.css)
nav {
    display: flex;
    justify-content: space-around;
}

@media (max-width: 600px) {
    nav {
        flex-direction: column;
        display: none;
    }
}
  1. JavaScript部分(script.js)
const menuButton = document.getElementById('menuButton');
const navbar = document.getElementById('navbar');

menuButton.addEventListener('click', () => {
    if (navbar.style.display === 'none' || navbar.style.display === '') {
        navbar.style.display = 'flex';
    } else {
        navbar.style.display = 'none';
    }
});