Problema inserimento menu jQuery..

Ciao ragazzi! Volevo inserire il menu a cestino jQuery ma non trovo il codice qui.. volevo l'effetto come questo..

Qualcuno mi può dare il codice? preferibilmente già fatto che non riesco a modificare molto bene questi codici.. (PHBB3) Grazie mille

Ciao,

dunque questo è il codice CSS da inserire:

Codice:

.stack { position: fixed; bottom: 5px; right: 25px; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
.stack * { margin: 0; padding: 0; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; margin:0; 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 {
display: block;
position: absolute;
top: 17px;
right: 60px;
height: 14px;
line-height: 14px;
background-color:#000;
border: 0;
padding: 3px 10px;
text-align: center;
text-shadow: #000 1px 1px 1px;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-size: 12px;
color: #fcfcfc;
border-radius: 10px;
opacity: .85;
filter: alpha(opacity = 85);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

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

Ora devi semplicemente andare in PDA > Generale > Promozione del forum > Motori di ricerca > Mede supplementari >
Fatto questo scegliete: Aggiungere un javascript ed inserite questi link (prima uno, poi create un nuovo foglio ed inserite l'altro)

Codice:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="http://www.yourjavascript.com/134446808/stack1.js"></script>

In seguito crea un nuovo codice javascript (Pannello di gestione dei codici javascript) e aggiungi questo in tutte le pagine (o dove vuoi che compaia il menu):

Codice:

jQuery(document).ready(function() {
jQuery('#phpbb').after('<div class="stack">
<img src="http://www.addthis.com/cms-content/images/gallery/stack.png" alt="stack"/>
<ul id="stack">

<li><a href="Link5.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/facebook.png" alt="nome" /></a></li>

<li><a href="Link4.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/stumbleupon.png" alt="nome" /></a></li>

<li><a href="Link3.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/reddit.png" alt="nome" /></a></li>

<li><a href="Link2.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/digg.png" alt="nome" /></a></li>

<li><a href="Link1.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/addthis.png" alt="nome" /></a></li>
</ul></div>');
});

Fammi sapere se funziona e se così hai risolto

Grazie per i codici ma come faccio a far in modo che se per esempio io clicco sull'icona di facebook condivide la pagina che si sta visitando su facebook?

La funziona di cui parli è disponibile anche nella toolbar di forumattivo

Ma se vuoi farlo anche con questo menu basta che aggiungi questo pezzo insieme agli altri:

Codice:

<li><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Condividi su Facebook</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></li>

niko non riesco ad inserirlo.. non mi appare.. mi puoi aiutare?

Puoi mettermi qui il codice html che hai inserito?

nel css ho messo:

Codice:

.stack { position: fixed; bottom: 5px; right: 25px; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
.stack * { margin: 0; padding: 0; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; margin:0; 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 {
display: block;
position: absolute;
top: 17px;
right: 60px;
height: 14px;
line-height: 14px;
background-color:#000;
border: 0;
padding: 3px 10px;
text-align: center;
text-shadow: #000 1px 1px 1px;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-size: 12px;
color: #fcfcfc;
border-radius: 10px;
opacity: .85;
filter: alpha(opacity = 85);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

/* IE Fixes */

nei motori di ricerca ho fatto 2 codici separati:

Codice:

<script src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>

Codice:

<script src="http://www.yourjavascript.com/134446808/stack1.js">
</script>

nel javascript ho messo:

Codice:

jQuery(document).ready(function() {
jQuery('#phpbb').after('<div class="stack">
<img src="http://www.addthis.com/cms-content/images/gallery/stack.png" alt="stack"/>
<ul id="stack">

<li><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php"><span>Facebook</span><img src="http://www.addthis.com/cms-content/images/gallery/facebook.png" alt="Facebook" /></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></li>

<li><a href="Link4.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/stumbleupon.png" alt="nome" /></a></li>

<li><a href="Link3.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/reddit.png" alt="nome" /></a></li>

<li><a href="Link2.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/digg.png" alt="nome" /></a></li>

<li><a href="Link1.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/addthis.png" alt="nome" /></a></li>
</ul></div>');
});

ti prego aiutami

EDIT: poi il codice javascript lo devo modificare con i vari link.. potresti darmi anche quelli come quello di facebook? grazie

Ciao,

hai risolto?
In caso contrario puoi mettermi uno screen del risultato che hai ottenuto?

Ti posto qui di seguito il codice di questo effetto, però è configurato per il mio forum:

Codice:

<style type="text/css">
.stack { position: fixed; bottom: 5px; right: 25px; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
.stack * { margin: 0; padding: 0; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; margin:0; 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 {
display: block;
position: absolute;
top: 17px;
right: 60px;
height: 14px;
line-height: 14px;
background-color:#000;
border: 0;
padding: 3px 10px;
text-align: center;
text-shadow: #000 1px 1px 1px;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-size: 12px;
color: #fcfcfc;
border-radius: 10px;
opacity: .85;
filter: alpha(opacity = 85);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li {*right:5px;}
.stack a {text-decoration:none}
</style><div class="stack">
<img src="http://www.addthis.com/cms-content/images/gallery/stack.png" alt="stack"/>
<ul id="stack">

<li><a href="https://www.facebook.com/OneHitcs"><span>Facebook</span><img src="http://www.addthis.com/cms-content/images/gallery/facebook.png" alt="nome" /></a></li>

<li><a href="http://www.stumbleupon.com/su/502fgn/:1Lk9MJtvH:eRPkof-i/onehitcs.forumattivo.com/"><span>StrumbleUpon</span><img src="http://www.addthis.com/cms-content/images/gallery/stumbleupon.png" alt="nome" /></a></li>

<li><a href="http://it.reddit.com/r/gaming/comments/1eknsf/onehitcs_best_games_community/"><span>Reddit</span><img src="http://www.addthis.com/cms-content/images/gallery/reddit.png" alt="nome" /></a></li>
</ul>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="http://www.yourjavascript.com/134446808/stack1.js"></script>

Non è completo, ho tolto la condivisione di AddThis e Digg.
Configuralo con le tue pagine ed hai finito.

P.S: Sconsiglio di inserire il seguente codice perché va in contrasto con la ToolBar facendola scomparire.

no, non ho risolto.. Nello screen non viene niente perché non compare.. Teenpark dove lo devo mettere quel codice?

Inseriscilo in:
Pannello d'Amministrazione ---> Visualizzazione ---> Prima Pagina ---> Generalità ---> Messaggio sull'Indice ---> Contenuto del Messaggio

Fammi sapere.

Si si mi funziona peccato che si vede solo nell'indice..

Se vuoi che si veda su tutte le pagine puoi benissimo risolvere, se hai PhPBB3 puoi inserirlo come annuncio in tutte le pagine tramite il Pannello d'Amministrazione, se invece hai PhPBB2 o PunBB dal Template.