javascript - 隐藏在主要内容下的导航栏下拉菜单-6ren

javascript - 隐藏在主要内容下的导航栏下拉菜单

转载作者：行者123 更新时间：2023-11-28 01:17:22

我正在做一个网站元素，我正在使用 Materialize框架。

问题:

我必须制作一个导航栏，它应该能够在其中显示下拉菜单/子菜单。我认为主要问题可能出在 overflow: 或 z-index 上。因此，我尝试测试 auto、visible 等之间的溢出。在测试期间我得到了 2 个观察结果:
1. 导航栏下拉菜单完美显示，但隐藏在主要内容后面
2. 导航栏下拉菜单完美地出现在主要内容之上，但在导航栏和主要内容之间形成了很大的空白。

谁能指出我错过了什么？或者我的代码有什么问题，如有任何帮助，我们将不胜感激，谢谢。

这是我的 HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="HandheldFriendly" content="true">
    <title></title>
<!--CSS-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>

<body>
    <!-- Header -->
    <nav id="navbar" class="white" role="navigation">
        <div class="nav-wrapper container">
            <a id="logo-container" href="index.html" class="brand-logo">
                <img src="images/logo_new.png" class="logosize" alt="logo">
            </a>
            <ul class="right hide-on-med-and-down">
                <li>
                    <a class='dropdown-button' href='#' data-activates='architect'>Architect</a>
                </li>
                <li>
                    <a class='dropdown-button' href='#' data-activates='interior'>Interior</a>
                </li>
                <li>
                    <a class='dropdown-button' href='#' data-activates='commercial'>Commercial</a>
                </li>
                <li>
                    <a class='dropdown-button' href='#' data-activates='test'>Office</a>
                </li>
                <li>
                    <a href="about.php">About Us</a>
                </li>
                <li>
                    <a href="contact.php">Contact Us</a>
                </li>
            </ul>
        <ul id="nav-mobile" class="side-nav">
            <li>
                <a class="dropdown-button" href="#" data-activates="architect-mobile">Architect</a>
            </li>
            <li>
                <a class="dropdown-button" href="#" data-activates="interior-mobile">Interior</a>
            </li>
            <li>
                <a class="dropdown-button" href="#" data-activates="commercial-mobile">Commercial</a>
            </li>
            <li>
                <a class="dropdown-button" href="#" data-activates="test-mobile">Office</a>
            </li>
            <li>
                <a href="about.php">About Us</a>
            </li>
            <li>
                <a href="contact.php">Contact Us</a>
            </li>
        </ul>
        <a href="#" data-activates="nav-mobile" class="button-collapse">
            <i class="material-icons">menu</i>
        </a>
    </div>
</nav>

<!-- Info Page -->
<div class="container">
    <div class="row">
        <div class="col s12">
            <!-- note: there is center before -->
            <!-- <h3><i class="mdi-content-send brown-text"></i></h3> -->
            <!-- Menu 1 -->
            <div class="col s12 m5">
                <p align="left">
                    <h3>
                        <b>Intimate House</b>
                    </h3>
                    <br> Project : Intimate House
                    <br>
                    <br> Location : Pulau Putri, Puri - West Jakarta - Indonesia
                    <br>
                    <br> Site Area : 160 sqm
                    <br>
                    <br> Building Area : 210 sqm
                    <br>
                    <br> Design Phase : 2016
                    <br>
                    <br> Construction Period : April 2016 - July 2017
                    <br>
                    <br>
                </p>

                <div class="textbox">
                    <p align="left">
                        <i>
                            Intimate House was built on a 8m x 20m land in West Jakarta. At first, it was a one story house with 2 bedrooms and 2 bathrooms.
                            It had a high ceiling, but lack of open space inside the house which make this house look
                            extremely dark, moist, and stuffy.</i>
                        <br>
                        <br>
                    </p>

                    <p align="right">
                        <i>
                            We transformed this house program by separating service area and private area. Furthermore private area is connected by a
                            connecting chamber in order to transform service area into private area which can be used
                            as a gathering room which is the main area in this Intimate House.</i>
                        <br>
                        <br>
                    </p>

                    <p align="left">
                        <i>
                            Living Room was designed to have natural air circulation and natural lighting. Both these natural element is obtained from
                            an open space next to Living Room, High Ceiling, and Skylight.</i>
                        <br>
                        <br>
                    </p>
                </div>
            </div>

            <!-- Menu 2 -->
            <div class="col s12 m7">
                <div class="slider">
                    <ul class="slides">
                        <li>
                            <img src="images/architecture/intimate_house/1.jpg">
                            <!-- random image -->
                        </li>
                        <li>
                            <img src="images/architecture/intimate_house/3.jpg">
                            <!-- random image -->
                        </li>
                        <li>
                            <img src="images/architecture/intimate_house/4.jpg">
                            <!-- random image -->
                        </li>
                        <li>
                            <img src="images/architecture/intimate_house/5.jpg">
                            <!-- random image -->
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<br>

<!-- Dropdown Menu -->
<div class="container_sub">
    <div class="section">
        <div class="row">
            <!-- Architect -->
            <ul id='architect' class='dropdown-content'>
                <li>
                    <a href="project.html">Project one</a>
                </li>
                <li>
                    <a href="#!">two</a>
                </li>
                <li>
                    <a href="#!">three</a>
                </li>
            </ul>
            <ul id='architect-mobile' class='dropdown-content'>
                <li>
                    <a href="project.html">Project one</a>
                </li>
                <li>
                    <a href="#!">two</a>
                </li>
                <li>
                    <a href="#!">three</a>
                </li>
            </ul>

            <!-- Interior -->
            <ul id='interior' class='dropdown-content'>
                <li>
                    <a href="#!">one</a>
                </li>
                <li>
                    <a href="#!">two</a>
                </li>
                <li>
                    <a href="#!">three</a>
                </li>
            </ul>
            <ul id='interior-mobile' class='dropdown-content'>
                <li>
                    <a href="#!">one</a>
                </li>
                <li>
                    <a href="#!">two</a>
                </li>
                <li>
                    <a href="#!">three</a>
                </li>
            </ul>

            <!-- Commercial -->
            <ul id='commercial' class='dropdown-content'>
                <li>
                    <a href="#!">one</a>
                </li>
                <li>
                    <a href="#!">two</a>
                </li>
                <li>
                    <a href="#!">three</a>
                </li>
            </ul>
            <ul id='commercial-mobile' class='dropdown-content'>
                <li>
                    <a href="#!">one</a>
                </li>
                <li>
                    <a href="#!">two</a>
                </li>
                <li>
                    <a href="#!">three</a>
                </li>
            </ul>

            <!-- Office -->
            <ul id='test' class='dropdown-content'>
                <li>
                    <a href="#!">one</a>
                </li>
                <li>
                    <a href="#!">two</a>
                </li>
                <li>
                    <a href="#!">three</a>
                </li>
            </ul>
            <ul id='test-mobile' class='dropdown-content'>
                <li>
                    <a href="#!">one</a>
                </li>
                <li>
                    <a href="#!">two</a>
                </li>
                <li>
                    <a href="#!">three</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<footer class="page-footer teal">
    <div class="footer-copyright">
        <div class="container">
            Copyright @
            <a class="white-text" href="#">2018</a>
        </div>
    </div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.carousel.carousel-slider').carousel({
            fullWidth: true
        });
        $('.slider').slider();
        $(".dropdown-button").dropdown({
            hover: true
        });
    });
</script>

这是我的完整代码:https://codepen.io/bukuchaga/pen/Zjqvxe

再次感谢。

最佳答案

你做错了，你应该知道位置属性是如何工作的。您正在使用相对位置。所以当你使用 position relative 时，它意味着 relative to itself 而不是 something else。下次记住这些棘手的事情是如何工作的，这样就不会浪费您的时间来解决由它们引起的错误。

我看过你的代码，css wrapper class nav .nav-wrapper 有一个错误的相对位置。

你不需要在这里使用relative position因为，它是unnecessary。所以，删除 它，您的代码就会像魅力一样工作。

如果您在设计中有任何其他错误，请发布另一个问题，如果我或其他人已经回答了您的问题，请将我或其他人的回答标记为已接受，以便关闭此线程。谢谢。

关于javascript - 隐藏在主要内容下的导航栏下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51738693/

文章推荐： php - 如何构建 public_html 文件夹

文章推荐： html - 术语: "dynamic width"的含义是否有共识？

文章推荐： javascript - 使用深层链接的 ng bootstrap 下拉菜单样式

javascript - 淡出 Div 内容 - 空 Div 内容 - 淡入新内容
我正在为我的按钮使用 onClick 功能。我的按钮代码如下所示: Button 1 Button 2 我的 JS 函数如下所示: function fadeNext(selectedId, spee
php - 如何将 MySQL 内容(文本+html 内容)分成列？
首先，我想提一下，我理解每个人在不提供至少一些试验或错误的情况下提出问题的感受，但这纯粹是一种知识需求，话虽如此，我会去提前问。我一直无法弄清楚如何将保存在 MySQL 表中的 600-1000 个
javascript - echo "row 1"内容每个不同位置的,"row 2"内容
我想做的事情有点令人困惑，而且我英语不太好，所以我先把代码贴在这里，这样你就可以很容易地理解: 以下是表单内容: Testing for Stackoverflow Option1
c++ - 使用 SDL_Renderer 绘制 2D 内容，使用 SDL_GLContext 绘制 OpenGL 内容
我学习 SDL 二维编程已有一段时间了，现在我想创建一个结合使用 SDL 和 OpenGL 的程序。我是这样设置的: SDL_Init(SDL_INIT_VIDEO); window = SDL_Cr
javascript - ID相同时如何获取data-*内容？
我创建了 2 个 data-* 标签。数据类别和数据标签。单击 href 标签后，我想复制该数据类别和数据标签以形成输入。我的代码是:
CSS 内容 - 换行符
我想用 CSS 换行。我正在使用内容。 td:before { content: "Test\A Test2"; } 它不工作。如何正确
Java HashMap 内容
这个问题已经有答案了: Java Class that implements Map and keeps insertion order? (8 个回答) 已关闭 6 年前。我有一个 HashMap
java - JMeter从SFTP文件夹中获取最新的文件/内容
我正在尝试使用 JMeter 执行端到端测试。测试涉及写入SFTP文件夹并从另一个SFTP文件夹读取写入操作生成的文件。我能够使用 JMeter SSH SFTP 插件连接到 SFTP 文件夹，并能
Java:上传文件并获取文件的字符串(内容)
您好，我有带有标准服务器端 Servlet 的 GWT 客户端。我可以从 GWT 客户端上传文件并在服务器端读取其内容我可以将其作为字符串发送回客户端但是我有 GWT FormPanel与操作
特定文件夹中允许的 Plone 内容
我在 Plone 4.3.9 中创建了一个自定义类型的灵巧性，称为 PersonalPage，必须只允许在特定文件夹中使用成员文件夹/用户文件夹 . 在他的 FTI 中，默认情况下 False .
Android:在新的应用程序版本中更改小部件的布局/内容
在新(更新)版本的应用程序中更改小部件布局的最佳做法是什么？当新版本提供更新、更好的小部件时，如何处理现有小部件？最佳答案我认为您必须向用户显示一个弹出窗口，说明“此版本中的新功能”并要求他们重新
旋转手机时Android隐藏 fragment 内容
在我的应用程序中，我使用支持 View 寻呼机和 PagerTabStrip。进入查看寻呼机我有一些 fragment ，进入其中一个我正在使用支持卡片 View 。运行应用程序后，所有卡片 View
Android更新textview计时器并刷新 map 内容？
我有以下布局文件。基本上我有谷歌地图，在左上角我有一个 TextView，我需要在其中每 15 秒保持一次计数器以刷新 map 。布局很好。
垃圾收集递归时的Java map 内容？
我使用如下结构: HashMap > > OverallMap 如果我这样做: OverallMap . clear ( ) clear() 丢弃的所有内容(HashMap 对象、Integer 对
php - 最佳实践ajax随机加载更多图像(内容)
我在数据库中有 1000 张图像。在页面加载时，我随机显示 60 张图片，当用户滚动时，我通过 AJAX 请求添加 20 张图片。第一种方法我所做的是将所有图像加载到一个容器中，然后隐藏所有图像并
表格消失后的 HTML 内容
我正在使用 woocommerce 创建一个网上商店。我想在每个产品上添加一个包含产品信息的表格，例如颜色、交货时间等等。但是当我添加这张表时。本产品消失后的所有内容。我的表的代码: td {
html - 内容:“”的作用是什么？
This question already has an answer here: What does an empty value for the CSS property content do?
javascript - 如何只点击模态外观而不点击对话框/内容？
因此，我正在与我的 friend 一起为 Google Chrome 开发一个扩展程序，对于大多数功能(即日历、设置等)，我们打开一个模式，这样我们就不必重定向到另一个页面。当您在内容之外单击时，我们
侧面带有垂直标题的 CSS 内容
我将可变高度的 CSS 框设置为在更大的 div 中向左浮动。现在我想添加一个标题，其中文本在框的左侧垂直显示(旋转 90 度)，如下面的链接所示(抱歉还不能发布图片)。 http://imagesh
html - 内容/页脚的宽度小于浏览器宽度
相关页面位于 www.codykrauskopf.com/circus 如果您查看我页面的右侧，在半透明容器和浏览器窗口边缘之间有一个间隙。我看了看，出于某种原因，wrap、main、content

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 隐藏在主要内容下的导航栏下拉菜单