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 の実用的な価値を探る