JavaScript: 动态导航栏带下拉菜单影响下拉元素宽度

11

感谢您考虑这个问题。

代码可以在GitHub上找到,此处

这里有几件事情需要处理,所以在我们开始编写代码之前,我想解释一下。

我有一个函数 makeNavigation,它需要三个参数来创建导航栏:一个用于导航栏的项目数组,导航栏应该放在哪个元素ID中,以及大小。

如果不包括边距,这个函数效果很好。然而,当取消注释两行边距时,下拉内容比应有的要大得多。你有什么想法吗?

此外,当窗口最小化时,除了一个下拉元素"Home"之外,还将堆叠其他下拉菜单。如何纠正这个问题?

注意:我引用了W3 CSShover-master

因此,对于变量,我们有"pages"和"sizes"。

var pages = ["HOME","ABOUT","PAGE3","PAGE4","PAGE5","PAGE6","PAGE7","PAGE8"];
var extraSmall, small, medium, large;
extraSmall = 610;
small = 700;
medium = 800;
large = 1250;

对于函数:

function getSizeInText(size) {

  if (size > large) {
    return("large")
  };
  if (extraSmall < size && size <  medium) {
    return("small")
  };
  if (medium <= size && size <= large) {
    return("medium")
  };
  if (size <= extraSmall) {
    return("extraSmall")
  }
}

function makeNavigation(navArray, navID, size) {

  var theID = document.getElementById(navID);
  var mar = 8;
  var pad = 2;
  theID.innerHTML = null;
  // theID.style.marginRight = mar + "%";
  // theID.style.marginLeft = mar + "%";
  theID.style.marginTop = mar/4 + "%";
  if (size == "extraSmall") {
    var numNav = navArray.length;
    theID.innerHTML += '<li class="w3-dropdown-hover w3-centered" '+
    'style="width:' + spaceAllocated + '%" >' +
    '<a class="hvr-reveal navFont">' +
    '<i class="fa fa-bars"></i></a>' +
    '<ul id="dropDownContent" class="w3-dropdown-content" style="width:'+ spaceAllocated +'%">' +
    '</ul>' + '</li>';
    for (var i = 0; i < numNav; i++ ) {
      document.getElementById('dropDownContent').innerHTML+=
      '<li style="width:' +
      (100 - 2*pad) + '%">'+
      '<a  class="hvr-reveal navFont" href="' + navArray[i].toLowerCase() + '.html">' +
      navArray[i] + '</a></li>';
    }
  }


  if (size == "small") {
    var numNav = navArray.length;
    var spaceAllocated = (100 ) / 2;
    for (var i = 0; i < 1; i++) {
        theID.innerHTML +=
        '<li style = "width:' +
        spaceAllocated +
        '%"><a  class="hvr-reveal navFont"' +
        ' href="' +
        navArray[i].toLowerCase() +
        '.html">' +
        navArray[i] + '</a></li>';
    };
    theID.innerHTML += '<li class="w3-dropdown-hover w3-centered" '+
    'style="width:' + spaceAllocated + '%" >' +
    '<a class="hvr-reveal navFont">' +
    '<i class="fa fa-bars"></i></a>' +
    '<ul id="dropDownContent" class="w3-dropdown-content" style="width:'+ spaceAllocated +'%">' +
    '</ul>' + '</li>';
    for (var i = 1; i < numNav; i++ ) {
      document.getElementById('dropDownContent').innerHTML+=
      '<li style="width:' +
      (100 - 2*pad) + '%">'+
      '<a  class="hvr-reveal navFont" href="' + navArray[i].toLowerCase() + '.html">' +
      navArray[i] + '</a></li>';
    }
  }

  if (size == "medium") {
    var numNav = navArray.length;
    var half = Math.floor(numNav/2);
    var spaceAllocated = (100 )  / (half+1);

    for (var i = 0; i < half; i++) {
        theID.innerHTML +=
        '<li style = "width:' +
        spaceAllocated +
        '%"><a  class="hvr-reveal navFont"' +
        ' href="' +
        navArray[i].toLowerCase() +
        '.html">' +
        navArray[i] + '</a></li>';
    };

    theID.innerHTML += '<li class="w3-dropdown-hover w3-centered" '+
    'style="width:' + spaceAllocated + '%" >' +
    '<a class="hvr-reveal navFont">' +
    '<i class="fa fa-bars"></i></a>' +
    '<ul id="dropDownContent" class="w3-dropdown-content" style="width:'+ spaceAllocated +'%">' +
    '</ul>' + '</li>';
    for (var i = half; i < numNav; i++ ) {
      document.getElementById('dropDownContent').innerHTML+=
      '<li style="width:' +
      (100 - 2*pad) + '%">'+
      '<a  class="hvr-reveal navFont" href="' + navArray[i].toLowerCase() + '.html">' +
      navArray[i] + '</a></li>';
    }
  };

  if (size == "large") {
    var numNav = navArray.length;
    var spaceAllocated = (100 )  / numNav;

    for (var i = 0; i < numNav; i++) {
        theID.innerHTML +=
        '<li style = "width:' +
        spaceAllocated +
        '%"><a  class="hvr-reveal navFont"' +
        ' href="' +
        navArray[i].toLowerCase() +
        '.html">' +
        navArray[i] + '</a></li>';
    };
  };
}

然后在HTML中:

<div class="w3-container w3-section"><ul id="navBar" class="w3-navbar w3-center"></ul></div>

<script type="text/javascript">
    var windowWidth;
    var size;

    jQuery(document).ready(function(){
      windowWidth = jQuery(window).width();
      size = getSizeInText(windowWidth);
      if (windowWidth > large) {}
      if (windowWidth <  medium) {}
      if (medium <= windowWidth && windowWidth <= large) {}
    });

    jQuery(window).resize(function () {
      windowWidth = jQuery(window).width();
      size = getSizeInText(windowWidth);
      if (windowWidth > large) {
        makeNavigation(pages, "navBar", size);
      }

      if (windowWidth <  medium) {
        makeNavigation(pages, "navBar", size);
      }

      if (medium <= windowWidth && windowWidth <= large) {
        makeNavigation(pages, "navBar", size);
      }



    });
  </script>

更新

programmer5000提供了一个解决方案来解决这个特定的问题。然而,当不使用w3-css时,相同的解决方案无法工作。为什么?

/* Drop down content */
li a, .dropbtn {
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    text-align: center;
    width: inherit;
    z-index: 1;
}

.dropdown-content a {
    text-decoration: none;
    display: block;
}


.dropdown:hover .dropdown-content {
    display: block;
}




<nav id ='navigation-bar'>
  <ul>
    <li><a href="#"> HOME </a></li>    
    <li class="dropdown">
      <a class="dropbtn">TEST</a>
      <div class="dropdown-content">
        <a>1</a>
        <a>2</a>
        <a>3</a>
      </div>
    </li>
  </ul>
</nav>

CSS 媒体查询怎么样? - Ryan Holmes
2
你应该使用 CSS 媒体查询 或者在 jsFiddle 上查看一个简单的例子。你应该使用 HTML 编写文档,并使用 CSS 进行样式设计,而何时使用 JavaScript 可以在这里找到答案:你知道何时应该使用 JavaScript - caramba
@Caramba 媒体查询可以连续吗?例如,始终获取屏幕大小并在渐变中更新?此外,我使用JS设置导航栏项目并将其放置在每个网页上,我认为这很好,因为可以重复使用代码。这不是这种情况吗? - SumNeuron
@SumNeuron 是的,它们是连续的。因此,无论您在CSS中如何定义,始终从一步到下一步。重用代码很好,但在这种情况下可能不适用。此外,Google的机器人和索引变得更加优秀,但如果JavaScript被关闭(这通常是机器人的情况),它们将无法找到您的导航并且无法索引您的页面。因此没有内容。 - caramba
@MichaelCoker 抱歉,我上传到 GitHub 的代码自原始发布以来已经更改了一些名称,例如 makeNavigation 现在变成了 renderNavigationBar。无论如何,情感保持不变,GitHub 上的代码有大量注释,因此使用起来不应该很难。 - SumNeuron
显示剩余4条评论
1个回答

7

奖金要求:

2.) 当窗口宽度最小时,“HOME”为什么会堆叠在下拉栏顶部。

结果发现这是一个特殊性问题。尝试这个:

@media screen and (max-width: 600px){
   .w3-navbar li:not(.w3-opennav) {
       width: 50% !important;
       float: left !important;
   }
}

那将解决那个问题。

针对 #1:

1.) 主导航栏元素和下拉菜单之间的宽度差异

#dropDownContent li {
    width: 100% !important;
}
.w3-dropdown-hover:hover .w3-dropdown-content{
    position: initial;
}

对于两者来说,这只是一些奇怪的绝对定位问题和一些特殊性问题。总共只有12行CSS!只需将其粘贴到样式标签中,在结束时提及此问题或我(programmer5000)的姓名即可。

你能详细说明一下这些是如何工作的吗?最后,我该如何将导航栏固定在原位?例如,当你缩小窗口时,导航栏会稍微上移... - SumNeuron
请您回复之前的评论,好吗? - SumNeuron

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接