Пробуем прокручиваемое раскрывающееся меню в CSS - PullRequest
Новая
       65

Пробуем прокручиваемое раскрывающееся меню в CSS

1 голос
/ 20 июня 2020

Я новичок в CSS и разрабатываю раскрывающееся меню на чистом CSS, следуя этому руководству https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button

Я пробовал свойство overflow- y: auto, чтобы получить полосу прокрутки, но если я введу «раскрывающийся список», это не сработает, и если я введу «раскрывающееся содержимое», тоже не будет работать. Есть ли другой вариант?

Я хочу, чтобы, как вы видите в моем коде, было два изображения, одна текстовая строка и раскрывающееся меню со списком языков, отображаемых 5 на 5 с это изображение того, что я делаю (https://ibb.co/JkN1HZS)

Вот мой HTML CSS код 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome screen</title>
</head>
<style>
  .fondo
    {
      position: absolute;
      top: 0;
      left: 0;
    }
.choose-language
    {
      position: relative;
      top: 200px;
      left: 80px;
      font-family: Ubuntu;
      font-style: bold;
      font-size: 25px;
      text-align: center;
      color: white;
    }
.logofinal
    {
      position: relative;
      top: 150px;
      left: 750px;
    }

    .dropbtn 
     /*botón menu*/
  {
  background-color: orange;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown 
 /*caja menu*/
{
  position: relative;
  display:inline-block;
  left: 860px;
  top: 250px;
  

}

.dropdown-content 
 /*cajones posbles*/
{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 105px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a 
 /*opciones posibles*/
{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
  overflow:auto;
}

.dropdown:hover .dropbtn {
  background-color: orange;
}
  
  
</style>
<div style="position: relative; left: 0; top: 0;">
     <img src="fondo.jpg" class="fondo" width="100%" height="auto"/>
     <img src="logofinal.png" class="logofinal" width="20%" height="auto"/>
<div class="choose-language">CHOOSE A LANGUAGE AND START THE ADVENTURE</div>
</body>
    <div class="dropdown">
      <button class="dropbtn">Languages</button>
      <class class="dropdown-content">
      <a href="#">Bulgarian</a>
      <a href="#">Croatian</a>
      <a href="#">Czech</a>
      <a href="#">Danish</a>
      <a href="#">Dutch</a>
      <a href="#">English</a>
      <a href="#">Estonian</a>
      <a href="#">Finnish</a>
      <a href="#">French</a>
      <a href="#">German</a>
      <a href="#">Greek</a>
      <a href="#">Hungarian</a>
      <a href="#">Irish</a>
      <a href="#">Italian</a>
      <a href="#">Latvian</a>
      <a href="#">Lithuanian</a>
      <a href="#">Maltese</a>
      <a href="#">Polish</a>
      <a href="#">Portuguese</a>
      <a href="#">Romanian</a>
      <a href="#">Slovak</a>
      <a href="#">Slovenian</a>
      <a href="#">Spanish</a>
      <a href="#">Swedish</a>


      </class>
    </div>
    </body>
   

</html>

1 Ответ

1 голос
/ 20 июня 2020

Если я прав, вы пытаетесь прокрутить раскрывающееся меню вместо списка c, который вы получаете сейчас.

Причина, по которой список становится таким длинным, заключается в том, что нет максимума на его высоту. Вы можете легко исправить это, добавив свойство max-height в свой раскрывающийся список: 

.dropdown:hover .dropdown-content {
  display: block;
  overflow:auto;
  max-height:200px; /* add this or some bigger/smaller value*/
}

Пример с (частью) вашего кода: 

.dropdown-content 
 /*cajones posbles*/
{
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 105px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a 
 /*opciones posibles*/
{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
  overflow:auto;
  max-height:200px;
}

.dropdown:hover .dropbtn {
  background-color: orange;
}
<div class="dropdown">
      <button class="dropbtn">Languages</button>
      <class class="dropdown-content">
      <a href="#">Bulgarian</a>
      <a href="#">Croatian</a>
      <a href="#">Czech</a>
      <a href="#">Danish</a>
      <a href="#">Dutch</a>
      <a href="#">English</a>
      <a href="#">Estonian</a>
      <a href="#">Finnish</a>
      <a href="#">French</a>
      <a href="#">German</a>
      <a href="#">Greek</a>
      <a href="#">Hungarian</a>
      <a href="#">Irish</a>
      <a href="#">Italian</a>
      <a href="#">Latvian</a>
      <a href="#">Lithuanian</a>
      <a href="#">Maltese</a>
      <a href="#">Polish</a>
      <a href="#">Portuguese</a>
      <a href="#">Romanian</a>
      <a href="#">Slovak</a>
      <a href="#">Slovenian</a>
      <a href="#">Spanish</a>
      <a href="#">Swedish</a>


      </class>
    </div>
...