css導航條
阿新 • • 發佈：2018-11-19
效果：當瀏覽器縮小時，導航欄消失，顯示導航條
#pull { font-size: 20px; display: block; width: 100%; position: relative; color: #2166a9; background-color: #2166a9; } #pull:after { background:url('../img/nav-icon.png')no-repeat; width: 30px; content:""; width: 30px; height: 30px; display: inline-block; position: absolute; right: 5px; top: 17px; } .cssmenu { float: right; } .cssmenu ul { position:relative; top:30px; } .cssmenu > ul > li { display:inline-block; position: relative; font-weight:bold; margin-right: 40px; } .cssmenu > ul > li.active a{ color: #fff; } .cssmenu > ul > li img { vertical-align: middle; } .cssmenu > ul > li > a { font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif, sans-serif; text-transform: uppercase; display: block; font-size: 16px; color: #fff; line-height: 1.8em; padding: 14px 15px; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; letter-spacing: 0px; } .cssmenu > ul > li > a:hover { color: #2166s9; } .cssmenu > ul > li > ul { z-index: 999; opacity: 0; visibility: hidden; background: #5C5C5C; color:#fff; text-align: left; position: absolute; top: 55px; left: 50%; margin-top: 22px; margin-left: -90px; width: 180px; -webkit-transition: all .3s .1s; -moz-transition: all .3s .1s; -o-transition: all .3s .1s; transition: all .3s .1s; } .cssmenu > ul > li:hover > ul { opacity: 1; top: 65px; visibility: visible; } .cssmenu > ul ul > li { position: relative; } .cssmenu ul ul a { border-bottom: 1px solid rgb(34, 33, 33); text-transform: uppercase; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif, sans-serif; color: #ffffff; font-size: 14px; background: #000000; padding: 12px; display: block; -webkit-transition: 0.9s; -moz-transition: 0.9s; -o-transition: 0.9s; transition: 0.9s; } .cssmenu ul ul a:hover { background-color: #f0f0f0; } .cssmenu ul ul ul { visibility: hidden; opacity: 0; position: absolute; top: -16px; left: 206px; padding: 8px; background-color: #fafafa; text-align: left; width: 160px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .cssmenu ul ul > li:hover > ul { opacity: 1; left: 190px; visibility: visible; } .cssmenu ul ul a:hover { background: #FFFFFF; color: #000000; }
<div class="pull-icon"> <a id="pull"></a> </div> <div class="cssmenu"> <!-- 設定頭部導航欄 --> <ul> <li> <a href="index.jsp">首頁</a> </li> <li> <a href="about.jsp">企業簡介</a> </li> <li> <a href="newsFrontList.jsp">新聞</a> </li> <li> <a href="content.jsp">核心競爭力</a> </li> <li class="last"> <a href="contact.jsp">聯絡我們</a> </li> </ul> </div> <div class="clear"></div> <!--清除浮動-->
@media only screen and (max-width: 1920px) { .header{ padding:2% 12%; } } @media only screen and (max-width: 1680px) { .header{ padding:2% 8%; } } @media only screen and (max-width: 1440px) { .header{ padding:2% 2%; } } @media only screen and (max-width: 1366px) { .header{ padding:2% 2%; } .wrap{ width:85%; } #fwslider .title { margin-left: 8%; } #fwslider .description { margin-left: 8%; } .image_grid { width: 21.333%; } .grids_1_of_3 img{ max-width: 80%; } .w_72{ width:72%; } } @media only screen and (max-width: 1280px) { .header{ padding:2% 1%; } .wrap{ width:85%; } .cssmenu > ul > li > a { padding: 14px 16px; } .w_72{ width:72%; } } @media only screen and (min-width: 1024px) { .pull-icon{ display: none; } } @media only screen and (max-width: 1024px) { .wrap{ width:95%; } .cssmenu > ul > li > a { padding: 14px 10px; } .grids_1_of_3 img{ max-width:90%; } .show img{ max-width:100%; } .new-nav{ position: absolute; right: 0; width: 20%; height: 100%; overflow:hidden; z-index: 105; transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1); } .cssmenu { display: none; } .logo { text-align:left; position:relative; } .logo img{ max-width: 80%; } .pull-icon{ float: right; display: block; } .move-slide{ overflow: hidden; position: relative; animation: move-slide .5s 1 ease; -webkit-animation: move-slide .5s 1 ease; } .body-slide{ height: 100%; } .w_72{ width:100%; } .business{ width:97.8%; } .clearfix a { line-height: 60px; } } @media only screen and (max-width: 800px) { .wrap{ width:95%; } .cssmenu { float: none; text-align:center } .grids_1_of_3 img{ max-width:80%; } .show img{ max-width:100%; } .business{ width:70%; padding:1% 1%; background:#054688;color:#fff; font-weight:bold; } .images_1_of_3 { width: 40%; background:none; padding-left: 10%; text-align: left; padding-top:3%; } .w_72{ width:72%; } .clearfix a { line-height: 60px; } .new-nav{ position: absolute; width: 20%; } } @media only screen and (max-width: 640px){ .wrap{ width:95%; } .grid_1_of_3 { margin-left: 0%; } .main_bg{ background:url(../img/bg.png) repeat #2166a9; } .grids_1_of_3 img{ max-width:100%; padding:3% 0; } .w_72{ width:72%; } .images_1_of_3 { width: 40%; background:none; padding-left: 7%; text-align: left; } .logo img{ max-width:80%; } #pull:after { position: absolute; top: 14px; } .clearfix a { line-height: 50px; } .new-nav{ position: absolute; width: 30%; } } @media only screen and (max-width: 480px) { .wrap{ width:95%; } .business{ width:97%; } .main_bg{ background:#2166a9; } .pull-icon{ float: none; display: block; } .w_72{ width:100%; } .clearfix a { line-height: 40px; } .logo img{ max-width:65%; } #pull:after { position: absolute; top: 8px; } .new-nav{ position: absolute; width: 40%; } } @media only screen and (max-width: 320px) { .wrap{ width:95%; } .grids_1_of_3{ border:none; border-bottom:1px solid #2384e4; } .grids_1_of_3 img{ max-width:100%; } .clearfix a { line-height: 30px; } .logo img{ max-width:60%; } .new-nav{ position: absolute; width: 45%; } } @media only screen and (max-width: 280px) { } /* ------------------------------- 4. 媒體問題 Max Width 1300, Min Width 720 ------------------------------- */ @media only screen and (min-width:720px) and (max-width: 1300px) { #fwslider .title { font-size:26px; } } /* ------------------------------- 5. 媒體問題 Max Width 719 ------------------------------- */ @media only screen and (max-width:719px) { #fwslider .timers { display:none; } }