how can I make a div hide on the side and when clicked appears on the screen?

Question

how can I make a div hide on the side and when clicked appears on the screen?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

0

How can I make the div hide on the side of the screen? notice the side menu of this site link tried it in a way but it was not someone knows a means? I put the display none and in js I put block, however I always have to go back to none then if the screens are not locked, to make the menu worse, it causes a delay to come back, ie when the div returns to hide in the animate o button does not return glued to it, is there any way to make it look more elegant?

function modalOpen(){
            $(document).ready(function(e){
            tamanho = $('.modal-box').css("width");
             $("#box1").animate({right: '0px'});
             $("#botao").animate({right: tamanho});
             $('#modal').css("display","block");

            /*FECHAR O MODAL SE O BOTÃO CANCELAR FOR PRESSIONADO */
            $('.cancel, #modal').click(function(event){
                if(event.target !== this){
                    return;
                }
                 $("#botao").animate({right: '0px'});
                
                 setTimeout(function() {  $("#box1").animate({right: '-410px'}); }, 30 );
                 setTimeout(function() { $('#modal').css("display","none"); $("#box1").animate({right: '-410px'}); }, 400);
            });
           
        });

        }

#modal {
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
    left: 0;
    top: 0;
}
@font-face {
    font-family: "Eurostile";
    src: url('font/Eurostile.ttf');
}
.Eurostile-font {
    font-family: "Eurostile";
}
.btn_modal {
    color: white;
    margin-bottom: 10px;
    background-color: darkgrey;
    border: none;
    font-size: 19px;
}
.btn_modal:hover {
    background-color: honeydew;
    color: black;
}
.modal-box {
    background-color: #FFF;
    width: 20%;
    height: 405px;
    position: absolute;
    right: -410px;
    top: 130px;
    margin-left: -20%;
    z-index: 1000;
    font-family: Eurostile;
}
#modal_form {
    display: block;
    margin: 0 auto;
    z-index: 10000;
}
.itens {
    margin-left: 10%;
    display: block;
    margin-top: 3%;
    z-index: 10000;
    font-family: Eurostile;
}
.itens input {
    line-height: 10px;
    display: block;
    width: 90%;
    z-index: 10000;
}
#bairro {
    display: block;
    margin-right: 10%;
    width: 155px;
    z-index: 10000;
}
#box {
    display: flex;
    margin-top: 0;
    width: 90%;
    height: 60px;
    resize: none;
    z-index: 10000;
}
#form_title {
    text-align: center;
    background-color: grey;
    color: white;
    padding: 0;
    z-index: 10000;
    width: 100%;
    height: 50px;
}
#form_title h3 {
    float: left;
    margin-left: 5%;
    padding-top: 10px;
    margin-bottom: 0;
}
#modal_form {
    width: 80%;
    height: 400px;
    z-index: 10000;
}
.button {
    width: 160px;
    margin-top: 10px;
    height: 30px;
    background-color: grey;
    color: white;
    z-index: 10000;
    display: block;
    font-family: Eurostile;
}
.button:hover {
    background-color: black;
}
#modal_form {
    width: 100%;
    height: 430px;
}
.cancel {
    margin-right: 2%;
}
.send {
    margin-right: 8%;
}
#cbBox {
    line-height: 10px;
    display: block;
    width: 81%;
    z-index: 10000;
    margin-left: 10%;
    margin-top: 10px;
}
#changeText {
    font-size: 20px;
    float: left;
    margin-left: 5%;
    padding-top: 10px;
    margin-bottom: 0;
    font-family: Eurostile;
}
#align-btn {
    width: 180px;
    display: flex;
    margin: 0 auto;
}

<div id="modal">
        <div id = "box1" class="modal-box">
            <div class="modal-box-conteudo">

                <form name="contactform" id="modal_form" method="post">
                    <div id="form_title"><p id="changeText">Register for valutation</p></div>  
                   <!-- <select id="cbBox" name="example">
                     <option value="#">I would like a valutation for</option>
                     <option value="A">A</option>
                     <option value="B">A</option>
                     <option value="-">Other</option>
                    </select> -->                
                    <label class="itens">Full name<input class="campo" type="text" name="fullname"></label>
                    <label class="itens">Adress<input class="campo" type="text" name="adress"></label>
                    <label class="itens">Postcode<input class="campo" type="text" name="postcode"></label>
                    <label class="itens">E-mail<input class="campo" type="email" name="email"></label>
                    <label class="itens">Telephone <input class="campo" type="text" name="telefone"></label>
                    <label class="itens">Message <input class="campo" type="text" name="message"></label>
                    <!--<label class="itens">Message<textarea name="conteudo" id="box"></textarea></label>   --> 
                    <div id="align-btn">              
                        <input class="button send" type="submit" value="Send" onclick="return validar();">
                        <input type="button" class="button cancel" value="Cancel">
                    </div>
                </form>
            </div>
        </div>
</div>

javascript html jquery css

asked by anonymous 19.04.2017 / 15:51

3 answers

1

Hello friend, instead of using the modal use the library JQuery

In it is SlideToggle Do this effect

Download the library and take the test.

No HTML

<article>
         <figure>
                 <img src="imagem.jpg" alt="img">                    
         </figure>                
       <div>                      
           <h3>Titulo</h3> 
         Seu texto introdução, seu texto introdução, seu texto introdução, seu texto introdução, seu texto introdução, seu texto introdução,
        <div id="new> seu texto completo, seu texto completo, seu texto completo, seu texto completo, seu texto completo, seu texto completo, seu texto completo, seu texto completo. 
        </div>
         <span>
         <a href="javascript:abreFecha('#new')">Saiba mais.</a>
         </span>
 </article>

In CSS

#new {display:none; margin-top:0px;}

At the end of HTML the JavaScript

<script type="text/javascript">
      function abreFecha(sel) {
      $(sel).slideToggle();
      }
      </script>

I hope I have helped.

19.04.2017 / 17:06

1

link

Apply this logical concept in your application, do not get stuck with the size of the divs or anything like that. Once you understand this operation I'm sure it will solve your problem! Great Hug!

19.04.2017 / 17:36

how to change the class of an element according to the position of the values inside a foreach? Calculate Value of SQL columns

score 1 · Accepted Answer

Hello you can achieve using this done using CSS Transition and a bit of JS.

You should have a class that will be the container across the side menu.

<div class="menu">
  <button>Toggle</button>
  <ul>
    <li>
      <a href="#">0001</a>
    </li>
    <li>
      <a href="#">0002</a>
    </li>
    <li>
      <a href="#">0003</a>
    </li>
  </ul>
</div>

The class Css you should enter the width and position relative. In the field left, enter the menu width multiplied by -1.

If your menu has 500px left it will be -500px;

.menu { height: 300px; width: 100px; background: red; position: relative; transition: all 0.5s; left: -100px; }

Inside the menu you will have the button that will be responsible to hide or not. This button will be absolute position with a defined width and its right will be the width multiplied by -1. That way it stays off the menu and will be visible when the menu is hidden.

button{
  position:absolute;
  width: 50px;
  right: -50px;
}

An .active class to display the menu

.active{
  left: 0px
}

A JS function that will be responsible for handling the button and displaying the menu.

$('button').click(function(){
    if($('.menu').hasClass('active')){
    $('.menu').removeClass('active');
  }else{
    $('.menu').addClass('active');
  }
})

See this example working link