How can I make a div hide on the side and when clicked appear on the screen?

Asked

Viewed 759 times

0

How can I make div hide on the side of the screen? Note the side menu of this site http://preview.imithemes.com/? Theme=Solicitor-WP I tried it a way but didn’t someone know a way? my None display and js I put block, but I always have to go back to None after if not the screens are locked, to worsen the menu button generates a delay to return, ie when the div comes back to hide in the Animate the button does not come back pasted on it, has some way of making it more elegant?

inserir a descrição da imagem aqui

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 jquery html css

3 answers

1

Hello friend instead of using the modal use the library Jquery

In it is Slidetoggle Does that effect

Download the library and test.

In 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 the CSS

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

At the end of HTML o Javascript

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

I hope I’ve helped.

1


Hello you can achieve using this done using CSS Transition and some JS.

You must have a class that will be the container throughout 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 Css of the class you must enter the relative width and position. In the left field 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 position Absolute with a defined width and your right will be the width multiplied by -1. This way it stays off the menu and will be visible when the menu is hidden. 

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

A class . enabled to display the menu

.active{
  left: 0px
}

A JS function that will be responsible for handling the click on the button and whether or not to display the menu.

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

See this example working https://jsfiddle.net/g86p79xd/2/

1

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.