Author : MD TAREQ HASSAN | Updated : 2021/06/25
Courtesy
- StackOverflow answer: https://stackoverflow.com/a/27033567/4802664
Create Menu
https://getbootstrap.com/docs/4.5/components/navbar/#toggler
Code
- Blazor WebAssembly takes some time to load and render component
- If the target DOM element is dynamically rendered i.e. Nav is a seperate componet that ie being used in
Index.razorpage, then- jQuery document ready
$()function would not work to hook event for target nav menu (to automatically expand) - A small (500 ms) delay will be added to overcome that
- jQuery document ready
<script>
$(function () {
console.log("initialized");
setTimeout(function () {
$('.dropdown').mouseenter(function () {
console.log("on mouseenter");
if (!$('.navbar-toggle').is(':visible')) { // disable for mobile view
if (!$(this).hasClass('open')) { // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
}
}
});
}, 500);
});
</script>
Index html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorUIApp</title>
<base href="/" />
<link href="manifest.json" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">
</head>
<body>
<app>Loading...</app>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<script>
$(function () {
console.log("initialized");
setTimeout(function () {
$('.dropdown').mouseenter(function () {
console.log("on mouseenter");
if (!$('.navbar-toggle').is(':visible')) { // disable for mobile view
if (!$(this).hasClass('open')) { // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
}
}
});
}, 500);
});
</script>
</body>
</html>