HTMLはBaidu百科事典のナビゲーションドロップダウンメニュー機能を模倣します

HTMLはBaidu百科事典のナビゲーションドロップダウンメニュー機能を模倣します

HTML は、Baidu 百科事典のナビゲーション ドロップダウン メニュー機能を模倣します。具体的なコードは次のとおりです。

デモ図1 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>html+CSS で Baidu 百科事典のナビゲーション ドロップダウン メニューを模倣</title>
<link href="css/style.css" rel="スタイルシート" type="text/css" />
</head>
<本文>
<div class="header">
 <div class="トップバー">
  ヘッダーコンテンツ</div>
 <div class="nav-bar">
  <div class="nav-bg">
   <div class="nav-top">
    <div class="nav-content">
     <ul class="nav-content-box">
      <li class="index on">
       <span><a href="#">ホーム</a></span>
      </li>
      <li class="cat">
       <span><a href="#">カテゴリー</a></span>
       <ul>
        <li><a href="#">自然</a></li>
        <li><a href="#">文化</a></li>
        <li><a href="#">地理</a></li>
        <li><a href="#">歴史</a></li>
        <li><a href="#">人生</a></li>
        <li><a href="#">社会</a></li>
        <li><a href="#">アート</a></li>
        <li><a href="#">キャラクター</a></li>
        <li><a href="#">経済</a></li>
        <li><a href="#">テクノロジー</a></li>
        <li><a href="#">スポーツ</a></li>
       </ul>
      </li>
      <li class="special">
       <span><a href="javascript:void(0)">注目の百科事典</a></span>
       <ul>
        <li><a href="#">今日の歴史</a></li>
        <li><a href="#">デジタル ミュージアム</a></li>
        <li><a href="#">都市百科事典</a></li>
        <li><a href="#">大学百科事典</a></li>
        <li><a href="#">アート百科事典</a></li>
        <li><a href="#">科学百科事典</a></li>
       </ul>
      </li>
      <li class="ユーザー">
       <span><a href="javascript:void(0)">ユーザー</a></span>
       <ul>
        <li><a href="#">タッドポールグループ</a></li>
        <li><a href="#">ドリームプラン</a></li>
        <li><a href="#">百科事典タスク</a></li>
        <li><a href="#">ウィキペディアモール</a></li>
       </ul>
      </li>
      <li class="協力">
       <span><a href="javascript:void(0)">権威ある協力</a></span>
       <ul>
        <li><a href="#">協力モード</a></li>
        <li><a href="#">よくある質問</a></li>
        <li><a href="#">連絡先情報</a></li>
       </ul>
      </li>
      <li class="mobile">
       <span><a href="javascript:void(0)">モバイル百科事典</a></span>
       <ul>
        <li><a href="#">クライアント</a></li>
        <li><a href="#">ウェブバージョン</a></li>
       </ul>
      </li>
     </ul>
    </div>
   </div>
  </div>
 </div>
</div>
</本文>
</html>

スタイル

本文{マージン:0;パディング:0;フォントファミリ:arial,tahoma,'Microsoft Yahei','\5b8b\4f53',sans-serif;;}
 
.top-bar{背景色:#f3f3f3;テキスト配置:center;パディング:2.5em;}
a{padding-bottom:3px;color:white;text-decoration:none;}
ul{リストスタイル:なし;パディング:0;マージン:0;}
li{テキスト配置:center;}
 
.nav-bar{位置:相対;z-index:1000;オーバーフロー:非表示;最小幅:900px;高さ:45px;}
.nav-bar:hover{overflow:visible;-webkit-transition:all 0.5s easy;transition:all 0.5s easy;}
.nav-bg{位置:絶対;幅:100%;高さ:272px;背景:#24619c;背景:rgba(36,97,158,.95);-webkit-transition:.3s;遷移:.3s;z-index:9999;}
.nav-top{高さ:43px;上部境界線:1px 実線 #5895d5;下部境界線:1px 実線 #3b92e9;背景:#459df5;}
.nav-content{位置:絶対;幅:80%;左:10%;}
.nav-content-box{位置:絶対;上:0;左:0;幅:100%;}
.nav-content-box>li{float:left;line-height:43px;}
.nav-content-box>li:hover{background:#19508b;}
.nav-content-box>li>span>a{display:block;width:100%;margin:0;height:41px;line-height:41px;}
.nav-content-box>li:hover>span>a{background:#338ce6;}
ul>li.index、ul>li.cat、ul>li.special、ul>li.user、ul>li.cooperation、ul>li.mobile{width:120px;}
ul>li.index{高さ:43px;}
ul.nav-content-box>li>ul{border-right:solid 1px #3a6fa2;margin:10px 0 6px}
ul.nav-content-box>li>ul:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
.nav-content-box>li:hover>ul{border-right:none;padding-right:1px;}
ul.nav-content-box>li>ul>li{float:left;width:100%;line-height:2;text-align:center;}
ul.nav-content-box>li.cat>ul>li{幅:49%;}
ul.nav-content-box>li>ul>li>a{display:block;width:100%;}

要約する

上記は、編集者が紹介したHTML模倣Baidu百科事典ナビゲーションドロップダウンメニュー機能です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。編集者がすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  hrefパラメータ転送における中国語の文字化けについて

>>:  CSS プロパティ *-gradient の実用的な価値を探る

推薦する

JS ES6における構造化分解についてお話しましょう

概要es6 では、配列またはオブジェクトから指定された要素を取得する新しい方法が追加されました。これ...

vue プロジェクトのデプロイと Nginx でのプロキシ設定の問題の分析

1. nginxをインストールして起動する # nginxをインストールする sudo apt-ge...

MySQLがbinlogファイルを手動で登録し、マスタースレーブ異常を引き起こす理由

1. 問題の原因友人の @水米田 から、POSITION に基づくマスタースレーブについて質問があり...

設定操作からMySQLへのNULLが見つからない問題を解決する

興味深い発見:合計 1000 件のレコードを含むテーブルがあります。クエリ ステートメントは次のよう...

リンクをクリックしたときに表示される点線のボックスを削除するいくつかの方法

削除する方法はいくつかあります:リンクを直接追加するonfocus="this.blur(...

Alibaba Cloud Docker Yum ソースを使用した Docker 17.03.2 の CentOS7 オンラインインストールの詳細説明

参照ドキュメント公式 Docker インストール ドキュメント: https://docs.dock...

Web デザインのための 5 つのシンプルな XHTML Web フォーム

Web デザイン 5 におけるシンプルな XHTML Web フォーム。 テクニック 1: ラベル ...

2 つのテーブル コピー ステートメントの詳細な説明: SELECT INTO と INSERT INTO SELECT (SQL データベースと Oracle データベースの違い)

1. INSERT INTO SELECT文ステートメントの形式は次のとおりです: Insert ...

MySQL 8.0.15 のインストールと設定方法のグラフィックチュートリアル (Win10 Home バージョン 64)

超初心者の私は、MySQL を学び始めたばかりで、インストール プロセス中に多くの問題に遭遇しました...

オンデマンドで Vue コンポーネントを自動的にインポートする方法

目次グローバル登録部分登録ローカル自動登録さまざまなソリューションの比較コンポーネント名について参照...

Linux での MySQL 5.7.18 yum のアンインストールからインストールまでのプロセスの図

いろいろ苦労しましたが、やっと yum インストールの手順がわかりました。以前、バイナリ パッケージ...

Nginx SSL証明書設定エラーの解決策

1. はじめにWeb プロジェクトを Linux サーバーで公開する場合、SSL 証明書を構成する必...

LeetCode の SQL 実装 (182. 重複するメールボックス)

[LeetCode] 182.重複メールPerson という名前のテーブル内のすべての重複メールを...

mysql5.7でbinlogを使用してデータを復元する方法

ステップ1: MySQLでbinlogが有効になっていることを確認する '%log_bin%...

ログインフォームを実装するためのJavaScript

この記事の例では、ログインフォームを実装するためのJavaScriptの具体的なコードを参考までに共...