JavaScript：帶下拉的動態導航欄干擾下拉元素寬度

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.）爲什麼當窗口具有最小寬度，「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！只需將其粘貼在<head>末尾的樣式標記中，並在評論中提及此問題或我（programmer5000）。