个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 01:17:22 26 4
gpt4 key购买 nike

我正在做一个网站元素，我正在使用 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/

26 4 0
文章推荐： php - 如何构建 public_html 文件夹
文章推荐： html - 术语: "dynamic width"的含义是否有共识？
文章推荐： javascript - 使用深层链接的 ng bootstrap 下拉菜单样式
文章推荐： html - CSS Image Sprites 在 IE 11 中不起作用，但在 chrome 中工作正常
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com