Как мне сделать выпадающее меню в HTML? - PullRequest
Новая
       2

Как мне сделать выпадающее меню в HTML?

0 голосов
/ 28 марта 2019

предварительный просмотр веб-сайта У меня возникают проблемы при вставке раскручивающегося меню в панель навигации в 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>

Ответы [ 2 ]

1 голос
/ 30 марта 2019

Полезно ли: 

<!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>

DEMO

0 голосов
/ 28 марта 2019

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

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...