Блог

Главная - Вопросы по программированию - Как мне создать выпадающее меню в html?

Как мне создать выпадающее меню в html?

#javascript #css #html

#javascript #css #HTML

Вопрос:

предварительный просмотр веб-сайтаУ меня возникли проблемы с вставкой выпадающего меню в панель навигации в HTML-коде моего веб-сайта. Я пробовал различные варианты, но, похоже, ни один из них не работает. Есть идеи?

Я хочу сделать «кнопку» откатной, которую я указал с помощью «ROLLDOWN» в коде.

 <nav id="nav">
<ul>
    <li class="current"><a href="index.html">Option1</a></li>
    <li><a href="park.html">Option2</a></li>
    <li><a href="jatekok.html"> <font color="#d30000">ROLLDOWN</font></a></li>
    <li><a href="szolgaltatasok.html">Option3</a></li>
    <li><a href="kapcsolat.html">Option4</a></li>
</ul>
</nav>

Комментарии:

1. Итак, что должно произойти, чтобы на это можно было нажать. И это не кнопка, а тег привязки

2. Что вы подразумеваете под «свертыванием»… нравится подменю? Не могли бы вы, пожалуйста, указать свою самую предыдущую попытку, которая не сработала? к вашему сведению, <font> тег устарел, вы должны прекратить его использовать.

3. Вы имеете в виду, что хотите, чтобы все опции были встроены?

4. Я хочу создать выпадающее меню, которое появляется, когда пользователь наводит курсор мыши на элемент. Да, как подменю или что-то в этомроде. @MaheerAli

5. ` <div class=»выпадающий список»> <li class=»dropbtn»> Выпадающий список</li> <div class=»выпадающий контент»> <a href=»#»> Ссылка 1</a> <a href=»#»> Ссылка 2</a> <a href=»#»> Ссылка 3 </ a> </div> </div>` @zgood это то, что я пробовал. Что вы рекомендуете использовать вместо <шрифт>?

Ответ №1:

Полезно ли это:

 <!DOCTYPE html>
<html>

<style>
    * {
        box-sizing: border-box;
        font-family: sans-serif;
    }
    .symbol {
        font-family: Symbola;
    }
    #dropDown {
        position: relative;
        background-color: #DCCDCD;
        width: 115px;
        padding: 8px;
        border-radius: 8px;
    }
    #dropDownTitle {
        cursor: pointer;
    }
    #dropDownItems {
        position: absolute;
        width: 100%;
        background-color:#E5E2E2;
        left: 0;
        top: 100%;
        transition-duration: 0.5s;
    }
    #dropDownItems > div {
        padding: 12px;
        cursor: pointer;
    }
    #dropDownItems > div:hover {
        background-color: aliceblue;
    }
</style>
<body>
    <div id="dropDown">
        <div id="dropDownTitle">Click Here <span class="symbol">▼</span></div>
        <div id="dropDownItems" style="transform: translateY(-50%) scaleY(0)">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
        </div>
    </div>
    <script>
        var dropDownj = document.getElementById("dropDown");
        var dropDownTitlej = document.getElementById("dropDownTitle");
        var dropDownItemsj = document.getElementById("dropDownItems");
        dropDownTitlej.onclick = function() {
            if (dropDownItemsj.style.transform !== "translateY(-50%) scaleY(0)") {
                dropDownItemsj.style.transform = "translateY(-50%) scaleY(0)"
            } else {
                dropDownItemsj.style.transform = "translateY(0) scaleY(1)";
            }
        }
    </script>
</body>

</html>

ДЕМОНСТРАЦИЯ

Ответ №2:

Очевидно, вам нужно было бы оформить его, но это даст вам функциональность выпадающего списка.

 .dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


.dropdown:hover .dropdown-content {display: block;}  
 <nav id="nav">
<ul>
    <li class="current"><a href="index.html">Option1</a></li>
    <li><a href="park.html">Option2</a></li>
    <li class="dropdown"><p class="dropdown">ROLLDOWN</p>
    	<ul class="dropdown-content">
		    <li><a href="#">Link 1</a></li>
		  </div>
		 </li>
    <li><a href="szolgaltatasok.html">Option3</a></li>
    <li><a href="kapcsolat.html">Option4</a></li>
</ul>
</nav>