Visualizzazione risultati 1 fino 12 di 12

Discussione: slide bar

  1. #1
    Guest

    Predefinito slide bar

    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>

  2. #2
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,745

    Predefinito

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

  3. #3
    Guest

    Predefinito

    la seconda... è possibile?

  4. #4
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,745

    Predefinito

    Una cosa come questa?

  5. #5
    Guest

    Predefinito

    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?

  6. #6
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,745

    Predefinito

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

  7. #7
    Guest

    Predefinito

    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...

  8. #8
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,745

    Predefinito

    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.

  9. #9
    Guest

    Predefinito

    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...

  10. #10
    karl94 non è connesso Staff AV
    Data registrazione
    03-10-2005
    Messaggi
    17,745

    Predefinito

    Non capisco, quale sarebbe il problema?

  11. #11
    Guest

    Predefinito

    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>

  12. #12
    Guest

    Predefinito

    nessuno nessuno?

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •