Menù Start come Windows 8

« Older   Newer »
 
  Share  
.
  1. Prince William
        +4    
     
    .

    User deleted


    Menù start laterale
    Com creare un comodo menu laterale versione Windows 8
    jpg
    [ANTEPRIMA]



    In questa guida vi spiegherò come creare e modificare un comodo menù laterale. Per il momento vi lascio solo il codice a breve linkerò anche un generatore che è in cantiere :asd:

    Installazione
    In Colori e Stili:
    CODICE
    /* Menu start creato da Prince William per http://ffmagazine.forumfree.it */
    .start {position: fixed; background: rgba(0, 0, 0, 0.1); right: -73px; width: 73px; height: 100%; top: 0; color: #FFF; float: right; z-index: 9; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; display: block !important}
    .start:hover {position: fixed; background: rgba(0, 0, 0, 0.8); right: 0; width: 73px; height: 100%; top: 0; color: #FFF; float: right; z-index: 9; overflow-y: auto}
    .start a img {border: 0; border-bottom: 0; opacity: 0.7; margin-bottom: 6px}
    .start a img:last-child {border: 0; border-bottom: 0; opacity: 0.7; margin-bottom: 0}
    .start a:hover img {border-bottom: 0 !important; opacity: 1; background: none}

    È consigliabile non modificare i parametri .start e .start:hover (solo larghezza del menù), è possibile invece modificare le altre tre classi a piacimento.

    Codice HTML --> In Cima al Sito
    HTML
    <!-- Inizio Menu Start -->
    <!-- Div con funzioni per aprire il menu NON TOCCARE -->
    <div class="start" id="start" onmouseover="document.getElementById('clock').style.display = 'block'; if(document.getElementById('start').style.right = '0px')document.getElementById('aprimenu').style.right = '-73px';" onmouseout="document.getElementById('start').style.right = '-73px'; document.getElementById('aprimenu').style.right = '0px'; document.getElementById('clock').style.display = 'none';">
    <!-- Scritta per aprire il menu -->
    <div id="aprimenu" style="font-size: 20px; position: fidex; right: 0; top: 250px; z-index: -1; position: fixed; transition:all 0.3001s ease-in-out; -webkit-transition:all 0.3001s ease-in-out; -moz-transition:all 0.3001s ease-in-out; -o-transition:all 0.3001s ease-in-out; background: rgba(0, 0, 0, 0.7); padding-top: 20px; padding-bottom: 20px; padding-left: 10px; padding-right: 5px; line-height: 30px">A<br>p<br>r<br>i</div>
    <!-- Inizio Icone Menu -->
    CONTENUTO</div>
    <!-- Orologio -->
    <div style="position: fixed; left: 100px; bottom: 30px; z-index: 9; display: none; transition:all 0.3001s ease-in-out; -webkit-transition:all 0.3001s ease-in-out; -moz-transition:all 0.3001s ease-in-out; -o-transition:all 0.3001s ease-in-out; " id="clock"><iframe src="http://codelyokoserver.altervista.org/Images/Skin05/start/orologio.html" width="300px" height="80px" scrolling="no" frameborder="0"></iframe></div>
    <!-- Fine Menu Start --> </div>

    Al posto di Apri potete mettere una scritta o un'immagine a vostro piacimento.

    In caso di scritta ricordarsi di andare a capo ad ogni lettera
    HTML
    <br>
    come per il codice del menu laterale fornito da forumfree.

    Al posto di contenuto inserire il contenuto del menù.
    Se non volete l'orologio rimuovete:
    HTML
    <!-- Orologio -->
    <div style="position: fixed; left: 100px; bottom: 30px; z-index: 9; display: none; transition:all 0.3001s ease-in-out; -webkit-transition:all 0.3001s ease-in-out; -moz-transition:all 0.3001s ease-in-out; -o-transition:all 0.3001s ease-in-out; " id="clock"><iframe src="http://codelyokoserver.altervista.org/Images/Skin05/start/orologio.html" width="300px" height="80px" scrolling="no" frameborder="0"></iframe></div>


    Informazioni
    Il codice non è compatibile con browser vecchi perché è un effetto basato su transizioni css3 quindi chi possiede un browser antico vedrà l'effetto d'apertura "di botto, a scatto".
    Nella prossima versione sarà possibile inserire il cerca nel menù.
    A breve anche il generatore. :sisi:

    Credits
    Il ForumFree Magazine non pretende crediti obbligatori con link e banner da inserirsi sul vostro forum. Tuttavia, dal momento che il codice ha richiesto uno sforzo non indifferente, chiunque volesse inserirli può trovarli qui di seguito (è fatto invece severo divieto di rimuovere i crediti presenti nel codice):
    HTML
    <a href="http://ffmagazine.forumfree.it/?t=64647420">Menu Start</a> creato da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=7150970">Prince William</a>


    E' possibile, come indicato nei termini di utilizzo, ridistribuire questa guida sui vostri forum lasciandone inalterati integrità e contenuti/crediti ed inserendo il seguente codice in fondo al messaggio:
    HTML
    <div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><a title="Menù Start" href="http://ffmagazine.forumfree.it/?t=64647420"><b>Menù Start</b></a>
    Realizzata da <a href="http://ffmagazine.forumfree.it/?act=Profile&MID=7150970">Prince William</a> del <a title="Forumfree Magazine - Stai al passo con Forumfree!" href="http://ffmagazine.forumfree.it/"><b>ForumFree Magazine</b></a>.
    Guida rilasciata sotto una <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Licenza Creative Commons 3.0</a>.</div>

    Menù Start
    Realizzata da Prince William del ForumFree Magazine.
    Guida rilasciata sotto una Licenza Creative Commons 3.0.


    Edited by El Gringo 89 - 27/1/2013, 23:58
     
    Top
    .
  2. THE_DARK_KING
         
     
    .

    User deleted


    Grazie William. Script utile, pratico ed interessante.

    L'ho rielaborato inserendo la funzione cerca ed altre.... Se sei interessato pubblico qui il codice.
     
    Top
    .
  3. Prince William
         
     
    .

    User deleted


    No grazie, ci penso io uscirà insieme al generatore per il codice (spero entro domenica, compiti permettendo :))
     
    Top
    .
  4. THE_DARK_KING
         
     
    .

    User deleted


    Ok. E sarà diverso da quello visibile sul mio forum? O sarà lo stesso form?
     
    Top
    .
  5. Prince William
         
     
    .

    User deleted


    Non lo so non ho ancora iniziato a fare il codice :asd:

    Se vi sembra povero il menù è solo perché non ci sono icone, personalizzato è un ottimo script! ;)
     
    Top
    .
  6. THE_DARK_KING
         
     
    .

    User deleted


    Ok, comunque ti consiglio l'utilizzo di javascript

    Invece poi sul mio forum ho inserito il codice che tu dici d'inserire in cima nel fondo. Ma l'effetto è lo stesso.
     
    Top
    .
  7.      
     
    .
    Avatar

    Advanced Member

    Group
    Member
    Posts
    1,252
    Activity Level
    0
    Location
    Rovigo

    Status
    Offline
    Per chi come me è impedito con HTML puoi mettere per favore già alcuni contenuti predefiniti come Facebook, Twitter e Google+1? :sisi:
    Comunque molto carino, complimenti ^_^
     
    Top
    .
  8. Prince William
         
     
    .

    User deleted


    Vedrai che con il generatore sarà tutto più facile :)
     
    Top
    .
  9. Shadôw
         
     
    .

    User deleted


    Carino come effetto.
    Grazie Prince ^^
     
    Top
    .
  10. THE_DARK_KING
         
     
    .

    User deleted


    Prince ti consiglio di inserire anche come mettere il menu a sinistra.

    Ecco un esempio.

    @xStef ecco il mio forum in cui ho applicato vari effetti.
     
    Top
    .
  11. Prince William
         
     
    .

    User deleted


    Sarà tutto presente nel generatore, per favore ti puoi non impicciare? :)
    Tutte queste opzioni saranno disponibili nel generatore, questa è una versione base.

    Detto sinceramente stai aiutando tutti a cadere piuttosto che ad alzarsi :) Visto che il codice è mio e che ho pubblicato una base e che ho detto che sarà presto disponibile il generatore con tutte le funzioni sei pregato di non interferire, grazie
     
    Top
    .
  12. THE_DARK_KING
         
     
    .

    User deleted


    Ok...scusa se ti volevo dare una mano...

    Voglio solo farvi comprendere il potenziale dello script di William, utilissimo.

    Guardate come l'ho utilizzato xD

    William ho un problema con lo script. In pratica la prima immagine che ho inserito nel menu che hai creato non si sovrappone al menuwrap e quindi ogni volta che ci passo sopra si apre il menuwrap...

    Edited by THE_DARK_KING - 17/1/2013, 16:43
     
    Top
    .
  13. THE_DARK_KING
         
     
    .

    User deleted


    Segnalo il fatto che se la risoluzione è bassa e vengono messi più elementi nel menu laterale, alcuni di essi non vengano visti. Quindi consiglio l'utilizzo dell'overflow o una cosa del genere. William plz rispondi
     
    Top
    .
  14. Prince William
         
     
    .

    User deleted


    In che senso non vengono visti? In quale circostanza? In quale rigo? Linka il problema
     
    Top
    .
  15. THE_DARK_KING
         
     
    .

    User deleted


    Sul mio forum ho inserito il menu(come ben sai) e se hai una risoluzione bassa non si vedono tutte le img contenute nel menu.

    Mia risoluzione: 1366x768
     
    Top
    .
42 replies since 16/1/2013, 18:28   3868 views
  Share  
.
Top