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へのデータの同期方法を実現します

推薦する

Dockerコンテナの状態変換の実装

Dockerコンテナの状態遷移図2度目の実戦 [root@localhost ~]# docker ...

Docker 実行時にユーザーとグループを管理する方法

Docker はプロセスを中核としてシステムリソースを分離する管理ツールです。分離は、オペレーティン...

一般的なブラウザ互換性の問題(概要)

ブラウザの互換性とは、スタイルの互換性 (CSS)、インタラクションの互換性 (JavaScript...

シンプルなショッピングフォームを実装するJavaScript

この記事では、簡単なショッピングフォームを実装するためのJavaScriptの具体的なコードを参考ま...

HTML の大なり、小なり、スペース、引用符などでよく使用されるエスケープ コードのリスト。

表は以下のとおりです。 HTMLソースコード結果を表示説明する&lt; <未満記号また...

MySQL Community Server 圧縮パッケージのインストールと設定方法

今日は、MySQL をインストールしたかったので、公式 Web サイトにアクセスして、MySQL の...

CSS の overflow: hidden の使い方 (オーバーフローの非表示とフロートのクリア)

オーバーフロー非表示指定された高さを超えるテキストや画像情報を非表示にすることを意味します。 <...

Webデザインチュートリアル(8):Webページの階層と空間デザイン

<br />前回の記事:Webデザイン講座(7):Webページ制作の効率化1:必要な小言...

ウェブページのコメントにより IE でテキストがオーバーフローする

実験コードは次のとおりです。 </head> <body> <div ...

WebpackはCSSファイルを読み込み、その設定方法

webpackはCSSファイルとその設定をロードします複数の CSS ファイルを作成した後、HTML...

Linux環境でIPV6接続をサポートするようにmysql5.6を設定する方法

導入:この記事では主に、Linux システムで IPV6 接続をサポートするように MySQL を構...

mysql 実行プラン ID が空である (UNION キーワード) の詳細な説明

導入作業プロセス中に、遅いクエリが調整されることがあります。 MySQL SQL ステートメントのチ...

HTML5+CSS3 ヘッダー作成例と更新

前回、私たちは 2 つのヘッダー レイアウト (フレックスボックス 1 つとフロート 1 つ) を考...

MySQL 8.0.17 のインストールと使用方法のチュートリアル図

前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...

いくつかの面接の質問を使ってJavaScriptの実行メカニズムを調べる

目次前の単語同期と非同期前菜プレートを追加マクロタスク マイクロタスク約束しましょうタイマーを追加す...