Forum dei Forum: Aiuto per Forumattivo
Benvenuto sul forum di supporto di Forumattivo .



Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

Menu animato ( jquery )


Astuzia Menu animato ( jquery )

Messaggio Da the crow il Dom 10 Ott 2010, 00: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 05 Giu 2011, 15:42, modificato 8 volte
avatar
the crow
Veterano dello staff

Sesso : Maschile
Età : 25
Messaggi : 8797
Località : Roma


Vedere 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

Sesso : Maschile
Età : 25
Messaggi : 8797
Località : Roma


Vedere 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
Meritattivo
Meritattivo

Sesso : Maschile
Età : 20
Messaggi : 3007
Località : Varese


Vedere 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

Sesso : Maschile
Età : 25
Messaggi : 8797
Località : Roma


Vedere 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


Vedere 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
Meritattivo
Meritattivo

Sesso : Maschile
Età : 20
Messaggi : 3007
Località : Varese


Vedere 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

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


Vedere 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

Sesso : Maschile
Età : 25
Messaggi : 8797
Località : Roma


Vedere 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

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


Vedere 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

Sesso : Maschile
Età : 25
Messaggi : 8797
Località : Roma


Vedere 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, 03: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à : 25
Messaggi : 25
Località : Brescia


Vedere 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

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum