Spostamento pagina con bottone

**1234567** · 01-02-2015, 21:30

Ciao a tutti,
vorrei ricreare un menu simile a quello visto in un sito.
(http://www.extrowebsite.com/)
Nella barra in alto a destra vi è un bottone che sposta tutta la pagina a sinistra per fare spazio a un menu laterale. Inizialmente avevo creato un div che conteneva tutto il codice html, e con un javascript spostavo tutto il contenuto. Il metodo però creava dei problemi.
Mi chiedevo se fosse possibile selezionare l'intero body da spostare. O comunque se avete buone soluzioni al problema.

Vi ringrazio in anticipo

**cavicchiandrea** · 01-02-2015, 22:34

Ciao e benvenuto
Credo che l'esempio faccia uso di boostrap e un css responsive, la soluzione più rapida e prendere spunti dal sorgente pagina usandolo come esempio, svilupparlo da zero è complesso e richiede buono conoscenze js e/o jquery

**rinaldi** · 02-02-2015, 01:04

Ho creato questo codice al volo come punto di partenza spero possa esservi utile

codice:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>

<style>
body { padding:0px;
margin:0px;
overflow-x:hidden}
         
#box-sinistro{ width:20%;
               background-color:#666;
               height:auto;
               display:none;
               float:left;
               position:fixed;
               left:0px;
               top:0px;
               overflow-y:scroll
 }

#box-centro{ background-color:#FFFF00; 
            width:100%;
             min-height:800px ;
             height:auto;
             
                     }
     


#box-article{ width:100%; 
height:350px;

 background-color:#CCC
 
 
   }


#box-article  #article{ width:300px; 
height:300px;
border:1px solid #009;
background-color:#FFFFCC;
float:left;

margin:5px;
border-radius:10px; }


#button{ width:100%;
height:50px;
background-color:#FF9900;
margin-top:50px;}

</style>

<script src="//apricenacerca.it/public/jq/jquery.js"></script>
</head>

<body>


 

<div id="box-sinistro">sinistro 

<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>
<button id="button">Home</button>

</div> 


<div id="box-centro"> 
<button id="button-apri-menu" onClick="aprimenu()">apri box sinistro</button>
<br>centro 




<div id="box-article">
<div id="article"></div>
<div id="article"></div>
<div id="article"></div>
<div id="article"></div>
 </div>


<div id="box-article">
<div id="article"></div>
<div id="article"></div>
<div id="article"></div>
<div id="article"></div>
 </div>

<div id="box-article">
<div id="article"></div>
<div id="article"></div>
<div id="article"></div>
<div id="article"></div>
 </div>




</div>





 
<script>


$('#box-sinistro').height(  $(window).height() +"px");



function aprimenu(){
    
    $('#box-sinistro').toggle();
    
    
    if ( $('#box-centro').css('position') == 'absolute'  )
    {
        //alert('chiudi');
    
      $("#button-apri-menu").html('Apri');
        
     $('#box-centro').css({
         'width':'100%'  ,
         'position':'',
        'left':'0%'
         });
         
    }
    else
    {
        
        //alert('apri');
          $("#button-apri-menu").html('Chiudi');
     $('#box-centro').css({
         'width':'100%',
        'position':'absolute',
        'left':'20%'
         });
         
    }
    
    
    
         
    }
</script>




 




</body>
</html>

**1234567** · 03-02-2015, 21:07

Grazie mille a entrambi!!!!
Adesso mi applicherò

**1234567** · 05-02-2015, 20:12

Ci ho lavorato un po', e sono riuscito nel mio intento

. Per chi volesse darci un'occhiata, ecco il codice:

codice HTML:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Menù laterale</title>
  <style>
body {
    font-family: Calibri, Helvetica, sans-serif;
    position: relative;
    right: 0px;
    margin: 0px;
}

p, h1 {
    color: white;
    padding-left: 10px;
}

#menu {
    height: 80px;
    width: 100%;
    background-color: #1668FF;
}

/* Colonna laterale */
div.lato {
    height:100%;
    width: 340px;
    background-color: #270080;
    float:right;
    overflow-y: scroll;
    position: fixed;
    top: 0px;
    right: -340px;
    transition: 0.8s;
}

.altro {
    height: 31px;
    width: 21px;
    float: right;
    margin: 20px;
    cursor: pointer;
}

.altro div {
    height: 3px;
    background-color: black;
    margin-bottom: 5px;
    margin-top: 5px;
    border-radius: 2px;
}
  </style>
</head>
<body>
<div id="menu">
  <div id="altro" class="altro">
    <div></div>             
    <div></div>             
    <div></div>             
  </div>     
  <!-- Colonna laterale -->   
  <div id="lato" class="lato">
    <h1>Menù laterale</h1>
    <p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p><p>Contenuto</p>
  </div>
</div>
<script>
var button = document.getElementById("altro");

button.addEventListener("click", spostamento);

function spostamento(){
var lato = document.getElementById("lato");
    if ( lato.style.right === "0px" )
    {
        //Chiude
        lato.style.right = "-340px";
        document.body.style.right = "0px";
        document.body.style.transition = "0.8s";
    }
    else
    {
        //Apre
        lato.style.right = "0px";
        document.body.style.right = "340px";
        document.body.style.transition = "0.8s";
    }
}
</script>
</body>                     
</html>

Discussione: Spostamento pagina con bottone

Strumenti discussione

Ricerca discussione

Visualizza

Spostamento pagina con bottone

Permessi di invio