Javascriptでシンプルなナビゲーションバーを実装

Javascriptでシンプルなナビゲーションバーを実装

この記事では、参考までに、シンプルなナビゲーションバーを実装するためのJavascriptの具体的なコードを紹介します。具体的な内容は次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ナビゲーション</title>
</head>
<スタイル>
        ボタン{
              幅:80ピクセル;
              高さ:25px;
              境界線:なし;
        }
          #b1{
             背景画像: url('1.png');
             右マージン:0px;
           
          }
          #b2{
             背景画像: url('1.png');
             幅:380ピクセル;
             高さ:25px;
             テキスト配置: 左;

          }
         #b1:ホバー{
            背景画像: url('2.png');   
         }
         #b2:ホバー{
            背景画像: url('2.png');   
         }
        
</スタイル>

<本文>
    <div style="width: 800px;margin:0px auto">
        
    
    <div>
            <img src="1.jpg" 幅="100%" 高さ="150px%">
    </div>
    <div>
            <div style="font-size: 1px">
                    <button type="button" id="b1">ホームページ</button>
                    <button type="button" id="b1">ウェブサイトニュース</button>
                    <button type="button" id="b1">ウェブサイトの楽しみ</button>
                    <button type="button" id="b1">ウェブサイトフォーラム</button>
                    <button type="button" id="b1">ウェブサイトの紹介</button> 
                    <button type="button" id="b2">人材を募集する</button>
                    
            </div>
              
             
    </div>
     </div>
</本文>
</html>

効果画像:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSはナビゲーションバーのホバー効果を実装します
  • JavaScript は、マウスクリックによるナビゲーションバーの色変更効果を実装します。
  • Fullpage.js 固定ナビゲーション バー - ナビゲーション バーの配置の実装
  • スライドナビゲーションバー効果を実現するJavaScript
  • JSは指定された位置までスクロールし、ナビゲーションバーは上部に固定されます
  • js ナビゲーション バー クリック イベント 背景変更 サンプル コード
  • クールなナビゲーションバーの js+css 実装を段階的に記述する方法を説明します
  • ナビゲーション バーのホバー効果を実現する JS (続き)
  • JavaScript NodeTree ナビゲーションバー (メニュー項目 JSON 型/自作)
  • ネイティブ JS で MUI ナビゲーション バーの透明なグラデーション効果を実現

<<:  Mysql Workbench クエリ mysql データベース メソッド

>>:  KTLツールはMySQLからMySQLへのデータの同期方法を実現します

推薦する

デカルト積原理を使用してMySQLで複数のテーブルをクエリする方法を簡単に説明します。

MySQL マルチテーブルクエリ (直積原理)まず、データが使用するテーブルを決定します。デカルト...

JavaScript における clientWidth、offsetWidth、scrollWidth の違い

1. コンセプトこれらはすべて Element の属性であり、要素の幅を示します。 Element....

VMware マルチノード環境を構成する方法

このチュートリアルでは CentOS 7 64 ビットを使用します。各仮想マシンに 2GB のメモリ...

Linux での fuser コマンドの使用法の詳細な説明

説明する: fuser は、現在ディスク上のファイル、マウント ポイント、さらにはネットワーク ポー...

MySQLでレコードを変更する場合、更新操作フィールド = フィールド + 文字列

シナリオによっては、varchar 型のフィールドを変更する必要があり、変更の結果は 2 つのフィー...

Podmanはコンテナを自動的に起動し、Dockerと比較します

目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...

Reactは二次連結(左右連結)を実現する

この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...

Linux に MySQL をインストールする方法 (yum とソース コードのコンパイル)

Linux に MySQL をインストールするには、yum インストールとソース コード コンパイ...

React は入力値を取得し、2 つのメソッドの例を送信します

方法1: DOMが提供するイベントオブジェクトのターゲットイベント属性を使用して値を取得し、送信する...

MySQL テーブル全体の暗号化ソリューション keyring_file の詳細な説明

例示するMySql Community Edition は、5.7.11 以降、テーブルベースのデー...

コネクタコンポーネントから Tomcat のスレッドモデルを見る - BIO モード (推奨)

Tomcat の上位バージョンでは、デフォルト モードは NIO モードを使用することになります。...

SQL 実装 LeetCode (185. 部門内で最も給与の高い上位 3 名)

[LeetCode] 185. 部門別給与上位3位従業員テーブルにはすべての従業員が保持されます。...

CSS を使用して複数列の等高レイアウトを設定する方法の例

最初は、複数の列のコンテンツのサイズと高さが異なります。ここで、表示する背景を異なるものに設定し、各...

Docker が elasticsearch を起動するときのメモリ不足の問題と解決策

質問Docker が elasticsearch をインストールして起動するときにメモリが不足するシ...

Vueはタブ切り替えの虫眼鏡効果を実装します

この記事では、タブ切り替えの虫眼鏡効果を実現するためのVueの具体的なコードを例として紹介します。具...