多功能PC端頂部導航選單
<!DOCTYPE html>
自己做的導航欄
<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/common.js" ></script>
css: html,body,div,span,applet,object,iframe, h1,h2,h3,h4,h5,h6,p,blockquote,pre, a,abbr,acronym,address,big,cite,code, del,dfn,em,font,img,ins,kbd,q,s,samp, small,strike,strong,sub,sup,tt,var, b,u,i,center, dl,dt,dd,ol,ul,li, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0;padding:0; border:0;outline:0; vertical-align:baseline; background:transparent; -webkit-font-smoothing: antialiased; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
h1,h2,h3,h4,h5,h6{} ul,ol,li,menu{list-style:none;} a img{border:none;} img{ vertical-align:middle;} td p{margin:0;} fieldset{padding:0 1em 1em 1em; margin:1.6em 0;border:1px solid #ccc;} legend{padding-left:.8em; padding-right:.8em;} legend+*{margin-top:1em;} sub{ font-size:9px; line-height:0; vertical-align:sub;} sup{ font-size:9px; line-height:0; vertical-align:super;}
table{empty-cells:show;border-collapse:collapse;border-spacing:0} table,td,th{vertical-align: middle;} input,select{vertical-align:middle;} input,select,textarea{font-family: "Microsoft YaHei",tahoma,arial,verdana,sans-serif;font-size:14px;} img ,select, input, textarea { padding:0; outline: medium none; border:0 none; text-shadow: none; } input:disabled{ background-color: transparent; } select:hover{ outline: medium none; text-shadow: none; } textarea{resize:vertical;} input:focus{outline:0 none}
input[type="button"], input[type="date"], input[type="submit"], input[type="reset"], input[type="search"], select,textarea{ -webkit-appearance:none; border-radius:0; } ::-ms-clear, ::-ms-reveal{display: none;} input[type="text"]::-ms-clear{ display:none; }
::-webkit-input-placeholder{ color: #c5c5c5; } ::-moz-placeholder{ color: #c5c5c5; opacity: 1; } :-ms-input-placeholder{ color: #c5c5c5; } input.placeholder{ color: #c5c5c5; } a{cursor:pointer; text-decoration:none;color:#ffffff;} a:hover,a:active{/text-decoration:underline;/} a:visited{}
.clearfix:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;}
body{
position: relative;
width:100%;
min-width:1200px;
font:normal 14px/1.5 "Microsoft YaHei",tahoma,"Arial Unicode MS",Mingliu,Arial,Helvetica;
background-color: #FFF;
color: #ffffff;
}
.pageloading{ position:relative; left:0; top:0; z-index:999; width:100%; height:100%; background:#000; } * html .pageloading{ position:absolute;} .pageloading img{ position:absolute; left:50%; top:50%; margin:-25px 0 0 -25px; }
.hide{display:none;} .show{display:block;} .visihide{visibility: hidden;} .fl{float: left;} .fr{float: right;} .dib{display: inline-block;vertical-align: middle;} .position-rel{position: relative;} .txt-cut{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .txt-cut-para{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .absolute-center{ position:absolute; top:50%; left:50%; max-width:100%; max-height:100%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }
::-webkit-scrollbar{width: 8px; height: 8px;} ::-webkit-scrollbar-button{display:none;} ::-webkit-scrollbar-track{background-color:black;} ::-webkit-scrollbar-track-piece{background-color: #F5F5F5;} ::-webkit-scrollbar-thumb{margin-right:10px; background-color: #999;} ::-webkit-scrollbar-corner{background-color:#535353;} ::-webkit-scrollbar-resizer{background-color:#FF6E00;} .pageloading{ position:relative; left:0; top:0; z-index:999; width:100%; height:100%; background:rgba(21,193,147,.5); } * html .pageloading{ position:absolute;} .pageloading img{ position:absolute; left:50%; top:50%; margin:-25px 0 0 -25px; }
header{ position: relative; z-index: 11; display: block; // height:90px; // background-color: #15c193; } header:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;} header .fix-wrap{ position:fixed; z-index:999; top:0; left:0; width:100%; -webkit-transition: top .3s ease; -o-transition: top .3s ease; transition: top .3s ease; } header.active .fix-wrap{ top:-90px; }
header .head-black-bar{ height:30px; background-color:#ffffff; color:#FFF; color:#a8a8a8; } header .handlist{ position: absolute; right: 0; top: 0; line-height: 30px; box-sizing: border-box; /* overflow: hidden; */ } header .handlist li{ float:right; height: 100%; margin-right:20px; font-size: 12px; background:left center no-repeat; } header .handlist li a{ display:block; height:100%; color:#a8a8a8; } header .has-icon{ padding-left:30px; } header .handlist li.music{ width:30px;height:30px; background-image:url(../images/play.gif); cursor:pointer; } header .handlist li.music.off{background-image:url(../images/icon1.png);} header .handlist li.phone{ background-image:url(../images/icon2.png); } header .handlist li.send{ background-image:url(../images/icon3.png); } header .handlist li.login{ } header .handlist li.exit{ margin-right:58px; } header .handlist li.exit a{color:#ffffff;} header .handlist li.volunteers{background-image:url(../images/icon4.png);} header .nav-list{ position:relative; height: 60px; background-color:#15c193; }
.body-shade{ position: fixed; z-index: 998; width: 100%; height: 100%; top:0; left:0; } header .nav-list .search-wrap{ position:absolute; z-index: 999; top:0;right:0; height: 100%; width: 60px; overflow:hidden; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .page-detail header .nav-list .search-wrap{ display: none; } header .nav-list .search-wrap.unfold{ width: 310px; } header .nav-list .search-btn{ float: right; width:60px; height: 100%; cursor:pointer; background:rgba(255,255,255,.5) url(../images/search.png) center center no-repeat; }
header .search-wrap .input-wrap{ position: absolute; top:0; right:60px; padding:0 15px; width: 220px; height: 100%; line-height: 60px; background-color:rgba(255,255,255,.5); font-size: 0; }
header .search-wrap .input-wrap input{ display: block; width: 100%; height: 100%; font-size: 16px; vertical-align: middle; background-color: transparent; color:#FFF; } header .search-wrap .input-wrap input::-webkit-input-placeholder{ color: #FFF; } header .search-wrap .input-wrap input::-moz-placeholder{ color: #FFF; opacity: 1; } header .search-wrap .input-wrap input:-ms-input-placeholder{ color: #FFF; } header .nav-list .logo{ position:absolute; top:0px; left:0px; right:0px; bottom:0; width:200px; height:60px; background:url(../img/logo.png) left center no-repeat; background-size: 12rem; overflow: hidden; }
header .nav-wrap{ position: relative; margin:0 auto; width:1200px; height:100%; text-align: center; font-size: 0; } header .nav-wrap ul{ display: inline-block; margin:auto; height:100%;
} header .nav-wrap ul li{ position: relative; float:left; width:100px; height:60px; line-height:60px; font-size: 0; text-align: center; color:#ffffff; cursor:pointer; -webkit-transition: background .3s ease; -o-transition: background .3s ease; transition: background .3s ease; }
header .nav-wrap .nav-word{ display: inline-block; vertical-align: middle; width:100%; line-height: 1.4; font-size: 1.8rem; font-weight:600; } header .nav-wrap ul li>a{ display: table; text-align: center; width: 100%; height: 100%; color:#ffffff; overflow:hidden; } header .nav-wrap ul li a{ font-size: 14px; -webkit-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease; } header .nav-wrap ul li a:hover{ color:#15c193; font-size:1.6rem; } header .nav-wrap ul li.a-index{ padding-top:0; } header .nav-wrap ul li.active, header .nav-wrap ul li:hover{ background-color:rgba(255,255,255,.4); } header .nav-wrap ul li.active .nav-word, header .nav-wrap ul li:hover .nav-word{ color:#ffffff; font-weight:600; }
header .nav-wrap li .drop-down{ display: none; position: absolute; top:100%; left:0; width:220px; min-width:100%; text-indent: 40px; line-height: 50px; text-align: left; color:#FFF; background-color:rgba(21,193,147,.5);
} header .nav-wrap li .drop-down a{ display: block; color:#FFF; border-left: 2px solid transparent; } header .nav-wrap li .drop-down a:hover{ border-color:#15c193; }
<header class="header">
<div class="fix-wrap">
<div class="head-black-bar">
<ul class="handlist">
<li class="music">
<audio id="bgm" src="images/bgm.mp3" autoplay="autoplay"></audio>
</li>
<li><a href="#">免費註冊</a></li>
<li><a href="login.html">使用者登入</a></li>
<li class="phone has-icon"><a href="#">手機版</a></li>
</ul>
</div>
<div class="nav-list">
<div class="nav-wrap">
<ul>
<li style="width:200px;"><a class="logo" href="/index.html"></a></li>
<li class="a-index active">
<a target="_self" href="/index.html">
<span class="nav-word">首頁</span>
</a>
</li>
<li>
<a target="_self" href="/culturalCentre/index.html">
<span class="nav-word">文化動態</span>
</a>
</li>
<li>
<a target="_self" href="/article/notice.html">
<span class="nav-word">活動預約</span>
</a>
<div class="drop-down" style="display: none;">
<a target="_self" href="/article/notice.html">通知公告</a>
<a target="_self" href="/article/cultural-centre-dynamic.html">場館預訂</a>
<a target="_self" href="/article/industry.html">行業資訊</a>
</div>
</li>
<li>
<a target="_self" href="/article/notice.html">
<span class="nav-word">場館預訂</span>
</a>
<div class="drop-down" style="display: none;">
<a target="_self" href="/article/notice.html">通知公告</a>
<a target="_self" href="/article/cultural-centre-dynamic.html">場館預訂</a>
<a target="_self" href="/article/industry.html">行業資訊</a>
</div>
</li>
<li>
<a target="_self" href="/publicWelfare/index.html">
<span class="nav-word">非遺展廳</span>
</a>
<div class="drop-down" style="display: none;">
<a target="_self" href="/publicWelfare/index.html">公益性講座</a>
<a target="_self" href="/publicWelfare/exhibition.html">公益性展覽</a>
<a target="_self" href="/publicWelfare/train.html">公益性培訓</a>
<a target="_self" href="/publicWelfare/public-welfare-performance.html">公益性演出</a>
<a target="_self" href="/publicWelfare/salon.html">其他文化活動</a>
<a target="_self" href="/video/remoteCounseling.html">遠端輔導</a>
<a target="_blank" href="http://wh.sva.org.cn/">文化志願者</a>
</div>
</li>
<li>
<a target="_self" href="/brandActivity/index.html">
<span class="nav-word">文化專題</span>
</a>
</li>
<li>
<a target="_self" href="/virtualExhibition/index.html">
<span class="nav-word">志願服務</span>
</a>
<div class="drop-down" style="display: none;">
<a target="_self" href="/virtualExhibition/index.html">藝術展覽</a>
<a target="_self" href="/video/music.html">音樂欣賞</a>
<a target="_self" href="/video/dance.html">舞蹈欣賞</a>
<a target="_self" href="/video/drama.html">戲曲欣賞</a>
<a target="_self" href="/video/variety.html">綜藝欣賞</a>
</div>
</li>
<li>
<a target="_self" href="/product/dispatching.html">
<span class="nav-word">點單配送</span>
</a>
</li>
<li>
<a target="_self" href="/article/news.html">
<span class="nav-word">文化廣場</span>
</a>
<div class="drop-down" style="display: none;">
<a target="_self" href="/article/news.html">最新動態</a>
<a target="_self" href="/article/celebrity-articles.html">理論前沿</a>
<a target="_self" href="/article/policies-regulations.html">政策法規</a>
<a target="_self" href="/article/subject-seminar.html">專題研討</a>
<a target="_self" href="/magazine/index.html">館辦期刊</a>
</div>
</li>
</ul>
</div>
<form method="post" id="menuSearchForm" action="/search/index.html">
<div class="search-wrap">
<div class="search-btn" ></div>
<div class="input-wrap"><input type="text" name="keywords" placeholder="搜尋" autocomplete="off" onkeydown="keyevent" ></div>
</div>
</form>
</div>
<div class="g-page-close"></div>
</div>
</header>
<script>
function keyevent(event){
if(event.keyCode==13)
$('#menuSearchForm').submit();
}
</script>
相關文章
- 固定在頂部的導航選單
- flutter 自定義tab導航-頂部導航-底部導航Flutter
- PbootCMS導航選單-導航選單的使用教程boot
- TesterHome 首頁頂部的導航箭頭點選沒什麼效果
- CSS垂直導航選單CSS
- CSS 動態導航選單CSS
- 導航選單（動畫）--- jQuery動畫jQuery
- JavaScript 三級導航選單JavaScript
- JavaScript二級導航選單JavaScript
- Element-ui之導航選單UI
- JavaScript slide下拉導航選單效果JavaScriptIDE
- CSS導航欄及下拉選單CSS
- CSS多級導航選單效果CSS
- CSS垂直三級導航選單CSS
- uni-app動態修改頂部導航欄標題APP
- 簡單實現點選回到頂部
- jQuery三級導航選單詳解jQuery
- vue元件之路之menu導航選單Vue元件
- 純css製作導航下拉選單CSS
- (四)選單導航及路由設定路由
- 成品直播原始碼，頂部導航欄部分支援左右滑動原始碼
- PbootCMS導航選單標籤的小技巧boot
- BootstrapBlazor實戰 Menu 導航選單使用(2)bootBlazor
- BootstrapBlazor實戰 Menu 導航選單使用(1)bootBlazor
- CSS 可伸縮圓角導航選單CSS
- elementui NavMenu導航選單預設展開UI
- CSS學習案例（14）：下拉導航選單CSS
- jQuery 淡入淡出效果下拉導航選單jQuery
- 透明層滑動跟隨導航選單
- CSS三級下拉導航選單詳解CSS
- JavaScript橫向二級導航選單效果JavaScript
- CSS3麵包屑導航選單CSSS3
- JavaScript可摺疊屬性導航選單JavaScript
- JavaScript下拉摺疊導航選單講解JavaScript
- 純CSS打造淘寶導航選單欄CSS
- CSS3垂直摺疊導航選單CSSS3
- CSS水平導航選單製作詳解CSS
- CSS 水平導航選單製作詳解CSS
- CSS3橫向導航選單效果CSSS3