Da Ospite il Mer 11 Gen 2012, 17:05
Ciao,
con questo tutorial potrai rivoluzionare la tua barra di navigazione rendendola come un drop-menù (un menu cadente)
Questo tutorial funziona solamente se da PDA > Visualizzazione > Indice & Navigazione > Mostra solo immagini sulla navbar > SI altrimenti non funzionerà.
STEP 1
Identifica la tua versione del forum ed inserisci il codice Script nel pannello Javascript e il codice CSS nel tuo foglio CSS
PhpBB3
Codice CSS: PDA--->Visualizzazione--->Colori--->Foglio di stile CSS
- Codice:
#wrap, #ddposhack {width: 90%; min-width: 990px; margin:0px auto;}
#wrap {padding: 30px 0px 0px;}
#ddposhack {position: relative;}
#ddmenu {position:fixed;top:0px;right:0px; width: 100%;}
#ddwrap {position:absolute;top:0;right:0;padding:0 6px;background:#cadceb;font-family:Tahoma;font-size:12px;text-align:center;white-space:nowrap;border-radius:0 0 6px 6px;z-index:20000}
#ddnavtoggle {cursor:pointer;height:24px;line-height:22px;font-size:14px;font-weight:bold;}
#ddnavtoggle.newpm {color:#a00;}
#ddnavlinks {padding-bottom:6px;}
#ddnavlinks a {display:block;padding:0 15px;height:20px;line-height:20px;background:#fff;}
#ddnavlinks a:hover{background:#0076b1;color:#fff;text-decoration:none;}
#search_menu {top:0px!important;left:auto!important;right:210px!important;background: #e1ebf2;}
PDA--->Moduli--->Gestione codici javascript
- Codice:
var CopyrightNotice = 'UFN(tm) - Ultimate Forumotion Navbar for phpBB3 boards. Copyright 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';
$(function() {
$('body').prepend('<div id="ddmenu"><div id="ddposhack"><div id="ddwrap"><div id="ddnavtoggle" onclick="$('#ddnavlinks').slideToggle()">Navbar Menu</div></div></div></div>');
var x=document.createElement('div');
x.style.display='none';
x.id='ddnavlinks';
var y=$('#page-header .navbar li > a').get();
var z=y.length-1;
for (i=z; i>=0; i--) {
var mtitle=y[i].childNodes[0].title;
var linktext=mtitle;
var link=y[i].getAttribute('href');
if (mtitle=='Home') {
linktext='Forum';
mtitle='Go to Forum/Index page';
}
else if (mtitle=='Portal') {
linktext='Home';
mtitle='Go to Portal/Home page';
}
else if (link.indexOf('privmsg')!=-1) {
var newpm=mtitle.split(' ');
if (newpm[2]=='no') {linktext='Inbox';}
else {
linktext='Inbox ['+newpm[2]+' New]';
document.getElementById('ddnavtoggle').className='newpm';
}
}
else if (link.indexOf('login?logout')!=-1) {
linktext='Log Out';
}
else if (mtitle=='Profile') {
linktext='UCP';
mtitle='Go to your User Control Panel';
}
else if (mtitle=='Gallery') {
mtitle='Go to Picture Gallery';
}
else if (mtitle=='FAQ') {
mtitle='Frequently Asked Questions';
}
else if (mtitle=='Memberlist') {
linktext='Member List';
mtitle='View the board member list';
}
y[i].title=mtitle;
y[i].innerHTML=linktext;
if (i==z) {x.appendChild(y[i]);}
else {x.insertBefore(y[i],x.firstChild);}
}
$(x).append($('#page-header .navbar li > a'));
$(x).find('img').remove();
$(x).append($('#search_menu'));
$('#ddwrap').append(x);
$('#page-header .navbar').remove();
});
PhpBB2 e Invision
PDA--->Visualizzazione--->Colori--->Foglio di stile CSS
- Codice:
#ipbwrapper, #ddposhack {width: 90%; min-width: 990px; margin:0px auto;}
#ipbwrapper {padding: 30px 0px 0px;}
#ddposhack {position: relative;}
#ddmenu {position:fixed;top:0px;right:0px; width: 100%;}
#ddwrap {position:absolute;top:0;right:0;padding:0 6px;background:#ced7e5;font-family:Tahoma;font-size:12px;text-align:center;white-space:nowrap;border-radius:0 0 6px 6px;z-index:20000}
#ddnavtoggle {cursor:pointer;height:24px;line-height:22px;font-size:14px;font-weight:bold;}
#ddnavtoggle.newpm {color:#a00;}
#ddnavlinks {padding-bottom:6px;}
#ddnavlinks a {display:block;padding:0 15px;height:20px;line-height:20px;background:#fff;}
#ddnavlinks a:hover{background:#303b4a;color:#fff;text-decoration:none;}
#search_menu {top:0px!important;left:auto!important;right:210px!important;background:#e4e6e9;
PDA--->Moduli--->Gestione codici javascript
- Codice:
var CopyrightNotice = 'UFN(tm) - Ultimate Forumotion Navbar for forumotion IPB2/Invision boards. Copyright 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';
$(function() {
$('body').prepend('<div id="ddmenu"><div id="ddposhack"><div id="ddwrap"><div id="ddnavtoggle" onclick="$('#ddnavlinks').slideToggle()">Navbar Menu</div></div></div></div>');
var x=document.createElement('div');
x.style.display='none';
x.id='ddnavlinks';
var y=$('#submenu li > a').get();
var z=y.length-1;
for (i=z; i>=0; i--) {
var mtitle=y[i].childNodes[0].title;
var linktext=mtitle;
var link=y[i].getAttribute('href');
if (mtitle=='Home') {
linktext='Forum';
mtitle='Go to Forum/Index page';
}
else if (mtitle=='Portal') {
linktext='Home';
mtitle='Go to Portal/Home page';
}
else if (link.indexOf('privmsg')!=-1) {
var newpm=mtitle.split(' ');
if (newpm[2]=='no') {linktext='Inbox';}
else {
linktext='Inbox ['+newpm[2]+' New]';
document.getElementById('ddnavtoggle').className='newpm';
}
}
else if (link.indexOf('login?logout')!=-1) {
linktext='Log Out';
}
else if (mtitle=='Profile') {
linktext='UCP';
mtitle='Go to your User Control Panel';
}
else if (mtitle=='Gallery') {
mtitle='Go to Picture Gallery';
}
else if (mtitle=='FAQ') {
mtitle='Frequently Asked Questions';
}
else if (mtitle=='Memberlist') {
linktext='Member List';
mtitle='View the board member list';
}
y[i].title=mtitle;
y[i].innerHTML=linktext;
if (i==z) {x.appendChild(y[i]);}
else {x.insertBefore(y[i],x.firstChild);}
}
$(x).append($('#search_menu'));
$('#ddwrap').append(x);
$('#submenu').remove();
});
PunBB
PDA--->Visualizzazione--->Colori--->Foglio di stile CSS
- Codice:
.pun, #ddposhack {width: 90%; min-width: 990px; margin:0px auto;}
.pun {padding: 30px 0px 0px;}
#ddposhack {position: relative;}
#ddmenu {position:fixed;top:0px;right:0px; width: 100%;}
#ddwrap {position:absolute;top:0;right:0;padding:0 6px;background:#ccc;font-family:Tahoma;font-size:12px;text-align:center;white-space:nowrap;border-radius:0 0 6px 6px;z-index:20000}
#ddnavtoggle {cursor:pointer;height:24px;line-height:22px;font-size:14px;font-weight:bold;}
#ddnavtoggle.newpm {color:#a00;}
#ddnavlinks {padding-bottom:6px;}
#ddnavlinks a {display:block;padding:0 15px;height:20px;line-height:20px;background:#fff;}
#ddnavlinks a:hover{background:#1f537b;color:#fff;text-decoration:none;}
#search_menu {top:0px!important;left:auto!important;right:210px!important;background: #f4f4f4;}
PDA--->Moduli--->Gestione codici javascript
- Codice:
var CopyrightNotice = 'UFN(tm) - Ultimate Forumotion Navbar for forumotion PunBB boards. Copyright 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';
$(function() {
$('body').prepend('<div id="ddmenu"><div id="ddposhack"><div id="ddwrap"><div id="ddnavtoggle" onclick="$('#ddnavlinks').slideToggle()">Navbar Menu</div></div></div></div>');
var x=document.createElement('div');
x.style.display='none';
x.id='ddnavlinks';
var y=$('#pun-navlinks li > a').get();
var z=y.length-1;
for (i=z; i>=0; i--) {
var mtitle=y[i].childNodes[0].title;
var linktext=mtitle;
var link=y[i].getAttribute('href');
if (mtitle=='Home') {
linktext='Forum';
mtitle='Go to Forum/Index page';
}
else if (mtitle=='Portal') {
linktext='Home';
mtitle='Go to Portal/Home page';
}
else if (link.indexOf('privmsg')!=-1) {
var newpm=mtitle.split(' ');
if (newpm[2]=='no') {linktext='Inbox';}
else {
linktext='Inbox ['+newpm[2]+' New]';
document.getElementById('ddnavtoggle').className='newpm';
}
}
else if (link.indexOf('login?logout')!=-1) {
linktext='Log Out';
}
else if (mtitle=='Profile') {
linktext='UCP';
mtitle='Go to your User Control Panel';
}
else if (mtitle=='Gallery') {
mtitle='Go to Picture Gallery';
}
else if (mtitle=='FAQ') {
mtitle='Frequently Asked Questions';
}
else if (mtitle=='Memberlist') {
linktext='Member List';
mtitle='View the board member list';
}
y[i].title=mtitle;
y[i].innerHTML=linktext;
if (i==z) {x.appendChild(y[i]);}
else {x.insertBefore(y[i],x.firstChild);}
}
$(x).append($('#search_menu'));
$('#ddwrap').append(x);
$('#pun-navlinks').remove();
});
Puoi modificare gli attributi (solo il contenuto) “mtitle" e "linktext”
Esempio: mtitle=”Testo” puoi cambiarlo come mtitle=”titolo”
Mtitle indica quello che appare quando passi sopra al link; linktext è il titolo vero e proprio. 
[color=red]Onde evitare equivoci il tutorial è stato postato sotto l’autorizzazione dell’autore. Sarete perseguibili per legge per infrazione del copyright.
Tutoriale pubblicato da : Spacca (versione originale)
Copyrigth © FORUMATTIVO.COM
|
Creare un forum gratis
Benvenuto a :
Creare una drop-down navbar
