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

Creare una drop-down navbar


Creare una drop-down navbar

Messaggio Da Ospite il 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



Ospite
Ospite


Ospite è stato ringraziato dall'autore di questo topic.

Re: Creare una drop-down navbar

Messaggio Da Ospite il Mer 11 Gen 2012, 17:06

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

Ciao :zen:

Ospite
Ospite


Ospite è stato ringraziato dall'autore di questo topic.

Re: Creare una drop-down navbar

Messaggio Da Insane il Lun 16 Gen 2012, 09:43

Abbiamo l'approvazione?
avatar
Insane
Aiutattivo
Aiutattivo

Sesso : Maschile
Età : 25
Messaggi : 3924
Località : Varese


Vedere il profilo dell'utente http://aiuto.forumattivo.it/
Insane è stato ringraziato dall'autore di questo topic.

Re: Creare una drop-down navbar

Messaggio Da Ospite il 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.

Ospite
Ospite


Ospite è 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