ハンバーガー メニュー html css javascript |ハンバーガーメニューコード

ハンバーガー メニュー html css javascript |ハンバーガーメニューコード

ハンバーガー メニューは、Navigation の標準アイコンになりました.最近では、ほとんどの主流のプラットフォームやアプリでさえ使用されるようになりました.
ハンバーガーに似ていることからこのように名付けられました.

ハンバーガー メニューを使用する理由
ハンバーガー メニューは、ウェブサイトのナビゲーションやコンテンツの整理をよりすっきりとすっきりさせます.また、デザイナーはハンバーガーメニューを長い間使用しており、それ自体が標準になっています.

ハンバーガーメニューの作り方:
ハンバーガー メニューを作成する方法は複数あります.
今日は、HTML、CSS、JavaScript を使ってハンバーガー メニューを作成します.
早速、早速始めましょう.

1.HTML コードの記述:

<nav class="navbar">  
  <div class="title">CWR</div>  
  <div class="ham" >  
  <span class="bar1"></span>  
  <span class="bar2"></span>  
  <span class="bar3"></span>  
  </div>  
  <ul class="nav-sub">  
   <li class="list-item"><a href="#" class="nav-link">Home</a></li>  
   <li class="list-item"><a href="#" class="nav-link">Blogs</a></li>  
   <li class="list-item"><a href="#" class="nav-link">About me</a></li>  
  </ul>  
 </nav>  

上のコード スニペットでは、ヘッダーのすべての要素を保持するクラス navbar でタグを宣言しました.わかりやすくするために、ヘッダーを 3 つの部分に分割してみましょう.
タイトル - サイト名を保持します.
Ham- ハンバーガー メニューの構成が含まれます.
ナビゲーションのリンクを持つ Nav-sub-.
今日は、ハンバーガー メニューの作成方法のみに焦点を当てます. HTML 部分では、div 要素 (ハンバーガー メニューを含む) と 3 つの span 要素 (それぞれがハンバーガー メニューのアイコン ラインを表す) を定義するだけです.

2.CSSを書く:
NavBar And The Title の CSS プロパティを定義することから始めましょう.

*{  
  margin:0;   
  color:white;  
 }  
 .title{  
  cursor:pointer;  
 }  
 /*Properties for Nav-bar*/  
 .navbar{  
  display:flex;  
  top:0;  
  height:10vh;  
  justify-content:space-between;  
  align-items:center;   
  padding:0px 20px;  
  background:grey;  
 }  

記事全文を読むには、当社のウェブサイトにアクセスしてください.ありがとうございます🙏💕
https://www.codewithrandom.com/2021/08/hamburger-menu-hamburger-menu-with.html