Aiuto e supporto ai creatori di forum Forumattivo. Creare un forum e amministrarlo. Scopri nuove guide, nuovi tutoriali, nuove astuzie nel supporto di Forumattivo

Creare una drop-down navbar

Forum dei Forum: Aiuto per Forumattivo ::  Forumattivo & Voi ::  :: Tutorial


Creare una drop-down navbar Empty Creare una drop-down navbar

Messaggio Da Ospite Mer 11 Gen 2012 - 17:05

Creare un menù drop-down

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. :bene:
[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

avatar
Ospite
Ospite


Ospite è stato ringraziato dall'autore di questo topic.

Creare una drop-down navbar Empty Re: Creare una drop-down navbar

Messaggio Da Ospite Mer 11 Gen 2012 - 17:06

Attenzione
Prima di spostare questo tutorial attendere mia risposta. Ho appena chiesto l'approvazione dell'autore.

Ciao :zen:
avatar
Ospite
Ospite


Ospite è stato ringraziato dall'autore di questo topic.

Creare una drop-down navbar Empty Re: Creare una drop-down navbar

Messaggio Da Insane Lun 16 Gen 2012 - 9:43

Abbiamo l'approvazione?
Insane
Insane
Veterano dello staff
Veterano dello staff

Sesso : Maschio
Età : 32
Messaggi : 4178
Località : Varese

https://aiuto.forumattivo.it/
Insane è stato ringraziato dall'autore di questo topic.

Creare una drop-down navbar Empty Re: Creare una drop-down navbar

Messaggio Da Ospite Lun 16 Gen 2012 - 14:00

Mr Mario ha scritto:Hi,

Sure, As long as his name and where the tutorial was from is posted and Dions name is there somewhere.
avatar
Ospite
Ospite


Ospite è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

Forum dei Forum: Aiuto per Forumattivo ::  Forumattivo & Voi ::  :: Tutorial

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