Равная ширина ссылок Navbar с выпадающим - PullRequest
Новая
       1

Равная ширина ссылок Navbar с выпадающим

0 голосов
/ 04 марта 2020

Я хотел бы преобразовать ссылку Справка в раскрывающийся список при наведении курсора. Нужно ли преобразовывать это в неупорядоченный список или я могу использовать существующую структуру? Заранее спасибо. 

 <div class="navbar-project">
   <a href="#">Details</a> 
   <a href="#">Forms</a> 
   <a href="#">Documents</a> 
   <a href="#">Help</a> 
 </div>

CSS

 .navbar-project {
   width: 100%;
   background-color: #fff;
   overflow: auto;
   margin-top: 25px;
   margin-bottom: 25px;
 }

 .navbar-project a {
   float: left;
   padding: 12px;
   color: #000;
   text-decoration: none;
   font-size: 20px;
   width: 25%; /* Four links of equal widths */
   text-align: center;
   border-bottom: 3px solid white;
 }

 .navbar-project a:hover {
   border-bottom: 3px solid black;
 }

 .navbar-project a.active {
   background-color: #fff;
   border-bottom: 3px solid red;
 }

 @media screen and (max-width: 500px) {
   .navbar-project a {
     float: none;
     display: block;
     width: 100%;
     text-align: left;
   }
 }

Ответы [ 2 ]

0 голосов
/ 04 марта 2020

Вам просто нужно превратить элемент справки в ul, создать элементы li, а затем использовать display: none;, чтобы скрыть его, после этого вы можете использовать hover в ul и указать, что вы хотите, чтобы элементы li отображались с использованием display: block;. 

.navbar-project {
   width: 100%;
   background-color: #fff;
   overflow: auto;
   margin-top: 25px;
   margin-bottom: 25px;
 }

 .navbar-project a {
   float: left;
   padding: 12px;
   color: #000;
   text-decoration: none;
   font-size: 20px;
   width: 25%; /* Four links of equal widths */
   text-align: center;
   border-bottom: 3px solid white;
 }

 .navbar-project a:hover {
   border-bottom: 3px solid black;
 }

 .navbar-project a.active {
   background-color: #fff;
   border-bottom: 3px solid red;
 }

.navbar-project ul{
  display: flex;
  flex-direction: column;
  
}

.navbar-project ul li{
  display: none;
}

.navbar-project ul:hover li{
  display: block;
}


 @media screen and (max-width: 500px) {
   .navbar-project a {
     float: none;
     display: block;
     width: 100%;
     text-align: left;
   }
 }
 <div class="navbar-project">
   <a href="#">Details</a> 
   <a href="#">Forms</a> 
   <a href="#">Documents</a> 
   <ul><a href="#">Help</a>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     
   </ul> 
 </div>

Примечание: Я считаю, что ради семантики хорошо всегда использовать ul или ol в Ваш nav menu как Кай объяснен в другом комментарии, поэтому вам просто нужно создать еще один список внутри первого, как я продемонстрировал.

Редактировать: Я сделал некоторые изменения, и на этот раз ширина 25% работает, это пример

0 голосов
/ 04 марта 2020

лучший способ справиться с выпадающими списками - поместить их внутрь ul. Вы можете использовать приведенный ниже код в существующем коде 

<nav role="navigation">
  <ul>
    <li><a href="#">Button One</a></li>
    <li><a href="#">Button Two</a>
      <ul class="dropdown">
        <li><a href="#">Submenu-1</a></li>
        <li><a href="#">Submenu-2</a></li>
        <li><a href="#">Submenu-3</a></li>
      </ul>
    </li>
    <li><a href="#">Button Three</a></li>
  </ul>
</nav>

и в своем css

li {
 display: block;
 transition-duration: 0.5s;
}

li:hover {
  cursor: pointer;
}

ul li ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
}

ul li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
  clear: both;
  width: 100%;
}
...