#javascript #html #css
#javascript #HTML #css
Вопрос:
Я работал над простой горизонтальной панелью навигации, используя html
, css
и javascript
. Панель навигации содержит выпадающее меню (с именем More). Нажатие на меню «Еще» приводит к отображению скрытых ссылок (по вертикали) под заголовком «Еще», а повторное нажатие снова приводит к тому, что ссылки снова скрываются.
В файле css я установил, что все ссылки на панели навигации имеют двойную границу. Однако внешний вид границ вокруг ссылок в выпадающем меню отличается от внешнего вида границ вокруг других ссылок. В частности, границы вверху и внизу ссылок в выпадающем меню выглядят иначе, чем границы других ссылок. Почему это так?
Я включил html
, css
и javascript
код.
Спасибо, Mfl
function clickMoreMenu() {
var x = document.getElementById("hiddenlinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
#navbar {
padding : 0;
display : flex;
width : 400px;
margin-left : auto;
margin-right : auto;
margin-bottom : 20px;
}
.navoption {
text-align : center;
width: 100px;
display : inline-block;
float : left;
}
#moremenu {
display : inline-block;
}
#hiddenlinks {
display: none;
position : absolute;
z-index : 1;
}
#navbar a {
display : block;
text-align : center;
text-decoration : none;
padding-top : 10px;
padding-bottom : 10px;
width : 100px;
color : Blue;
background : Yellow;
border-style : double;
border-color : Blue;
border-width : medium;
}
#navbar a.currentpage {
color : DarkBlue;
background : Gold;
}
#navbar a:hover {
background : Blue;
color : Yellow;
}
h1 {
color : blue;
text-align : center;
}
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Border Test</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Border 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">
<div>
<a href="javascript:void(0);" onclick="clickMoreMenu()">More...</a>
</div>
<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>
<script src="moremenu.js"></script>
</body>
</html>
Комментарии:
1. это потому, что вы добавили
border: double
, а другие элементы находятся на следующей строке и не сталкиваются друг с другом.2. Вас смущают эти границы? — ibb.co/f0xCWDs
3. Просто добавьте его в свой css. —
#hiddenlinks a { border-top-style: hidden;}
4. @tacoshy элементы class .navoption (индекс, вариант 2 и вариант 3 и более) сталкиваются друг с другом слева и справа? Если да, можете ли вы порекомендовать способ остановить их столкновение? Спасибо.
Ответ №1:
Это связано с тем, что толщина границы составляет 1 пиксель, и когда 2 границы находятся рядом друг с другом, будет выглядеть, что есть только одна граница толщиной 2 пикселя. Вы могли бы добавить отрицательное верхнее поле в -1 пиксель на «#hiddenlinks a», чтобы исправить это.
function clickMoreMenu() {
var x = document.getElementById("hiddenlinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
#navbar {
padding : 0;
display : flex;
width : 400px;
margin-left : auto;
margin-right : auto;
margin-bottom : 20px;
}
.navoption {
text-align : center;
width: 100px;
display : inline-block;
float : left;
}
#moremenu {
display : inline-block;
}
#hiddenlinks {
display: none;
position : absolute;
z-index : 1;
}
#hiddenlinks a {
margin-top: -1px;
}
#navbar a {
display : block;
text-align : center;
text-decoration : none;
padding-top : 10px;
padding-bottom : 10px;
width : 100px;
color : Blue;
background : Yellow;
border-style : double;
border-color : Blue;
border-width : medium;
}
#navbar a.currentpage {
color : DarkBlue;
background : Gold;
}
#navbar a:hover {
background : Blue;
color : Yellow;
}
h1 {
color : blue;
text-align : center;
}
<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Border Test</title>
<link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Border 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">
<div>
<a href="javascript:void(0);" onclick="clickMoreMenu()">More...</a>
</div>
<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>
<script src="moremenu.js"></script>
</body>
</html>
Ответ №2:
Спасибо за предложенные решения. Я нашел другое решение. Для каждого элемента класса navoption
, который содержит ссылку, была установлена ширина в 100 пикселей. Однако ширина самих ссылок также была установлена на 100 пикселей. Дополнительная ширина границ привела к тому, что ширина ссылок превысила 100 пикселей, поэтому у каждого navoption
элемента было недостаточно места для отображения всех содержащихся в нем ссылок слева и справа. Я прокомментировал ширину для navoption
класса, оставив только ширину самих ссылок, а границы слева и справа от ссылок теперь отображаются в соответствии с границами сверху и снизу.