Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    Creazione toggle simile alle cartelle di iOS

    Salve a tutti, innanzitutto mi scuso se scrivo nella sezione sbagliata.
    Dovrei realizzare un toggle, che mostri al click un div con larghezza a tutto schermo e altezza definita in PX.

    Il codice HTML è:

    codice:
    <div class="ultra-contain">
       <div class="biglietto">
          <img src="http://www.appleface.net/demo/wp-content/uploads/2013/10/Biorisorgive.png" />           <span class="title">
             <htitle>
               <p>Bio Risorgive</p>
             </htitle>
           </span>
        </div>
        <div class="span-container">
            <div class="divinfo">
                <p class="trigger">
                  <a href="#">Tutte le info</a>
                </p>
            </div>
        </div>
    </div>
    Ecco invece il codice CSS relativo agli elementi:

    codice:
    .biglietto {
    position: relative;
    display: block;
    }
    
    
    htitle {
    font-size: 20px;
    color: #FFF;
    }
    
    
    htitle p {
    text-align: center;
    margin-top: 4px;
    font-size: 20px;
    }
    
    
    .span-container {
    width: 100%;
    height: 30px;
    background-color: #05B5FA;
    margin-left: 0;
    }
    
    
    .divinfo p {
    text-align: center;
    font-size: 20px;
    color: #FFF;
    }
    .divinfo {
    width: 100%;
    margin-top: 2px;
    }
    
    
    .toggle-container {
    height: 200px;
    width: 100%;
    left: 0;
    bottom: 30px;
    background-color: #05B5FA;
    position: absolute;
    display: block;
    float: left;
    }
    
    
    .trigger a:hover {
    border-radius: 10px;
    }
    
    
    .trigger a {
    color: #FFF;
    border-bottom: 2px solid;
    }
    
    .title {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #05B5FA;
    height: 30px;
    }
    Alla pressione del link contenuto in trigger, si dovrebbe visualizzare un elemento di classe .info-container che, oltre alle caratteristiche sopra elencate, si apra gradualmente e modifichi la dimensione della pagina in modo dinamico.

    L'effetto che vorrei ottenere nello specifico è questo:

    Senza titolo-1.jpg

    Vi ringrazio in anticipo per l'aiuto
    Ultima modifica di deleted_20210415; 09-10-2013 a 15:28

  2. #2
    css3 tooltips

    probabilmente ti servirà un po' di js anche..
    Questa volta, più che un voto.. è favoreggiamento.

  3. #3
    Quote Originariamente inviata da Al_katraz984 Visualizza il messaggio
    css3 tooltips

    probabilmente ti servirà un po' di js anche..
    Grazie mille, ma purtroppo non trovo nulla che faccia al caso mio

  4. #4
    Utente di HTML.it
    Registrato dal
    Jan 2010
    residenza
    Pianeta Terra
    Messaggi
    1,614
    ma purtroppo non trovo nulla che faccia al caso mio
    Non credo che trovi esattamente ciò che vuoi. Cercati una cosa più o meno buono e poi lo adatti.
    Lo puoi fare anche con il solo .js.
    Per una bella risata vai QUI

  5. #5
    ma neanche, anche solo con css.. semplificato ovviamente..

    http://jsfiddle.net/3K4M6/


    Questa volta, più che un voto.. è favoreggiamento.

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.