Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >当响应汉堡包菜单出现在小屏幕上时,导航栏中的列表不会隐藏

当响应汉堡包菜单出现在小屏幕上时,导航栏中的列表不会隐藏
EN

Stack Overflow用户
提问于 2020-11-30 11:44:54
回答 1查看 74关注 0票数 0

我正在尝试为移动用户创建一个响应式导航栏。基本上,我希望导航栏中的列表隐藏在小屏幕上,列表将隐藏在汉堡菜单中。

当汉堡菜单出现在小屏幕上时,我想把菜单列表放在里面,但我在寻找答案时遇到了问题。

这是我的HTML

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="top">
      <div class = "center">
        <h><a href="home.html">J[a]son</a></h>
        <p>Personal Blog</p>
      </div>
      <nav class = "top_child">
        <div class = "logos">
          <a href="https://github.com/j-ahn94" target="_blank" class="fa fa-github"></a>
          <a href="https://stackoverflow.com/users/14266888/jason-a" target="_blank" class="fa fa-stack-overflow"></a>
          <a href="https://www.linkedin.com/in/jasonja-ahn/" target="_blank" class="fa fa-linkedin"></a>
        </div>
        <div class = "nav" id="myTopnav">
          <ul>
            <li><a href="home.html">HOME</a></li>
            <li><a href="">PHOTOGRAPHY</a>
              <ul class="photography_1">
                <li><a href="photography_colour.html">Colour</a></li>
                <li><a href="photography_black.html">Black</a></li>
              </ul>
            </li>
            <li><a href="coding.html">CODING</a></li>
            <li><a href="about.html">ABOUT</a></li>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
              <i class="fa fa-bars"></i>
            </a>
          </ul>
        </div>
      </nav>
    </div>

这是我的CSS

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.top {
    margin: auto;
    /*padding: 0.5em;*/
    padding-top: 0.5em;
    padding-right: 0.5em;
    padding-left: 0.5em;
    background-color: black;
    top: 0;
    display: block;
    position: sticky;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    z-index: 100;
    clear: both;
}

.top p {
    color: white;
    font-size: 10px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

.center {
    text-align: center;
}

.center a{
    color: rgb(224, 224, 228);
    font-size: 1.5em;
}

.center a:hover{
    text-decoration: none;
    color: rgb(224, 224, 228);
}

.nav {
    float: right;
    position: relative;
    list-style: none;
    display: block;
}

.nav a {
    color: white;
}

.nav li {
    display: inline;
    list-style: none;
    position: relative;
    overflow: hidden;
}

.nav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
    .nav a:not(:first-child) {display: none;}
    .nav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .nav.responsive {position:relative;}
    .nav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .nav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

这是我的JavaScript

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function myFunction() {
    var x = document.getElementById("mynav");
    if (x.className === "nav") {
      x.className += " responsive";
    } else {
      x.className = "nav";
    }
  }
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-11-30 15:02:48

在您的Javascript代码片段中,您抓取了错误的ID。您的导航上的ID是id="myTopNav"。在JS中,您获取的是id 'mynav'

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65072946

复制
相关文章
Visual Studio 书签功能介绍
使用 Visual Studio 开发过程中,你很容易遇到一种情况就是多个文件来回的切换,在每一块实现不同的业务,打开多个文件后在上面的标签中来回点击,有时标签打开多了,还会超出标签导航的范围,需要点击最右侧的小箭头才能找到自己打开的文件。这样来回切换很容易错乱,弄不好头脑就晕了。我在被折磨了许久以后想了想,肯定有人跟我遇到同样的问题,而且是很多人,同样和多人都有的问题微软这么强大的开发环境一定是有解决方案的。随后我就搜索到了 Visual Studio 的书签功能。
我与梦想有个约会
2023/10/21
4430
Visual Studio 书签功能介绍
Android Studio 3.2新功能特性
android studio3.2预览版本已经发布了,下面这些功能在最新的版本已经提供,但可能尚未在测试版本中发布渠道中提供。 什么是新的助理 Android Studio 3.2有一个新的Assistant面板,可以通知您有关Android Studio的最新更改。 如果检测到有新信息要显示,那么当您启动Android Studio时,该面板将打开。您还可以通过选择Help> Android Studio中的新增功能来打开“Assistant”面板 。 Android Jetpack Android
我就是马云飞
2018/06/22
5.5K0
VBA解压缩ZIP文件01——实现的功能
因为是抱着学习的态度去做的,所以对于效率什么的就没有去考虑,能不用API和外部对象就尽量没有去使用,所以只要是支持VBA语言的都是可以使用的:
xyj
2020/07/28
2.3K0
VBA解压缩ZIP文件01——实现的功能
Xamarin Studio 比 Visual Studio 2013 好用的三个功能
Xamarin Studio 最近发布了 5.2 版本, 带来了一些相当棒的特性, 其中有一些特性甚至超越了 Visual Studio 2013, 接下来就介绍我认为最棒的并且比 VS2013 要好用的三个特性:
beginor
2020/08/10
1.7K0
Xamarin Studio 比 Visual Studio 2013 好用的三个功能
Android Studio 中 System Trace 的新增功能
在 Android Studio 4.0 中,我们已经对 CPU Profiler 的 UI 做了大量调整来提供更加直观的工作流记录,而在 Android Studio 4.1 中,我们基于开发者们的反馈对此功能进行了持续改进,并且新增了更多特性。
Android 开发者
2020/10/16
2.7K0
Android Studio 中 System Trace 的新增功能
Katalon Studio录制回放功能使用介绍
Katalon Studio提供了Record & Playback功能让自动化测试变得十分简单,该功能和UFT(QTP)的录制回放功能大同小异。这项功能可以让编码能力比较弱的同学做起自动化测试来得心应手。Record & Playback功能可以快速创建和运行测试脚本。同样,对于经验丰富的自动化测试人员来说,该功能可以快速生成测试用例的内容。本篇文章主要介绍UI自动化测试关于Katalon Studio的Record & Playback功能的使用。备注:博主使用Katalon Studio当前最新版本:5.5.0
Altumn
2019/10/21
1.4K0
Katalon Studio录制回放功能使用介绍
Katalon Studio元素抓取功能Spy Web介绍
Katalon Studio提供了Web Object Spy功能,该功能可以主动抓取元素及其属性。同时,内置的验证和Highlight显示功能可以进一步验证元素定位的准确性。用户使用Web Object Spy可以随心所欲的抓取应用程序界面中的任何元素及其属性,并且保存到元素对象库中。备注:博主使用Katalon Studio当前最新版本:5.5.0
Altumn
2019/10/21
2.2K0
Katalon Studio元素抓取功能Spy Web介绍
FL Studio21编曲软件功能介绍
FL Studio是目前流行广泛使用人数最多音乐编曲制作软件,这款软件相信广大网友并不陌生,今天带来的是FL中文版本,所有的功能都能在线编辑,用户直接就能操作,同时因为是21水果是最新版,所以增加了新的功能,拥有八十多种乐器和效果插件,还包括效果链、音频发送、侧链控制、高级自动化、插件延迟补偿等,帮助用户制作出更加流行的音乐作品。除此之外,该FL Studio21还提供额外的样本和乐器、混合器、特效、过滤器和许多其他工具,使用简单且灵活,可以自动保存音频,完全自动化的操作,让你轻松创建各种风格的音乐作品。同时该软件对于计算机以及配置没有太多的要求,可灵活适用于各个设备,对于音乐格式也没有任何限制,可以在线编辑各种音乐作品,功能以及操作都是非常的人性化,有需要的朋友欢迎21水果FL下载体验。
用户7442547
2023/02/12
6190
Studio One6更新哪些新功能?
Studio One 6是一款非常专业的音乐创作编辑软件。为用户提供了所有一切你所需要创作的功能,包括所有的歌曲、项目、仪表板等动能,而且还自定义添加配置文件,良好的界面交互和丰富的功能板块,再结合优秀的性能,能够满足很多音乐爱好者或者创作人的需求,是专门创作音乐制作而创建的软件。该版本内置补丁,用户可永久免费使用。无论你选择Studio One哪个版本,你都可以得到无限的音轨、通道和插件;业界领先的拖放工作流程;以及一套完整的音频编辑和制作工具。
用户7442547
2023/01/15
7490
java解析zip文件_java解压zip文件
https://www.jianshu.com/p/a9d861732445 https://blog.csdn.net/aiynmimi/article/details/77453809
全栈程序员站长
2022/10/04
1.2K0
java解析zip文件_java解压zip文件
点击加载更多

相似问题

与Omnis Studio的持续集成

119

UML图和Omnis Studio 5或8

14

Omnis 64位

311

在Omnis中验证和清理JSON?

210

Python中的zip(*)功能

21
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文