Div從側面滑出點擊

Question

我想讓一個div來自屏幕的左側/右側，我嘗試使用複選框和標籤方法，但它不起作用（或者我只是做錯了什麼）也許有人知道該怎麼辦？這裏是我的項目： http://codepen.io/benasl/pen/vXWBxv/?editors=1100

<input type="checkbox" name="" value="" id="sidebarToggler"> 

<input type="checkbox" name="" value="" id="sidebarToggler2"> 

<div class="products"> 
    <label for="sidebarToggler" class="next right"><b>&#x276F</b></label> 
    <label for="sidebarToggler2" class="next left"><b>&#x276E</b></label> 
<div id="wrap-products"> 

我需要爲＃包裝的產品。這一效果

Answer 1

你好看到下面的小提琴，我只是做了一個側欄顯然其他人會做同樣根據自己的風格你的願望。在中間檢查sidenav。添加樣式與複選框或標籤爲你的願望，我只是做了基本。

基本JavaScript代碼

<script> 
    function openNav() { 
    document.getElementById("mySidenav").style.width = "300px"; 
    } 

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

這裏是小提琴演示。希望它幫助。

Sidebar Nav Fiddle Example

Answer 2

我做了修改代碼來解決你的問題。 看下面的代碼或小提琴創建。

CSS

body { 
    height: 2000px; 
    font-family: 'Open Sans', sans-serif; 
    color: #707070; 

} 

.arrow { 
    width: 50px; 
    height: 50px; 
    background: black; 
    opacity:0; 
    border-radius: 10px; 
    transform: rotate(90deg); 
    transition: opacity 0.5s linear; 
    text-align:center; 
    line-height: 50px; 
    font-size: 40px; 
    color:white; 
    position:fixed; 
    right: 20px; 
    bottom: 20px; 
    z-index: 20; 
    padding: 2px; 


} 

#wrap { 
    width: 50%; 
    margin: auto; 
    text-align: center; 
    position: relative; 
} 

.landing { 
    overflow: hidden; 
    position: relative; 
    height: 600px; 
    background: url("http://onehdwallpaper.com/wp-content/uploads/2015/07/Bee-Wallpapers-Desktop-HD-Pictures-3.jpg"); 
    background-repeat: none; 
    position: top center; 
    background-size: auto 1200px; 
    background-attachment: fixed; 

} 


.about { 
    display: block; 
    padding-top: 60px; 
    padding-bottom: 100px; 
    box-sizing: border-box; 
    text-align: center; 
} 
.flex-wrap { 
    width: 100%; 
    margin: auto; 
    margin-top: 100px; 
    display: -webkit-flex; 
    flex-direction: row; 
    justify-content: space-between; 
} 
.icon { 
    height: 160px; 
    width: 160px; 
    background-color: lightgrey; 
    border-radius: 50%; 
    line-height: 400px; 

} 

h1 { 
    margin: 0px; 
    font-size: 2.5em; 
    margin-bottom: 10px; 
} 

.border { 
    border-top: 1px solid #e0e0e0; 
    font-size: 1.2em; 
    padding-top: 40px; 
} 

.products { 
    width: 100%; 
    /*overflow: hidden; 
    height: 1500px; */ 
    padding-left: 60px; 
    padding-right: 60px; 
} 

#wrap-products h2 { 
    margin-bottom: 100px; 
} 

*.* { 
    box-sizing: border-box; 
    } 

#products-wrap-main { 
     box-sizing: border-box; 
     overflow: hidden; 
     width: 50%; 
     margin: 0 auto; 
    } 

#wrap-products-container { 
    width: 200%; /*here is a tricky part */ 
} 

#wrap-products { 
    width: 50%; 
    display: block; 
    float: left; 
    text-align: center; 
    position: relative; 
    transition: all 1s ease-out; 

} 
#wrap-products2 { 
    display: block; 
    float: left; 
    width: 50%; 
    text-align: center; 
    position: relative; 

} 
/***********Mygtukai i sonus***************/ 

#Toggler { 
    display: none; 
} 
#Toggler2 { 
    display: none; 
} 
#Toggler:checked + .products #wrap-products { 
    left: 1300px; 
} 
#Toggler2:checked + .products #wrap-products2 { 
    left: 1000px; 
} 




@media screen and (min-width : 1024px) and (max-width : 1224px) { 
    #wrap-products { 
    /* width: 70%; */ 
    position: relative; 
    } 
} 


@media screen and (min-width : 768px) and (max-width : 1024px) { 

    #wrap-products { 
    /*width: 70%; */ 
    position: relative; 
} 

    #flex-products { 
    width: 100%; 
    margin: auto; 
    margin-top: 100px; 
    position:relative; 
    justify-content: space-between; 
    } 
} 


@media screen and (min-width: 769px) { 

    #products-wrap-main { 
     width: 620px; /* to limit the item 2 per row */ 
    } 
} 

@media screen and (min-width: 360px) and (max-width: 768px) { 

    #products-wrap-main { 
     width: 100%; 
    } 

    #flex-products { 
    width: 100%; 
    margin: auto; 
    margin-top: 100px; 
    position:relative; 

    } 
    #wrap-products, 
    #wrap-products2{ 
    position: relative; 
    width: 100%; 
    text-align: center; 
    } 

    #wrap-products-container { 
    width: 100%; 
    } 
    #wrap-products #flex-products .icon-cube, 
    #wrap-products2 #flex-products2 .icon-cube 
      { 
    display: block; 
    margin: auto; 
    margin-bottom: 30px; 
    padding-top: 8px; 
    height: 380px; 
    width: 350px; 
    background-color: lightgrey; 
    box-shadow: 0px 6px 3px -3px rgba(0,0,0, 0.2); 
    padding-bottom: 10px; 

} 
    .products .next{ 
    display:none; 
    } 
} 

#flex-products2 { 
    width:100%; 
    margin-top: 100px; 
    margin: auto; 
    display: -webkit-flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
} 


#flex-products { 
    width:100%; 
    margin-top: 100px; 
    margin: auto; 
    display: -webkit-flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
} 
.products { 
    position:relative; 
    display: block; 
    background-color: #f7f7f7; 
    padding-top: 60px; 
    padding-bottom: 150px; 
/* padding-right: 30px; 
    padding-left: 30px; */ 
    box-shadow: inset 0px 10px 5px -3px rgba(0,0,0, 0.03); 
    box-sizing: border-box; 
} 

.left { 
    text-align: center; 
    width: 50px; 
/* height: 50px; */ 
    font-size: 4em; 
    position: absolute; 
    display: block; 
    top: 50%; 
    left: 2%; 
    opacity: 0.5; 
    cursor: pointer; 
    margin-top: -20px; 
    z-index: 20000000; 

} 
.right { 
    text-align: center; 
    width: 50px; 
    /*height: 50px; */ 
    font-size: 4em; 
    position: absolute; 
    display: block; 
    top: 50%; 
    right: 2%; 
    opacity: 0.5; 
    cursor: pointer; 
    margin-top: -20px; 
    z-index: 20000000; 
} 
.next:hover { 
    opacity: 1; 
    z-index: 20000000; 
} 


.icon-cube { 
    position: relative; 
    height: 320px; 
    width: 270px; 
    margin-bottom: 30px; 
    background-color: lightgrey; 
    box-shadow: 0px 6px 3px -3px rgba(0,0,0, 0.2); 
    padding-bottom: 10px; 
} 
.inside { 
    width: 90%; 
    height: 80%; 
    background-color: grey; 
    margin: 10px auto; 
} 

.footer { 
    background:url("http://onehdwallpaper.com/wp-content/uploads/2015/07/Bee-Wallpapers-Desktop-HD-Pictures-3.jpg"); 
    background-attachment: fixed; 
    background-size: cover; 
    background-repeat: none; 
    height: 700px; 
    position: relative; 
    box-shadow: inset 0px 10px 10px -3px rgba(0,0,0, 0.3); 
    box-sizing: border-box; 
    text-align: center; 
} 
.name { 
    position: absolute; 
    text-align: center; 
    color:white; 
    width: 100%; 
    margin-top: 40px; 
} 

#wrap-contacts { 
    width: 60%; 
    margin: 0 auto; 
    position: relative; 

} 

.filter { 
    position: absolute; 
    background: black; 
    width: 100%; 
    height: 700px; 
    opacity: 0.4; 
} 

#form { 
    position: relative; 
    width: 60%; 
    top: 220px; 
    float: left; 
    text-align: left; 
} 

#input { 
    box-sizing: border-box; 
    background: rgba(255,255,255,0.2); 
    padding-left: 10px; 
    padding-top: 10px; 
    border: none; 
    width: 100%; 
    margin-bottom: 15px; 
    outline: none; 
    color: white; 
} 
.message { 
    height: 230px; 
    resize: none; 

} 
#input::-webkit-input-placeholder { 
    color: white; 
    opacity: 1; 
    font-family: "century gothic"; 
} 
#submit { 
    background: white; 
    border: none; 
    font-family: "century gothic"; 
    color: black; 
    width: 80px; 
    padding:5px 0 5px 0; 
} 

.text { 
    position: relative; 
    width: 30%; 
    top: 220px; 
    float: right; 
    color: white; 
    text-align: left; 
} 
h3 { 
    margin:0; 
    margin-bottom: 20px; 
} 

.envelope { 
    display: inline-block; 
    font-size: 32px; 
    line-height: 21px; 
    width: 160px; 
    margin: 0 auto; 
    position: relative; 
    color: white; 
} 
.envelope:after { 
display: inline-block; 
    content: ""; 
    border-bottom: 1px solid white; 
    position: absolute; 
    left: 0; 
    top: 12px; 
    width: 50px; 
} 
.envelope:before { 
display: inline-block; 
    content: ""; 
    border-bottom: 1px solid white; 
    position: absolute; 
    right: 0; 
    top: 12px; 
    width: 50px; 
} 

.end { 
    padding:30px; 
    text-align: center; 
    background: black; 
    font-size: 0.9em; 
    color:#c9c9c9; 
} 

HTML

<header class="landing"> 
</header> 

<div class="about"> 
    <div class="arrow">&#x276E</div> 
    <div id="wrap"> 
    <h1> About us </h1> 
    <p class="border"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in orci et sem mollis pulvinar in tristique ipsum. Nam ut mi ullamcorper, ultrices sapien eu, vulputate leo. Etiam non libero in urna aliquam suscipit eget id orci. Morbi egestas pulvinar ante quis imperdiet. Suspendisse fringilla vulputate justo, nec ultricies nunc tempus a.</p> 
    <div class = "flex-wrap">  
     <div class="icon">Example</div> 
     <div class="icon">Example</div> 
     <div class="icon">Example</div> 
    </div> 
    </div> 
</div> 

<!-- 
<input type="checkbox" name="" value="" id="Toggler2"> 
<input type="checkbox" name="" value="" id="Toggler"> 
--> 

<div class="products"> 

<div id="products-wrap-main"> 

    <div class="next right"><b>&#x276F</b></div> 
    <div class="next left"><b>&#x276E</b></div> 


    <div id="wrap-products-container"> 

    <div id="wrap-products"> 
     <h1> Products </h2> 
     <h2> Example </h2> 
     <div id="flex-products">  
     <div class="icon-cube"> 
     <div class="inside"></div> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </div> 

     <div class="icon-cube"> 
     <div class="inside"></div> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </div> 

     <div class="icon-cube "> 
     <div class="inside"></div> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </div> 

     <div class="icon-cube"> 
     <div class="inside"></div> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </div> 

     <div class="icon-cube"> 
     <div class="inside"></div> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </div> 

     <div class="icon-cube"> 
     <div class="inside"></div> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </div> 



     </div> 
    </div> 

    <div id="wrap-products2"> 
     <h1> Products </h1> 
     <h2> Example </h2> 
     <div id="flex-products2">  
     <div class="icon-cube"> 
     <div class="inside"></div> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </div> 

     <div class="icon-cube"> 
     <div class="inside"></div> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </div> 

     <div class="icon-cube "> 
     <div class="inside"></div> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </div> 

     <div class="icon-cube"> 
     <div class="inside"></div> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </div> 
     <div class="icon-cube"> 
     <div class="inside"></div> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </div> 
     <div class="icon-cube"> 
     <div class="inside"></div> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     </div> 



     </div> 
    </div> 
     <div style="clear: both;"></div> 
    </div> 

</div> 

</div> 

</div> 


    <div class="footer"> 

    <div class="filter"></div> 

    <div id="wrap-contacts"> 

     <div class="name"><h1>Contact us</h1><span class="envelope">&#x2709</span></div> 

     <form id="form" action="contact.php" method="post"> 
      <input id="input" class="subject" type="text" name="cf_name" placeholder="Subject"><br> 
      <input id="input" class="mail" type="text" name="cf_email" placeholder="Email"><br> 
      <textarea id="input" class="message" type="text" name="cf_message" placeholder="Message"></textarea><br> 
        <input id="submit" type="submit" value="Send">  
        </form>  
     <div class="text"><h3>Example</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in orci et sem mollis pulvinar in tristique ipsum. Nam ut mi ullamcorper, ultrices sapien eu, vulputate leo.</div>  
    </div> 

</div> 

<div class="end">@ Company's name</div> 

JS（jQuery的後請包括）

$(document).ready(function() { 
     $(window).scroll(function() { 
      if ($(this).scrollTop() > 0) { 
       $('.arrow').css('opacity', '0'); 
      } 
      if ($(this).scrollTop() > 300) { 
       $('.arrow').css('opacity', '.5'); 
      } 
     }); 

     $(".next.right").click(function() { 
      $("#wrap-products-container").animate({ 
       marginLeft:"-100%" 
      },300); 
     }); 

     $(".next.left").click(function() { 
      $("#wrap-products-container").animate({ 
       marginLeft:"0%" 
      },300); 
     }); 
    }); 

另外，請參閱小提琴（調整小提琴窗口帶箭頭的桌面視圖在行動中） -

https://jsfiddle.net/guruling/4466bpx2/ 

希望這會幫助你。