Extreme Thinking
網頁的左邊放個收起來的 FB 網址, 點選開出來 , 點選關閉就關閉

2017-09-30

之前做滑鼠移動到 左邊 就拉出 FB , 發現手機平板不好操作 , 改成點選開 , 點選關閉

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
 .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    text-align:center;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;

}

.sidenav a:hover{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#mwt_mwt_slider_scroll
{
    top: 0;
    right:100%;
    width:85%;
    position: fixed;
    z-index:9999;
}

#mwt_slider_content{
    background:#3c5a98;
    text-align:center;
    padding-top:20px;
}

#mwt_fb_tab {
    position:absolute;
    top:220px;
    right:-24px;
    width:24px;
    background:#3c5a98;
    color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    padding:9px 0;

    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomright:10px;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}
#mwt_fb_tab span {
    display:block;
    height:12px;
    padding:1px 0;
    line-height:12px;
    text-transform:uppercase;
    font-size:12px;
}
.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
</style>

</head>
<body>
<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>

<div id="mwt_mwt_slider_scroll">
 <div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&timesClose</a>
    <iframe src="https://你的FB網址" scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:100%; height:100%;" allowTransparency="true"></iframe>
 </div>

 <div id="mwt_fb_tab">

 <span onclick="openNav()">F</span>
 <span onclick="openNav()">B</span>

 </div>
</div>

</body>
</html>