我一直在使用 html、css 和 javascript 开发一个简单的水平导航栏。导航栏包含一个下拉菜单(名为 More)。单击“更多”菜单会导致隐藏链接(垂直)显示在“更多”标题下方,再次单击会导致链接再次隐藏。
我将导航栏中所有链接的边距设置为 2px(在 css 文件中),但链接之间的距离似乎不一致。具体来说,点击更多后,选项4和5之间的距离,以及选项5和6之间的距离,与其他链接之间的距离是不同的。你知道是什么导致了这个问题吗?
function clickMoreMenu() {
var x = document.getElementById("hiddenlinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
#navbar {
display: block;
width: 425px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.navoption {
text-align: center;
display: block;
float: left;
}
#moremenu {
display: block;
}
#hiddenlinks {
display: none;
position: absolute;
z-index: 1;
margin-top: 0px;
}
#navbar a {
display: block;
text-align: center;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
width: 100px;
color: Blue;
background: Yellow;
border-style: solid;
border-color: Blue;
border-width: 1px;
margin: 2px;
}
#navbar a.currentpage {
color: DarkBlue;
background: Gold;
}
#navbar a:hover {
background: Blue;
color: Yellow;
}
h1 {
color: blue;
text-align: center;
}
.clearleft {
clear: left;
}
<h1>Distance Test</h1>
<nav id="navbar">
<div class="navoption">
<a href="index.html" class="currentpage">Index</a>
</div>
<div class="navoption">
<a href="option2.html">Option 2</a>
</div>
<div class="navoption">
<a href="option3.html">Option 3</a>
</div>
<div class="navoption" id="moremenu">
<a href="javascript:void(0);" onclick="clickMoreMenu()">More...</a>
<div id="hiddenlinks">
<a href="option4.html">Option 4</a>
<a href="option5.html">Option 5</a>
<a href="option6.html">Option 6</a>
</div>
</div>
</nav>
<div class="clearleft">Some text.</div>
答案 0 :(得分:0)
对您的 css 进行一些修改后,您就可以使用它了。
注意:在css中删除2个选项中的第1个!
function clickMoreMenu() {
var x = document.getElementById("hiddenlinks");
if (x.style.display == "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
#navbar {
display: block;
width: 425px;
margin: 0px auto 20px auto;
}
.navoption {
display: block;
float: left;
/* next line relative because #hiddenlinks is absolute */
position: relative;
text-align: center;
}
#hiddenlinks {
display: none;
position: absolute;
top: 100%;
left: 0%;
z-index: 1;
}
#navbar a {
box-sizing: border-box; /* keep padding & border in the button */
display: block;
width: 100px;
margin: 2px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid blue;
text-align: center;
text-decoration: none;
color: blue;
background: yellow;
}
/* option 1: all submenu items small gaps */
#navbar > div:last-child > a {
margin-bottom: 0;
}
/* OR option 2: all submenu items same gap as topmenu */
#navbar #hiddenlinks a {
margin-bottom: 4px;
}
#navbar a.currentpage {
color: darkblue;
background: gold;
}
#navbar a:hover,
#navbar a:active {
background: blue;
color: yellow;
}
h1 {
color: blue;
text-align: center;
}
.clearleft {
clear: left;
}
<h1>Distance Test</h1>
<nav id="navbar">
<div class="navoption">
<a href="index.html" class="currentpage">Index</a>
</div>
<div class="navoption">
<a href="option2.html">Option 2</a>
</div>
<div class="navoption">
<a href="option3.html">Option 3</a>
</div>
<div class="navoption" id="moremenu">
<a href="javascript:void(0);" onclick="clickMoreMenu()">More...</a>
<div id="hiddenlinks">
<a href="option4.html">Option 4</a>
<a href="option5.html">Option 5</a>
<a href="option6.html">Option 6</a>
</div>
</div>
</nav>