Div在Click上从侧面滑出

时间：2016-10-05 15:08:20

标签： jquery html css

我试图让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">

我需要＃wrap-products

这个效果

2 个答案:

答案 0 :(得分：0)

你好看到下面的小提琴我只是为一侧酒吧这样做显然另一个会根据你的愿望做你的风格。检查中间的sidenav.Add风格与复选框或标签作为你的愿望我只是做了基本的。

基本的javascript代码是

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

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

这里是小提琴演示.Hope It Helps。

Sidebar Nav Fiddle Example

答案 1 :(得分：0)

我修改了您的代码以解决您遇到的问题。 请参阅下面的代码或小提琴创建。

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/

希望这会对你有所帮助。

相关问题
最新问题