Navbar Menu

Written by Dion of Dion Designs.

Installing this script/CSS will change your navbar from an ugly bar to a great-looking drop-down menu. There will be a small block fixed to the top right of the screen that says "Navbar Menu" (or whatever you want to call it), and when you click it, the navbar will drop down. Clicking the "Navbar Menu" block again will close the menu. The color of the navbar menu text will change to red (or any other color of your choosing) when a new PM is received.

The only special setup needed is to go to ACP > Display > Headers & Navigation, and make sure the "Display only images in the navbar" option is set to NO, and that every menu item on the navbar has an image, even if it's a blank image. This script will fail if you have a navbar menu item without an image. When the script and CSS are installed, your navbar images will not be displayed, though they will still be defined in the ACP. If you no longer want the navbar images, be sure to go to Pics Management and hide them. This will result in your pages loading faster.

Here is the CSS and Javascript for phpBB3:

Code:

#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;}

Code:

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();
});

Here is the CSS and Javascript for IPB2/Invision:

Code:

#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;}

Code:

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();
});

And here is the CSS and Javascript for PunBB:

Code:

.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;}

Code:

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();
});

You can alter the title tooltip and link text to whatever you want by changing the "mtitle" and "linktext" variables for each menu item.

Depending on how you have set up your board, you may want/need to change some of the values in the CSS. The width value in the first line, the first padding value in the second line, and the various background and text colors can be changed without affecting the operation of the navbar. Changing any other part of the supplied CSS is done at your own risk!

So...how is this for an enhancement? The days of the UGLY image-based forumotion navbar are numbered!

This can probably be added to phpBB2 boards, but I don't mess around with garbage, so I never checked. However, if someone modifies the script/CSS to work on a phpBB2 board, I would appreciate your posting the modifications here in the support forum so others can use it. The copyright notice makes it illegal to distribute such a phpBB2 version without my written consent, and I only consent to distribution if it is done in the forumotion English Support Forum.