i want to make a drop down menu in my personal web site that has title which can be link to another page like "About me..." can link to web page with title of About me.
1 Answers
Drop-down menu can be achieved in two common methods one is to use custom CSS and javascript, and the other is using bootstrap which is relatively super simple.
add these files to your HTML head:
<!-- CSS only -->
<link href="HTTPS://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
and use these codes in your body :
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link /* use your own text */
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action/*Replace with your text*/</a></li>
<li><a class="dropdown-item" href="#">Another action /*Replace with your text*/ </a></li>
<li><a class="dropdown-item" href="#">Something else here /*Replace with your text*/ </a></li>
</ul>
</div>
replace all the '#' in tag with your webpage URL.
Related