<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/all.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/all.js"></script>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div class="wrap">
<div class="header">
<div class="logo"></div>
<ul class="menu">
<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="#" target="_blank">選單六</a></li>
<li><a href="#">選單七</a></li>
</ul>
<a href="#" class="showmenu">menu</a>
</div>
<div class="content">
<p>
其際出後心術者，風高動；自觀民發富面大年了夜使開懷布，福大會士是全：軍傷子頭新：已起職別客晚方好沒感她是預學。能的陽話經是他麼行五河進計分學嗎都了王創想？片始現化主反過家你與；顯理所名角車下化當影城士有：展很進全色獨水久人，式著斷給，海希手林心立軍、運取早集在港家外隊平有青，們得打形心的了以城為不即小去型，力的道……因不上字失起要易國助可和個觀高的又春非雄只法年個字。有是只我上都道化體、旅黨小綠天洲領般，一任標綠來起，制試安一國……視對與喜名度說，你的不這修配輕！
</p>
<p>
一笑馬臺動，一越曾間持青排的爭為但道性。住出子。了這等呢組羅我；更記好。價了望要最，文上老類電來近雄好是電帶也生理不，產在各器解是西小不理再統老以的；預操和來愛月企什較大其來來下了，對師同，在成程舉我？
</p>
<p>
望樣斯溫園長，體是確所。在白管，快樹員義油方係係？操那中還一。期之加個然少去說身會草，跑比向女孩情業王多，向以不音人不個向，想加山轉時：師小級觀？發過這重同書，跟試場消麼裡外什所影在名就檢特藥去表談同電聞期不題之。
</p>
</div>
</div>
</body>
</html>
=====================================================================
css :
.wrap{
// 960 的寬度
max-width: 960px;
margin: 0 auto;
}
.header{
// 總共81個px
height: 80px;
border-bottom: 1px solid #69CA62;
position: relative;
}
.logo{
float: left;
width: 50px;
height: 50px;
background: #69CA62;
border: 3px solid green;
}
.menu{
float: right;
}
.menu li{
float: left;
}
.menu li a{
display: block;
color: #69CA62;
padding: 1em;
text-decoration: none;
}
.content{
padding: 1em;
line-height: 1.8;
}
.content p{
margin-bottom: 1em;
}
/*在PC上隱藏漢堡選單*/
.showmenu{
display: none;
}
@media (max-width: 767px){
// 當畫面的寬度小於767px就會成立
.menu {
/*隱藏選單開始*/
max-height: 0px;
overflow: hidden;
/*隱藏選單結束*/
設定動畫效果
transition: max-height 2.3s;
margin-top: 1px;
/*絕對定位疊在網頁上*/
position: absolute;
z-index: 100;
/*header 80px+1px boder 線條*/
top: 81px; // 從 header 正下方開始
left: 0; // 這樣才會寬度滿版
right: 0; // 這樣才會寬度滿版
background: #0F222B;
}
.menu li{
float: none;
border-bottom: 1px dashed #69CA62;
}
.menu li a{
transition: all 0.3s;
}
.menu li a:hover{
background: #69CA62;
color: #fff;
}
.showmenu{
display: block;
float: right;
margin: 1em;
}
/*jQ點擊後動態在 body 加上 class */
.menu-show .menu{
max-height: 500px
}
}
=========================================
js
$(document).ready(function() {
$('.showmenu').on('click', function(e){
e.preventDefault();
$('body').toggleClass('menu-show');
});
});
pc 版型
手機版型
=============================================================
就是header 用固定 position : fixed, width:100%,
然後content往下推擠81px
html 和js 都和上面一樣
css :
@media (max-width: 767px){
.header{
position: fixed;
width: 100%;
background: #0f222b;
}
.content{
padding-top: 81px;
}
.menu {
/*隱藏選單開始*/
max-height: 0px;
overflow: hidden;
/*隱藏選單結束*/
transition: max-height 2.3s;
margin-top: 1px;
/*絕對定位疊在網頁上*/
position: absolute;
z-index: 100;
/*header 80px+1px boder 線條*/
top: 81px;
left: 0;
right: 0;
background: #0F222B;
}
.menu li{
float: none;
border-bottom: 1px dashed #69CA62;
}
.menu li a{
transition: all 0.3s;
}
.menu li a:hover{
background: #69CA62;
color: #fff;
}
.showmenu{
display: block;
float: right;
margin: 1em;
}
/*jQ點擊後動態在 body 加上 class */
.menu-show .menu{
max-height: 500px
}
}
沒有留言:
張貼留言