Блог

Главная - Вопросы по программированию - Появление двойной границы в выпадающем меню на горизонтальной панели навигации

Появление двойной границы в выпадающем меню на горизонтальной панели навигации

#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 класса, оставив только ширину самих ссылок, а границы слева и справа от ссылок теперь отображаются в соответствии с границами сверху и снизу.

Метки: