Pannello Nascosto/Mostrato orizontalmente

**sp1d3r** · 18-02-2015, 14:53

Ciao a tutti,

sto creando un sito e ho un problema con un pannello-menù.Mi spiego: Il pannello è un div di 350px in larghezza e 220px in lunghezza. E' attaccato al margine sinistro della pagina,quindi con un margin-left
di 0px.Il punto è che questo pannello deve essere nascosto e mostrato attraverso il click di un bottone.Cioè, sono riuscito a farlo nascondere al caricamento di paggina, e poi attraverso il click del bottone riesco anche a farlo mostrare,quindi ad "espanderlo",ma il problema è che una volta cliccato e mostrato tutto, se clicco di nuovo dovrebbe nascondersi di nuovo,con slide a sinistra, ma non lo fa.Ho trovato anche il problema: il fatto che sia un margin-left: 0px. Ho notato infatti che basterebbe che sia di 1px spostato da sinistra e funzionerebbe tutto,nascondere/mostrare, ma se è di 0px non funziona.Qualcuno saprebbe aiutarmi ?

Ecco anche il codice :

codice HTML:

 <div class="collapsible">
           <span class="categories"> Categories </span>
           <span class="underline-categories"></span>
           <a href="#" class="cat-title"> Recursive or Iteration Algorithm </a>
           <a href="#" class="cat-title" id="snd-cat-title"> Logical Algorithm </a>
           <a href="#" class="cat-title" id="trd-cat-title"> Serial, Parallel or Distributed </a>
           <a href="#" class="cat-title" id="frt-cat-title"> Deterministic or Non-Deterministic </a>
           <a href="#" class="cat-title" id="fft-cat-title"> Exact or Approssimate Algorithm </a>
           <a href="#" class="cat-title" id="sxt-cat-title"> Quantum Algorithm </a>
           <button class="arrow">&raquo;</button>
     </div>

codice:

 
 .collapsible {
    width: 350px;
    height: 220px;   
    background: url(callout.png) #1A4065;
    position: fixed;
    margin-left: 0px;
    margin-top: 200px;
    z-index: 1000;
    border-radius: 0 12px 12px 0;
}

.categories {
    position: absolute;
    color: #fff;
    font-family: 'Jura', sans-serif;
    font-size: 1.4em;
    letter-spacing: 1px;
    margin-left: 15px;
    margin-top: 10px;   
}

.underline-categories {
    position: absolute;
    width: 120px;
    height: 1px;
    border-radius: 15px;
    background-color: #fff;
    margin-top: 37px;
    margin-left: 17.3px;
}

.cat-title {
    position: absolute;
    color: #fff;
    text-decoration: none;
    font-family: 'Ubuntu', sans-serif;
    font-size: 1em;
    margin-top: 50px;
    margin-left: 20px;
    letter-spacing: 0.8px;
    display: table;
}

#snd-cat-title {
    margin-left: 20px;
    margin-top: 75px;
}

#trd-cat-title {
    margin-left: 20px;
    margin-top: 100px;
}

#frt-cat-title {
    margin-left: 20px;
    margin-top: 125px;
}

#fft-cat-title {
    margin-left: 20px;
    margin-top: 150px;
}

#sxt-cat-title {
    margin-left: 20px;
    margin-top: 175px;
}

.arrow {
    position: absolute;
    margin-top: 15px;
    margin-left: 310px;
    width: 31px;
    height: 18px;
    cursor: pointer;
}

Javascript/Jquery

codice:

$(document).ready(function() {
    var hideWidth = '-305px';
    var collapsibleEl = $('.collapsible'); 
    var buttonEl =  $(".collapsible button");

    collapsibleEl.css({'margin-left': hideWidth});

    $(buttonEl).click(function()
    {
        var curwidth = $(this).parent().offset(); 
        if(curwidth.left>0)
        {
           
            $(this).parent().animate({marginLeft: hideWidth}, 300 );
            $(this).html('&raquo;'); 
        }
else{
          
            $(this).parent().animate({marginLeft: "0"}, 300 );    
            $(this).html('&laquo;');
        }
    });
});

**carlomarx** · 19-02-2015, 03:51

No JavaScript:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<style type="text/css">
aside.collapsible {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: visible;
}

aside.collapsible nav.give_me_a_name {
    width: 350px;
    height: 220px;   
    background: url(callout.png) #1A4065;
    position: absolute;
    top: 200px;
    left: -300px;
    z-index: 1000;
    border-radius: 0 12px 12px 0;
    transition: left .3s linear;
}

aside.collapsible:target nav.give_me_a_name {
    left: 0;
}

.categories {
    position: absolute;
    color: #fff;
    font-family: 'Jura', sans-serif;
    font-size: 1.4em;
    letter-spacing: 1px;
    margin-left: 15px;
    margin-top: 10px;   
}

.underline-categories {
    position: absolute;
    width: 120px;
    height: 1px;
    border-radius: 15px;
    background-color: #fff;
    margin-top: 37px;
    margin-left: 17.3px;
}

.cat-title {
    position: absolute;
    color: #fff;
    text-decoration: none;
    font-family: 'Ubuntu', sans-serif;
    font-size: 1em;
    margin-top: 50px;
    margin-left: 20px;
    letter-spacing: 0.8px;
    display: table;
}

#snd-cat-title {
    margin-left: 20px;
    margin-top: 75px;
}

#trd-cat-title {
    margin-left: 20px;
    margin-top: 100px;
}

#frt-cat-title {
    margin-left: 20px;
    margin-top: 125px;
}

#fft-cat-title {
    margin-left: 20px;
    margin-top: 150px;
}

#sxt-cat-title {
    margin-left: 20px;
    margin-top: 175px;
}

a.arrow {
    position: absolute;
    margin-top: 15px;
    margin-left: 310px;
    width: 31px;
    height: 18px;
    cursor: pointer;
    background: white;
    color: black;
    text-decoration: none;
    text-align: center;
}

aside.collapsible a.arrow.left,
aside.collapsible:target a.arrow.right {
    display: none;
}

aside.collapsible a.arrow.right,
aside.collapsible:target a.arrow.left {
    display: block;
}

</style>
</head>

<body>

<aside class="collapsible" id="cat-menu">
    <nav class="give_me_a_name">
        <span class="categories"> Categories </span>
        <span class="underline-categories"></span>
        <a href="#" class="cat-title"> Recursive or Iteration Algorithm </a>
        <a href="#" class="cat-title" id="snd-cat-title"> Logical Algorithm </a>
        <a href="#" class="cat-title" id="trd-cat-title"> Serial, Parallel or Distributed </a>
        <a href="#" class="cat-title" id="frt-cat-title"> Deterministic or Non-Deterministic </a>
        <a href="#" class="cat-title" id="fft-cat-title"> Exact or Approssimate Algorithm </a>
        <a href="#" class="cat-title" id="sxt-cat-title"> Quantum Algorithm </a>
        <a href="#nowhere" class="left arrow">&laquo;</a>
        <a href="#cat-menu" class="right arrow">&raquo;</a>
    </nav>
</aside>

</body>
</html>

**sp1d3r** · 19-02-2015, 14:30

Grazie per la disponibilità.Sono riuscito comunque a risolvere il problema mantenendo il codice javascript.
Grazie ancora ma per me si puo chiudere

Discussione: Pannello Nascosto/Mostrato orizontalmente

Strumenti discussione

Ricerca discussione

Visualizza

Pannello Nascosto/Mostrato orizontalmente

Tag per questa discussione

Permessi di invio