slide bar

14-03-2011, 20.23.32

ciao a tutti....

mi interessava questo effetto: http://www.webdesignerwall.com/demo/...ide-panel.html

dove il codice si trova qui all'esempio 1 http://webdesignerwall.com/tutorials...-for-designers

come posso portarmelo sul lato sinistro? ho provato a smanettare ma non riesco, anche xke la larghezza (che poi diventerà altezza portandolo sul lato sinistro) è legata alla lunghezza del body....

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Simple Slide Panel</title>



<script type="text/javascript" src="jquery.js"></script>



<script type="text/javascript">

$(document).ready(function(){



    $(".btn-slide").click(function(){

        $("#panel").slideToggle("slow");

        $(this).toggleClass("active"); return false;

    });

    

     

});

</script>



<style type="text/css">

body {

    margin: 0 auto;

    padding: 0;

    width: 570px;

    font: 75%/120% Arial, Helvetica, sans-serif;

}

a:focus {

    outline: none;

}

#panel {

    background: #754c24;

    height: 200px;

    display: none;

}

.slide {

    margin: 0;

    padding: 0;

    border-top: solid 4px #422410;

    background: url(images/btn-slide.gif) no-repeat center top;

}

.btn-slide {

    background: url(images/white-arrow.gif) no-repeat right -50px;

    text-align: center;

    width: 144px;

    height: 31px;

    padding: 10px 10px 0 0;

    margin: 0 auto;

    display: block;

    font: bold 120%/100% Arial, Helvetica, sans-serif;

    color: #fff;

    text-decoration: none;

}

.active {

    background-position: right 12px;

}

</style>

</head>



<body>



<div id="panel">

    <!-- you can put content here -->

</div>



<p class="slide"><a href="#" class="btn-slide">Menu</a></p>



</body>

</html>

**karl94** · 14-03-2011, 20.34.45

In che senso? Vuoi che sia allineato a sinistra o vuoi proprio ruotarlo e farlo uscire dal bordo sinistro della pagina?

14-03-2011, 20.38.31

la seconda... è possibile?

**karl94** · 14-03-2011, 21.49.52

Una cosa come questa?

14-03-2011, 22.07.45

si come concetto si...
che resti centrata in altezza e fissa rispetto al pagina che invece scorre su e giu in base ai contenuti...

è possibile?

**karl94** · 14-03-2011, 22.32.59

Centrarlo verticalmente non è possibile, a meno che non si definisca l'altezza con le percentuali; per la posizione fissa è già a posto.

14-03-2011, 22.39.26

ok dai, dove posso trovarla? dopo in un secondo momento se posto qui, possiamo vedere il codice? siccome è uno dei miei primi approci con javascript (ho sempre usato solo php) mi piacerebbe iniziare a capirlo...

**karl94** · 14-03-2011, 22.44.12

Il tuo browser dovrebbe permetterti di vedere il sorgente della pagina: nel menù visualizza o nel menù contestuale dovrebbe esserci la voce appropriata.
Comunque non c'è un singolo rigo di Javascript, è realizzato interamente mediante CSS.

14-03-2011, 22.55.08

eheh no allora forse non so se va bene, xke la liguetta "tira fuori dalla sinistra dello schermo" un div alla fine e quel div contiene uno script php che attraverso un include va ad includere un altro file php che varia ad ogni pagina...

**karl94** · 14-03-2011, 23.21.49

Non capisco, quale sarebbe il problema?

15-03-2011, 00.09.20

niente, erano delle mie errate valutazioni perdonami...

allora sto provando un po... vediamo, ho prodotto questo per ora:

http://fendermx.altervista.org/s.php

Codice PHP:


        <style type="text/css"> 

        body {

        background:#0000FF;

        }

            .slide{

                position: fixed;

                width: 250px;

                left: -210px;

                top: 50px;

                

                -moz-transition: .7s left;

                -webkit-transition: .7s left;

                -o-transition: .7s left;

                transition: .7s left;

                

                color: #000;



            }

            

            .slide > .content{

                margin: 0 20px 0 0;

                

            }

            

            .slide > .label{

                position: absolute;

                top: 0;

                bottom: 0;

                right: 0;

                margin: 0;

                width: 40px;

                

            }

            

            .slide > .label > span{

                display: block;/*Otherwise webkit doesn't apply transform*/

                -moz-transform: rotate(90deg);

                -moz-transform-origin: 10px;

                -webkit-transform: rotate(90deg);

                -webkit-transform-origin: 10px;

                -o-transform: rotate(90deg);

                -o-transform-origin: 10px;

                transform: rotate(90deg);

                transform-origin: 10px;

            }

             

            .slide:hover > .label{

                background-color: #ffffff;

            }

            

            .slide:hover{

                left: 0;

                                background-color:#f68a1a;



            }

            

            #menu{

                padding: 0;

                

            }

            

    

            #corpo_indice {

            height:500px;

            }

        </style> 

    </head> 

    <body> 

        <div class="slide">    

            <h3 class="label" style="            background-image:url(img/slide.gif);

            background-repeat:no-repeat;"><span><p align="center" >Indice</p></span></h3> 

            <ul class="content" id="menu"> 

                <div id="corpo_indice"></div>



            </ul> 

        </div> 

    </body> 

</html>

volevo ora andare a sistemarlo... vorrei togliere il bianco che si vede rendendolo trasparente... poi se sposto il mouse, prima che rientri la liguetta sparisce tutto...
con il codice sto agendo in modo corretto?

il mio script che dicevo andrà in <div id="corpo_indice"></div>

16-03-2011, 00.05.12

nessuno nessuno?

Discussione: slide bar

LinkBack

Strumenti discussione

Display

slide bar

Regole di scrittura