感谢您考虑这个问题。
代码可以在GitHub上找到,此处。
这里有几件事情需要处理,所以在我们开始编写代码之前,我想解释一下。
我有一个函数 makeNavigation,它需要三个参数来创建导航栏:一个用于导航栏的项目数组,导航栏应该放在哪个元素ID中,以及大小。
如果不包括边距,这个函数效果很好。然而,当取消注释两行边距时,下拉内容比应有的要大得多。你有什么想法吗?
此外,当窗口最小化时,除了一个下拉元素"Home"之外,还将堆叠其他下拉菜单。如何纠正这个问题?
注意:我引用了W3 CSS和hover-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>
makeNavigation
现在变成了renderNavigationBar
。无论如何,情感保持不变,GitHub 上的代码有大量注释,因此使用起来不应该很难。 - SumNeuron