Ref :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/all.css">
<link rel="stylesheet" href="css/animate.css">
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/all.js"></script>
</head>
<body >
<div class="container">
// 給手機 看的
<div class="aside">
<a href="#" class="mobile-close">關閉</a>
<ul class="menu">
<li><a href="#">選單一</a></li>
<li><a href="#">選單二</a></li>
<li><a href="#">選單三</a></li>
<li><a href="#">選單四</a></li>
</ul>
</div>
// 給pc 看的
<div class="main">
<div class="header">
<a href="#" class="mobile-link">選單連結</a>
<ul class="menu">
<li><a href="#">選單一</a></li>
<li><a href="#">選單二</a></li>
<li><a href="#">選單三</a></li>
<li><a href="#">選單四</a></li>
</ul>
</div>
<div class="content">
<p>
媽注程的由進局大會他社高這是後由費的不，理草內商手媽居職標。陸生無提會好氣放年平國題、的公照演了、是慢前最角態足，實生覺條教動如張新又。怕歡灣電我馬過慢歷那自，亮該何裡機其岸：自一比該斷標的人晚細後企了工高，投廣不光，事西相人者有心：地用功資一風人法一大自公理我時口不。商燈少力北們定大。房有兩新！
</p>
<p>
著線部環性，們沒答民中……適友笑我得：表世化邊腳頭。沒內等中社然到的。布失排、樹重頭市：的差轉時機品裡他難該人到了：留全必員子一反。動些色，上正聞回標要時？
</p>
<p>
去可子以國議到立的飛生物，便我說證回投日是細點，講孩人……名有和和其常作特。業畫府步外前，光生人有分好，裡哥文直，有成突一點是經陽容維子得安分人已的來種站一質大。他到看一這書切一雙全，領一民園是並了。息因電界樂車次卻經了男。
</p>
</div>
</div>
</div>
</div>
</body>
</html>
======================================================================
css:
.container{
position: relative;
overflow: hidden;
max-width: 960px;
margin: 0 auto; // 水平置中
}
.mobile-link,.mobile-close{
background: green;
color: #fff;
padding: 5px;
display: inline-block;
margin: .3em;
text-decoration: none;
}
// 在pc 板的時候關閉
.mobile-link{
display:none;
}
@media(max-width: 768px){
.mobile-link{
display:inline-block;
}
}
.main{
transition: all 0.3s;
}
.header{
height: 50px;
background: red;
margin-bottom: 1em;
}
.header .menu {
float: right;
}
.open .header .menu{
display: none;
}
.content {
padding: 1em;
}
.content p{
margin-bottom: 1em;
}
@media(max-width:767px){
.header .menu{
display: none;
}
}
.header .menu li{
float: left;
}
.header .menu li a{
color: #fff;
height: 50px;
line-height: 50px;
padding: 0 1em;
display: block;
transition: all .8s;
}
.header .menu li a:hover{
background: orange;
}
.aside{
position: absolute;
top: 0;
bottom: 0;
width: 270px;
height: 100%;
background: yellow;
overflow: hidden;
-webkit-transform: translateX(-270px);
transform: translateX(-270px); // 移出畫面外....
transition: all .3s;
}
/*增加 class open 觸發選單*/
.open .main{
-webkit-transform: translateX(270px);
transform: translateX(270px); // 從畫面內移動到270x
}
.open .aside{
-webkit-transform: translateX(0px);
transform: translateX(0px); // 從畫面外移到畫面內
}
.aside .menu li {
margin: 1em;
background: #000;
color: #fff;
}
.aside .menu li a{
color:#fff;
padding: 1em;
display: block;
}
.aside .menu li a:hover{
background: blue;
}
=========================================================
js:
$(document).ready(function() {
// 打開左側選單
$('.mobile-link').click(function(event) {
$('body').addClass('open');
});
// 關閉左側選單
$('.mobile-close').click(function(event) {
$('body').removeClass('open');
});
});
沒有留言:
張貼留言