更新

Question

感谢您考虑这个问题。

代码可以在GitHub上找到，here。

这里有一些事情发生，所以在我们得到代码之前，我想解释一下它。

我有一个函数makeNavigation，它使用三个参数来创建导航栏：导航栏的项目数组，导航栏应该去的元素ID和大小。

当不包括边距时，这非常有效。但是，只要边距的两条线被取消注释，那么下拉内容就会比它应该大得多。想法？

此外，当窗口尽可能小地折叠时，而不是只有一个下拉元件，“Home”和下拉条被堆叠。为什么/我怎么能纠正这个？

注意：我来源W3 CSS和hover-master

因此，对于变量，我们有页面和“大小”。

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>

Answer 1

赏金说：

2。）为什么当窗户有最小宽度时，＆＃34; HOME＆＃34;堆放在下拉条的顶部。

原来这是一个特殊问题。试试这个：

@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 !! 只需将其粘贴到<head> 末尾的样式标记中，然后在一个问题中提及此问题（programmer5000）评价。

JavaScript：带有下拉列表的动态导航栏会导致下拉元素宽度

更新

1 个答案: