javascript - 隐藏在主要内容下的导航栏下拉菜单
问题描述
我正在做一个网站项目,我正在使用Materialize框架。
问题 :
我必须制作一个导航栏,它应该能够放出一个下拉菜单/子菜单。我认为主要问题可能在
overflow
: 或z-index
. 因此,我尝试测试 , 等之间的溢出auto
。visible
我在测试期间得到了 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
不是 from something else
。下次请记住这些棘手的事情是如何工作的,这样就不会浪费您的时间来解决由它们引起的错误。
我看过你的代码,css 包装类nav .nav-wrapper
的相对位置错误。
你不需要在relative position
这里使用,因为它是unnecessary
. 因此,remove
它和您的代码将像魅力一样工作。
如果您在设计中有任何其他错误,请发布另一个问题,如果我或其他人回答了您的问题,则将我或其他人的答案标记为已接受,以便可以关闭此线程。谢谢。
推荐阅读
- xaml - Xamarin Forms:Android 上忽略的 ImageButton 边框
- html - 我在哪里可以在我的网站上插入无限滚动字幕的代码?
- swift - 使用 @ObservedObject 包装的核心数据对象会导致 NavigationLink 目标在该对象被删除时重新呈现
- python - 如何从特定键中获取值
- javascript - 如何使用 vuejs 将数据“推送()”到 firebase 中的现有数组?
- python - 使用生成的用户名填充 Django 用户名字段
- visual-studio-code - 如何在 VSCode 中禁用 TS6133 “XXXXX is declared but its value is never used”警告?
- amazon-web-services - 服务器列表的 Cloudwatch 警报
- algorithm - 交错两个未排序的数组以获得词典最大的结果
- posix - POSIX 是否要求 `getconf V7_ENV` 有效?