Menu animato ( jquery )


Astuzia Menu animato ( jquery )

Messaggio Da the crow il Dom 10 Ott 2010 - 0:31

Menu animato ( jquery )


> [wow]custom:Dove inserirlo,,Pannello > Visualizzazione > Prima pagina > Generalita' > Messaggio sull'indice....Contenuto del messassio,000000/t[/wow]

Prima di tutto spieghiamo di cosa stiamo parlando:
la jquery e' una libreria javascript formata da una serie di funzioni CSS HTML e QUERY per le diverse operazioni che si possono effettuare con questo strumento..come e' divisa


Gli script

Codice:
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

 <script type="text/javascript"src="http://addthis.com//cms-content/images/gallery/fisheye-iutil.min.js"></script>

Il css

Codice:
<style type="text/css">
.dock-container { position: relative; top: -8px; height: 50px; padding-left: 20px; } 
a.dock-item { display: block; width: 50px; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; } 
.dock-item span { display: none; padding-left: 20px; } 
.dock-item img { border: 0; margin: 5px 10px 0px; width: 100%; } 
</style>

Lo script con la funzione che vogliamo che svolga

Codice:
<script type="text/javascript">
 jQuery.noConflict()(function () { 
    // Dock initialize 
    jQuery.noConflict()('#dock').Fisheye( 
        { 
            maxWidth: 30, 
            items: 'a', 
            itemsText: 'span', 
            container: '.dock-container', 
            itemWidth: 50, 
            proximity: 60, 
            alignment : 'left', 
            valign: 'bottom', 
            halign : 'center' 
        } 
    ); 
}); 
</script>

I div per il collegamento immagini link con la funzione

Codice:
<DIV id=dock>  <DIV class=dock-container> 
        <A class=dock-item href="url "><SPAN>nome1</SPAN><IMG alt=home src="immagine"></A> 
        <A class=dock-item href="url"><SPAN>nome2</SPAN><IMG alt=contact src="immagine"></A> 
    </DIV>

se volete aggiungere altre stringhe non dovete fare altro copia/incolla con quelle gia presenti

detto questo una volta copilato tutto come preferite..non dovete far altro che incollarlo sull'indice del forum . Vederlo cosi sembra molto difficile ..ma vedrete che con i link che seguono sotto la cosa e' piu facile dirla che farla...visto che vi viene messo tutto a disposizione..
questo sono due esempi :

esempio Menu orizzontale

-Attenzione queste funzioni contengono diversi script...inseire molti script sul forum puo' creare dei problemi.Lo staff non si assume nessuna responsabilita' per i malfunzionamenti dovuti a una scorretta gestione del codice.

Tutoriale da :The crow
Copyrigth ę FORUMATTIVO.COM




Ultima modifica di the crow il Dom 5 Giu 2011 - 15:42, modificato 8 volte
avatar
the crow
Veterano dello staff
Veterano dello staff

Sesso : Maschile
EtÓ : 26
Messaggi : 8797
LocalitÓ : Roma


Vedi il profilo dell'utente http://aiuto.forumattivo.it/forum
the crow Ŕ stato ringraziato dall'autore di questo topic.

Astuzia Re: Menu animato ( jquery )

Messaggio Da the crow il Dom 10 Ott 2010 - 16:49

puoi inserire solo url di pagine e immagini nei div...il resto non lo toccare

< DIV id=dock > < DIV class=dock-container>
< A class=dock-item href="url delle pagina">Nome pagina < / SPAN >< IMG alt=home src="url dell'immagine" >< / A >
< A class=dock-item href="url">nome2< / SPAN >< IMG alt=contact src="immagine" >< / A >
< / DIV >

attenzione a non modificare id = dock








avatar
the crow
Veterano dello staff
Veterano dello staff

Sesso : Maschile
EtÓ : 26
Messaggi : 8797
LocalitÓ : Roma


Vedi il profilo dell'utente http://aiuto.forumattivo.it/forum
the crow Ŕ stato ringraziato dall'autore di questo topic.

Astuzia Versione phpbb3 punbb

Messaggio Da Spacca il Ven 15 Ott 2010 - 13:48

DEMO

inserire il codice nel CSS
Spoiler:
Codice:
.stack { position: fixed; bottom: 15px; right: 20px; } 
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; } 
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; } 
.stack ul li { position: absolute; } 
.stack ul li img { border: 0; } 
.stack ul li span { display: none; } 
.stack .openStack li span { 
    font-family: "Lucida Grande", Lucida, Verdana, sans-serif; 
    display:block; 
    height: 14px; 
    position:absolute; 
    top: 17px; 
    right:60px; 
    line-height: 14px; 
    border: 0; 
    background-color:#000; 
    padding: 3px 10px; 
    border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    color: #fcfcfc; 
    text-align: center; 
    text-shadow: #000 1px 1px 1px; 
    opacity: .85; 
    filter: alpha(opacity = 85); 

 
/* IE Fixes */ 
.stack { _position: absolute; } 
.stack ul { _z-index:-1; _top:-15px; } 
.stack ul li { *right:5px; }

poi andare in PDA > visualizzazione > generale > overall_footer

dopo questo codice:
<
Codice:
strong>{ADMIN_LINK}</strong>


inserire questo:

Codice:
<script src="http://dsprime.webs.com/Stacker.js"></script>

<div class="stack"> 
    <img src="http://i67.servimg.com/u/f67/14/87/55/48/stack110.png" alt="stack"> 
<ul id="stack"> 
<li><a href="http://www.google.com/"><span>Aperture</span><img src="http://i67.servimg.com/u/f67/14/87/55/48/apertu10.png" alt="Aperature"></a></li> 
<li><a href="http://www.google.com/"><span>All Examples</span><img src="http://i67.servimg.com/u/f67/14/87/55/48/photos10.png" alt="Photoshop"></a></li> 
<li><a href="http://www.google.com/"><span>Example 3</span><img src="http://i67.servimg.com/u/f67/14/87/55/48/safari10.png" alt="Safari"></a></li> 
<li><a href="http://www.google.com/"><span>Example 2</span><img src="http://i67.servimg.com/u/f67/14/87/55/48/coda110.png" alt="Coda"></a></li> 
<li><a href="http://www.google.com/"><span>Example 1</span><img src="http://i67.servimg.com/u/f67/14/87/55/48/finder10.png" alt="Finder"></a></li> 
</ul> 
</div>
avatar
Spacca
Veterano dello staff
Veterano dello staff

Sesso : Maschile
EtÓ : 21
Messaggi : 3007
LocalitÓ : Varese


Vedi il profilo dell'utente http://mywiki.tk
Spacca Ŕ stato ringraziato dall'autore di questo topic.

Astuzia Re: Menu animato ( jquery )

Messaggio Da the crow il Lun 18 Ott 2010 - 21:19

quale forum .....non capisco.
avatar
the crow
Veterano dello staff
Veterano dello staff

Sesso : Maschile
EtÓ : 26
Messaggi : 8797
LocalitÓ : Roma


Vedi il profilo dell'utente http://aiuto.forumattivo.it/forum
the crow Ŕ stato ringraziato dall'autore di questo topic.

Astuzia Re: Menu animato ( jquery )

Messaggio Da Valerio il Lun 18 Ott 2010 - 22:12

Io sono riuscito solo a fare il menu a cestino :) il resto no... mi piace molto il menu orizzontale
avatar
Valerio
**
**

Sesso : Maschile
EtÓ : 20
Messaggi : 98
LocalitÓ : Ardea


Vedi il profilo dell'utente http://aiuto.forumattivo.it/forum.htm
Valerio Ŕ stato ringraziato dall'autore di questo topic.

Astuzia Re: Menu animato ( jquery )

Messaggio Da Spacca il Mar 19 Ott 2010 - 17:11

non ho capito comunque!
avatar
Spacca
Veterano dello staff
Veterano dello staff

Sesso : Maschile
EtÓ : 21
Messaggi : 3007
LocalitÓ : Varese


Vedi il profilo dell'utente http://mywiki.tk
Spacca Ŕ stato ringraziato dall'autore di questo topic.

Astuzia Re: Menu animato ( jquery )

Messaggio Da Diego il Mar 19 Ott 2010 - 17:15

@the crow ha scritto:quale forum .....non capisco.
quelle librerie con quel codice vengono caricate due volte.. Rolling Eyes
avatar
Diego
Veterano dello staff
Veterano dello staff

Sesso : Maschile
EtÓ : 26
Messaggi : 2249
LocalitÓ : arezzo


Vedi il profilo dell'utente http://www.folliacity.it/blog-1.html
Diego Ŕ stato ringraziato dall'autore di questo topic.

Astuzia Re: Menu animato ( jquery )

Messaggio Da the crow il Mar 19 Ott 2010 - 18:45

da cosa lo capisci che viene caricatro due volte ?
e da cosa viene caricato due volte ?.....cerca di fare un discorso completo cosi capiamo quello che vuoi dire Very Happy
avatar
the crow
Veterano dello staff
Veterano dello staff

Sesso : Maschile
EtÓ : 26
Messaggi : 8797
LocalitÓ : Roma


Vedi il profilo dell'utente http://aiuto.forumattivo.it/forum
the crow Ŕ stato ringraziato dall'autore di questo topic.

Astuzia Re: Menu animato ( jquery )

Messaggio Da Diego il Mer 20 Ott 2010 - 14:46

nel codice sorgente di ogni forum puoi trovare le librerie e vengono caricate con questo codice..
Codice:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
infatti anche se non lo inserisci il men¨ funziona ugualmente nel forum.. Very Happy
avatar
Diego
Veterano dello staff
Veterano dello staff

Sesso : Maschile
EtÓ : 26
Messaggi : 2249
LocalitÓ : arezzo


Vedi il profilo dell'utente http://www.folliacity.it/blog-1.html
Diego Ŕ stato ringraziato dall'autore di questo topic.

Astuzia Re: Menu animato ( jquery )

Messaggio Da the crow il Mer 20 Ott 2010 - 21:26

vero..quello che dici...solo che in fase di prova non funziona senza quello script ...e non funziona neanche sul forum per il problema$
http://tifosigialloverdi.forumattivo.com/prova-h182.htm

poi se tutti i forum come dici tu hanno lo script per richiamare le librerie
perche' chi lo ha scvritto lo mette....ho non tutti i forum usano lo script o si e' rinc....



se non ti fidi nei link che ho messo c'e la fonte

avatar
the crow
Veterano dello staff
Veterano dello staff

Sesso : Maschile
EtÓ : 26
Messaggi : 8797
LocalitÓ : Roma


Vedi il profilo dell'utente http://aiuto.forumattivo.it/forum
the crow Ŕ stato ringraziato dall'autore di questo topic.

Astuzia Re: Menu animato ( jquery )

Messaggio Da Ookami999 il Lun 17 Gen 2011 - 3:26

dove devo inserire i vari codici per il men¨ a cestino??

Per domande o chiarimenti Gestire l'aspetto del forum

passa il mouse sulla scritta "dove inserirlo" l'ho modificato
avatar
Ookami999
Sono un nuovo membro :)

Sesso : Maschile
EtÓ : 26
Messaggi : 25
LocalitÓ : Brescia


Vedi il profilo dell'utente http://e-makigames.italiaforum.net/
Ookami999 Ŕ stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum