スポンサーリンク

Blazor Server でサイドバーをハンバーガーメニューにする

.NET CoreBlazor Server 5.0C#CSSVisual Studio 2019

Blazor Server でサイドバーをハンバーガーメニューにした。
サイドメニューはこの方式が一番使い勝手が良いと思う。
ソースコードはGitHubで公開しています。

ソースコード構成

ソースコード変更内容を解説

Shared/MainLayout.razor

・headerの<div>、<NavMenu>、main-contentの<div>を分離することで、上部はヘッダーのみ表示し、下部はページのみ表示している。

Shared/NavMenu.razor

・if (HamburgerMenuChecked) でハンバーガーメニューのチェック状態を切り替えている。
・<label for=”openSidebarMenu” がハンバーガーメニュー。
・<div id=”sidebarMenu” が、 ハンバーガーメニューのチェック状態に合わせて表示されるサイドバー。
・styleの変更で、各メニューの表示/非表示を切り替えている。

wwwroot/css/site.css

・ヘッダー、ハンバーガーメニューで使用する要素を追加している。

Visual Studio プロジェクト

今回使った Visual Studio プロジェクト テンプレートは、Blazor Server 5.0 の認証無し、HTTPS無しです。

コメント

タイトルとURLをコピーしました