个人中心
gpt4 book ai didi

javascript - 如何防止 UL 获取下拉菜单的全高属性？

转载 作者：太空宇宙 更新时间：2023-11-04 01:58:18 26 4
gpt4 key购买 nike

我有一个粘性导航栏，在外观和感觉方面几乎是完整的。但是，每当我在任何链接中添加下拉菜单时，它都会创建一个不可见的字段，该字段将隐藏进入其中的文本。经过一些挖掘，我发现 UL 具有下拉菜单的全高度属性，即使它目前是不可见的。我的目标是尽可能让下拉菜单成为它自己的实体，这样就不会发生这种情况。最终结果将使菜单具有更高的 z 索引，并且仅覆盖其正下方的内容，直到您将鼠标移开它为止。

虽然我正在处理这个问题，但我也遇到了一个小问题，即在将鼠标悬停在元素出现的空间上时会出现下拉菜单。这是一种不良影响，我认为这是问题的根源。

这是下拉菜单出现的情况:

With Drop Down Menu

没有它会发生什么:

enter image description here

这是一个JSFiddle .如果您遇到 Logo 出现问题，请查看该网站。另请记住，我还没有针对较小的屏幕进行优化，因此请扩大宽度直到导航栏水平。

网站链接:http://www.wolvesofthedust.com/

我当前的代码:

HTML:

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

<head>
  <title>The Den</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
  <link rel="stylesheet" media="screen, projection" href="style.css">
  <link rel="shortcut icon" href="Images/favicon.ico" />
  <script type ="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type ="text/javascript" src="script.js"></script>
</head>

<body>
    <div class="status"></div>
    <div class="logo">          
        <center><a href="http://www.wolvesofthedust.com/"><img src="Images/WolvesoftheDustSiteHeader.png" height="auto" width="100%" border="0" alt=" photo WolvesoftheDustSiteHeader.png"/></a></center>
    </div>
    <br/>
    <br/>
    <div class ="navigation">   
        <nav>
            <ul class="clearfix">
                <li><a href="#">|||</a>
                    <ul class="Dropdown">
                        <a href="#">Shadows and Chaos</a>
                        <a href="#">Fate of Feravis</a>
                        <a href="#">Magnetix</a>
                        <a href="#">Tools</a>
                    </ul>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
                <li><a href="#">Link 6</a></li>
                <li><a href="#">Link 7</a></li>
                <li><a href="#">Link 8</a></li>
                <li><a href="#">Link 9</a></li>
            </ul>
        </nav>
    </div>
    <div class ="Logo2">
    <img src="Images/WolvesoftheDustSmallLogo.png" alt="WolvesoftheDustSmallLogo" width="100%" height="70px"</a>
    </div>
    <div class="EmptySpace">
    </div>
    <div class ="content">
        <center><h2>THIS WEBSITE IS UNDER CONSTRUCTION!!! TAKE NOTHING HERE YOU SEE SERIOUSLY FOR THE TIME BEING!!!</h2></center> <!-- This is where I will likely have the table located with nicely written dialogue... but if the table isn't needed above then I may as well continue this practice elsewhere. Did I learn all about tables and arranging code properly for nothing? -->
        <br/>
        <br/>
        <p><!-- Interestingly enough it took me a while to realize that P stood for paragraph... considering people normally only wrote a single sentance per line with a "p" tag. Stupid examples and my insinuations based on them -->The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
        <p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>

    </div>

CSS:

html {
    padding: 0;
    margin: 0;
    background-color: #000;
}

body {
    font-family: Helvetica, sans-serif;
    font-size: 93%;
    line-height: 1.5em;
    padding: 40px 0;
    margin: 0;
    color: #7d0000;
}

a,
a:link,
a:visited {
    color: blue;
}

h1, h2, h3, h4, h5, h6 {margin-top: 0;}

p {margin: 0 0 1em 0;}

.logo {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 20px;
    border: 2px solid #7d0000;
}

.navigation {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.logo2 {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.content {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

h1 {
    background-color: #305782;
    color: #FFF;
    padding: 60px 25px;
    margin: 0;
}

nav {
    z-index: 500;
    background-color: #000; 
}

.nav-placeholder {
    margin: 0 0 40px 0;
}

.fixed {
    position: fixed;
    top: 65px;
    left: 0;
    width: 100%;
    background-color: #000;
}

.fixed .nav-inner {
    padding: 0 20px;
}

.fixed .nav-inner-most {
    max-width: 100%;
    margin: 0 auto;
    background-color: #000;
}

nav ul {
display: table;
text-align:center;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}

nav ul li {
display: inline-block;
margin: 15px;
text-align: center;
}

nav ul li a:link,
nav ul li a:visited {
    display: block;
    text-decoration: none;
    padding: 10px 25px;
    background-color: #000;
    color: #7d0000;
    font-size: 90%;
    font-weight: bold;
    border: 2px solid #7d0000;
}

nav ul li a:hover {
    background-color: #28bfa1;
    color: #FFF
}

nav ul li:hover .Dropdown {
    z-index:1;
    opacity:1;
}

.Dropdown {
    position: relative;
    opacity: 0;
    z-index: -1;
}

/*.Dropdown li {
    display: block;
}*/

.Dropdown li a {
    display: block;
    padding: 10px 30px;
}

.Dropdown li a:hover, .Dropdown .current-item a {
    background: #3e3436;
}


.Logo2 {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 300;
}


.EmptySpace {
    height: 250px;
}

@media (max-width: 1200px) {
    nav ul li{
        display: inline;
   }
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JS:

jQuery(document).ready(function() {

    // define variables
    var navOffset, scrollPos = 0;

    // add utility wrapper elements for positioning
    jQuery("nav").wrap('<div class="nav-placeholder"></div>');
    jQuery("nav").wrapInner('<div class="nav-inner"></div>');
    jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');

    // function to run on page load and window resize
    function stickyUtility() {

        // only update navOffset if it is not currently using fixed position
        if (!jQuery("nav").hasClass("fixed")) {
            navOffset = jQuery("nav").offset().top;
        }

        // apply matching height to nav wrapper div to avoid awkward content jumps
        jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

    } // end stickyUtility function

    // run on page load
    stickyUtility();

    // run on window resize
    jQuery(window).resize(function() {
        stickyUtility();
    });

    // run on scroll event
    jQuery(window).scroll(function() {

        scrollPos = jQuery(window).scrollTop();

        if (scrollPos >= navOffset) {
            jQuery("nav").addClass("fixed");
        } else {
            jQuery("nav").removeClass("fixed");
        }

    });

});

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 600) {
    $('.Logo2').fadeIn();
  } else {
    $('.Logo2').fadeOut();
  }
});

提前谢谢你，

影牙

最佳答案

是因为你的.Dropdown元素的样式是position: relative; 和opacity: 0; 表示它是隐藏的，但是仍在 DOM 中占用空间。

要创建这类下拉导航菜单，人们通常使用绝对定位来解决这个问题。当您将某物定位为绝对位置时，它不再占用 DOM 中的空间，但它必须通过 position: relative; 锚定到父元素。在这种情况下，它将是 nav > ul > li。

因此，要解决此问题，您需要更新这些样式:

nav  ul  li {
  position: relative; /* add this for an anchor point*/
  display: inline-block;
  margin: 15px;
  text-align: center;
}

.Dropdown {
    position: absolute; /* add this to position the dropdown off the li parent */
    top: 100%; /* put it at the very bottom of the li*/
    left: 0;
    opacity: 0;
    z-index: -1;
}

查看此 fiddle用于演示。

此外，您还采用了这种响应式风格:

@media (max-width: 1200px) {
    nav ul li{
        display: inline;
   }
}

你应该把它改成

@media (max-width: 1200px) {
    nav ul li{
        display: block;
   }
}

但你说你我还没有针对较小的屏幕进行优化所以我认为这种风格只是为了演示。

关于javascript - 如何防止 UL 获取下拉菜单的全高属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42212683/

26 4 0
文章推荐： c - 嵌套 {} 内局部变量的内存分配
文章推荐： python - 从列表中有条件地创建 Groupboxes
文章推荐： c - 查找宏生成的所有函数
文章推荐： node.js - typescript 错误中的字符串枚举