4
Replies
4
4
Replies
LEGEND
,
I would like to create a dropdown menu from a nav bar, which is only displayed when I hover above the given text.
By Soundsbetteroutside
Hover is not much use as it wont work on mobile devices:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NAV</title>
<style>
.hidden {
display: none;
}
li {
cursor: pointer;
}
li:hover .hidden {
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li>Link 1</li>
<li>Link 2
<ul class="hidden">
<li >2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>Link 3
<ul class="hidden">
<li >3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Community Expert
,
Forget this notion about HOVER events. It's not user-friendly. How are people on touch screen devices supposed to interact with your drop-down menus when they don't have a MOUSE?
A site without usable menus is a waste of everyone's time. You need to set-up navigation that ALL users on ALL devices can access. I use Bootstrap because it saves a lot of production time and it works well on all devices. See working example below.
CODE:
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.1.3 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Minified Bootstrap 5 CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--Bootstrap Icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
<!--latest minified Bootstrap JS bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
<!--My Styles-->
<style>
.navbar a {font-size: 1.35rem}
</style>
</head>
<body class="d-flex flex-column min-vh-100">
<!--Begin Navbar-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img class="rounded-circle" src="https://dummyimage.com/125x125&text=Brand/Logo" alt="Brand/logo"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-house"></i> Home</a>
</li>
<!--Begin Dropmenu-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"><i class="bi bi-gear"></i> Dropmenu</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Link</a>
</li>
<li>
<a class="dropdown-item" href="#">Another link</a>
</li>
<li>
<a class="dropdown-item" href="#">A third link</a>
</li>
</ul>
</li>
<!--end dropmenu-->
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-film"></i> Video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-instagram"></i> Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-facebook"></i> Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="bi bi-envelope"></i> Contact</a>
</li>
</ul>
</div>
</div>
</nav><!--/Navbar-->
</body>
</html>
Hope that helps.
AdChoices