HTML、CSS、JavaScriptを使用してモバイルメニューバーを作成する方法

間違いなく、TailWindやBootStrapなどのCSSフレームワークを使用して、切り替え可能なモバイルメニューを作成できます。

しかし、その背後にある概念は何ですか？そして、これらのCSSフレームワークに依存せずに、どのようにしてゼロから作成できますか？

上記を自分で行うと、完全なカスタマイズ制御が可能になります。ですから、これ以上面倒なことはせずに、好みのプログラミング言語を使用して切り替え可能なモバイルメニューを作成する方法を説明します。

まだ行っていない場合は、プロジェクトフォルダーを開き、プロジェクトファイル（HTML、CSS、およびJavaScript）を作成します。

以下に、3つのタイプすべてに必要なコードの例を示します。まだダウンロードしていない場合は、ダウンロードを検討してくださいコードを学ぶためのこれらのアプリ読む前に。

まずは HTML：

  
  
  
 Mobile Navigation Menu  
  
  
  
     
  
  
  
  
  
     
  
  Home   
  About   
  Contact

CSS：

/*This section demarcation is solely for the purpose of the tutorial*/  
 section{  
 width: 800px;  
 height: 600px;  
 margin-top: 50px;  
 margin-left: 250px;  
 border: solid black 1px;  
 background: #e6e3dc;  
 }  
  /*position the divs container in your DOM*/   
 #toggle-container{  
 display: grid;  
 width: fit-content;  
 margin-left: 720px;  
 margin-top: 10px;  
 }  
  /*Stack the three divs above each other. Then set a height and width for them.*/   
 #one, #two, #three{  
 background: black;  
 width: 30px;  
 height: 3px;  
 margin-top: 5px;  
 }  
 .toggle-content{  
 display: none;  
 margin-left: 700px;  
 margin-top: 20px;  
 }  
 .toggle-content a{  
 display: block;  
 text-decoration: none;  
 color: black;  
 font-size: 30px;  
 }  
 .toggle-content a:hover{  
 color: blue;  
 }  
  /*Display the class instance created by JavaScript in block*/   
 .displayed{  
 display: block;  
 }

JavaScriptを追加します。

ホームグループウィンドウを削除する方法10

var toggler = document.getElementById('toggle-container');  
var toggleContents = document.getElementById('toggle-content');  
document.addEventListener('click', function(){  
  //Apply a class intance to each navigation and set display to toggle:   
 toggleContents.classList.toggle('displayed');  
});

メニューバーをクリックすると、実際の出力は次のようになります。

メニューは切り替え可能であるため、バーをもう一度クリックするか、ページ内の任意の場所でクリックすると、ナビゲーションが非表示になります。

関連している： CSSの背景のグラデーションでウェブサイトの要素をスタイルする

Webページ内の任意の場所をクリックしたときに、ブラウザがコンテンツの非表示をサポートしていない場合があります。イベントターゲットとJavaScriptループを使用して、これを強制することができます。これを行うには、JavaScriptに次のコードブロックを追加します。

  //Add a click event to your webpage:   
window.onclick = function(event) {  
  //Target the click event on the menu bar to allow the webpage body to track it:   
 if (!event.target.matches('#toggle-container')) {  
 var dropdowns = document.getElementsByClassName('toggle-content');  
  //Hide the navigations by looping through each of them:   
 for (var i = 0; i  var dropped = dropdowns[i];  
 if (dropped.classList.contains('display')) {  
 dropped.classList.remove('display');  
 }  
 }  
 }  
}

これがあなたが今したことの要約です：あなたはを使って3行を作成しました div HTMLのタグ。それらの高さと幅を調整し、DOMに配置しました。次に、JavaScriptを使用してこれらにクリックイベントを与えました。

関連している：ウェブサイトの作り方：初心者向け

ナビゲーションの初期表示をに設定しますなしページの読み込み時にそれらを非表示にします。そうして クリック 3行のイベントは、JavaScriptでインスタンス化されたクラスに基づいてこれらのナビゲーションを切り替えます（表示）。最後に、この新しいクラスを使用して、CSSとJavaScriptを使用してナビゲーションを表示しました。 トグルコンテンツ 方法。

関連：HTML、CSS、JavaScriptのニューモーフィックデザイントレンド

ただし、CSSの残りの部分は、好みによって異なります。ただし、ここにあるCSSスニペットの例にあるものは、スタイルを設定する方法のアイデアを提供するはずです。

あなたのウェブサイトを構築するときにもっと創造的になる

視覚的に魅力的なウェブサイトを作成するには、ある程度の創造性が必要です。そして、ユーザーフレンドリーなウェブサイトは、当たり障りのないものよりもあなたの聴衆を変える可能性が高いです。

ここではカスタムナビゲーションメニューを作成する方法を示しましたが、それでもこれを超えて、より魅力的なものにすることができます。たとえば、ナビゲーションの表示をアニメーション化したり、背景色を付けたりすることができます。そして、あなたが何をするにしても、あなたのウェブサイトがユーザーが使いやすい最高のデザインプラクティスとレイアウトを使用していることを確認してください。

共有共有つぶやき Eメール 知っておくべき15のWindowsコマンドプロンプト（CMD）コマンド

コマンドプロンプトは依然として強力なWindowsツールです。これは、すべてのWindowsユーザーが知っておく必要のある最も便利なCMDコマンドです。

次を読む 関連トピック

プログラミング
HTML
CSS
JavaScript
コーディングのヒント

著者について イディソウオミソラ（94件の記事が公開されました）

Idowuは、スマートな技術と生産性に情熱を注いでいます。暇なときは、コーディングで遊んだり、退屈したときにチェス盤に切り替えたりしますが、たまに日常から離れることも大好きです。人々に現代の技術の道を示すことへの彼の情熱は、彼がもっと書くように動機づけます。

IdowuOmisolaのその他の記事

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください