HTML imitation Baidu Encyclopedia navigation drop-down menu function

Time:2019-9-8

HTML imitates Baidu Encyclopedia navigation drop-down menu function, the specific code is as follows:

Figure 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html+CSS navigation drop-down menu imitating Baidu Encyclopedia </title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
 <div class="top-bar">
  Head content
 </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=""> Home page</a></span>
      </li>
      <li class="cat">
       <span> <a href=""> Classification</a></span>
       <ul>
        <li> <a href="">Nature</a></li>
        <li> <a href="">Culture</a></li>
        <li> <a href="">Geography</a></li>
        <li> <a href=""> History</a></li>
        <li> <a href="">Life</a></li>
        <li> <a href="">Society</a></li>
        <li> <a href="">Art</a></li>
        <li> <a href=""> Persons</a></li>
        <li> <a href="">Economy</a></li>
        <li> <a href="">Science and Technology</a></li>
        <li> <a href="">Sports</a></li>
       </ul>
      </li>
      <li class="special ">
       <span> <a href= "javascript: void (0)">Encyclopedia Features</a></span>
       <ul>
        <li> <a href="">Today in History</a></li>
        <li> <a href="">Digital Museum</a></li>
        <li> <a href="">City Encyclopedia</a></li>
        <li> <a href="">Encyclopedia of Colleges and Universities</a></li>
        <li> <a href="">Art Encyclopedia</a></li>
        <li> <a href="">Encyclopedia of Science</a></li>
       </ul>
      </li>
      <li class="user">
       <span> <a href= "javascript: void (0)">User</a></span>
       <ul>
        <li> <a href="#">Tadpole Cluster</a></li>
        <li> <a href="">Dream Burning Plan</a></li>
        <li> <a href="">Encyclopedia Task</a></li>
        <li> <a href="">Encyclopedia Mall</a></li>
       </ul>
      </li>
      <li class="cooperation">
       <span> <a href= "javascript: void (0)">authoritative cooperation</a></span>
       <ul>
        <li> <a href=""> Cooperation Model</a></li>
        <li> <a href=""> FAQ</a></li>
        <li> <a href=""> contact information</a></li>
       </ul>
      </li>
      <li class="mobile">
       <span> <a href= "javascript: void (0)">Mobile Encyclopedia</a></span>
       <ul>
        <li> <a href="">Client</a></li>
        <li> <a href=""> webpage version</a></li>
       </ul>
      </li>
     </ul>
    </div>
   </div>
  </div>
 </div>
</div>
</body>
</html>

style


body{margin:0;padding:0;font-family:arial,tahoma,'Microsoft Yahei','b8bf53',sans-serif;;}
 
.top-bar{background-color:#f3f3f3;text-align:center;padding:2.5em;}
a{padding-bottom:3px;color:white;text-decoration:none;}
ul{list-style:none;padding:0;margin:0;}
li{text-align:center;}
 
.nav-bar{position:relative;z-index:1000;overflow:hidden;min-width:900px;height:45px;}
.nav-bar:hover{overflow:visible;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;}
.nav-bg{position:absolute;width:100%;height:272px;background:#24619c;background:rgba(36,97,158,.95);-webkit-transition:.3s;transition:.3s;z-index:9999;}
.nav-top{height:43px;border-top:1px solid #5895d5;border-bottom:1px solid #3b92e9;background:#459df5;}
.nav-content{position:absolute;width:80%;left:10%;}
.nav-content-box{position:absolute;top:0;left:0;width: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{height: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{width:49%;}
ul.nav-content-box>li>ul>li>a{display:block;width:100%;}

summary

Above is the HTML drop-down menu function of Baidu Encyclopedia navigation introduced by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave me a message, Xiaobian will reply to you in time. Thank you very much for your support to developpaer.
If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!

Recommended Today

Write a package for parsing abnormal JSON strings – fbbk-json

F [beep] [beep] K JSON Parse a package of abnormal JSON strings. install $ npm install fbbk-json Use This package has only one function: var fJSON = require(“fbbk-json”); fJSON.parse(A_JSON_STRING); however This package supports the following JSON strings (that is, what we usually declare in javascript, without quotation marks). Raise a chestnut. ‘{foo”:”bar”,”baz”: true} < – […]