--- lang: ja-jp breaks: true --- # Blazor のテンプレートプロジェクトにサブメニューを追加する 2024-02-04 :::warning Bootstrapを使用した一階層までの簡易的なサブメニューです。 ::: ![image](https://hackmd.io/_uploads/B1wdfh3cT.png) ![image](https://hackmd.io/_uploads/Sk3Fz325a.png) ## プロジェクトテンプレート ![image](https://hackmd.io/_uploads/SJboZn2q6.png) ![image](https://hackmd.io/_uploads/SkehW32ca.png) ## Bootstrap の設定 * App.razor ```htmlembedded= <!DOCTYPE html> <html lang="ja"> <head> ・・・ <!-- Bootstrapのバージョンを上げる <link rel="stylesheet" href="bootstrap/bootstrap.min.css" /> --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> ・・・ <HeadOutlet /> </head> <body> ・・・ <!-- Bootstrapのバージョンを上げる <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> --> <script src="https://cdn.jsdelivr.net/npm/@@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"> </script> <script src="_framework/blazor.web.js"></script> </body> </html> ``` ## NavMenu.razor.js を追加する ```javascript= function onclick_nav( event ) { let navbar_toggle = document.querySelector('.navbar-toggler'); if (navbar_toggle == null) { return; } var doClose = true; let dropdown_toggles = document.querySelectorAll('.dropdown-toggle'); if (dropdown_toggles != null) { dropdown_toggles.forEach((dropdown_toggle) => { if (dropdown_toggle == event.target) { doClose = false; return; } }); } if (doClose == false) { return; } let dropdowns = document.querySelectorAll('.dropdown'); if (dropdowns != null) { dropdowns.forEach((dropdown) => { if (dropdown == event.target) { doClose = false; return; } }); } if (doClose == false) { return; } // クリックすると `dropdown-menu` が閉じてしまうのでチェック状態を反転する。 //navbar_toggle.click(); navbar_toggle.checked = !navbar_toggle.checked; } ``` ## NavMenu.razor.css に一部追加 * 以下を追加 ```css= ・・・ .dropdown-divider { border-color: #d7d7d7; border-width: 1px; border-style: solid; } .dropdown-menu.show { display: contents; } ``` ## NavMenu.razor ```htmlmixed <div class="top-row ps-3 navbar navbar-dark"> <div class="container-fluid"> <a class="navbar-brand" href="">BlazorMsDoc</a> </div> </div> <input type="checkbox" title="Navigation menu" class="navbar-toggler" /> <script src="/Components/Layout/NavMenu.razor.js"></script> <!-- `onclick` の処理を `onclick_nav(event)` に変更する。 --> <div class="nav-scrollable" onclick="onclick_nav(event)"> <nav class="flex-column"> ・・・ <div class="nav-item px-3"> <hr class="dropdown-divider"> </div> <div class="nav-item px-3 dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false"> <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Fundamentals </a> <div class="dropdown-menu"> <div class="nav-item px-3"> <NavLink class="nav-link dropdown-item" href="Fundamentals/StaticFilesExample"> <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Static Files </NavLink> </div> </div> </div> <div class="nav-item px-3 dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false"> <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Components </a> <div class="dropdown-menu"> <div class="nav-item px-3"> <NavLink class="nav-link dropdown-item" href="Components/SynchronizationContextExample"> <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Synchronization Context </NavLink> </div> <div class="nav-item px-3"> <NavLink class="nav-link dropdown-item" href="components/OverwritingParameters"> <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Overwriting Parameters </NavLink> </div> <div class="nav-item px-3"> <NavLink class="nav-link dropdown-item" href="Components/EventHandlingExample"> <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Event Handling </NavLink> </div> <div class="nav-item px-3"> <NavLink class="nav-link dropdown-item" href="Components/DataBindingExample"> <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Data Binding </NavLink> </div> <div class="nav-item px-3"> <NavLink class="nav-link dropdown-item" href="Components/LifecycleExample"> <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Lifecycle </NavLink> </div> </div> </div> </nav> </div> ``` ###### tags: `Blazor` `テンプレート` `サブメニュー` `Bootstrap`