NashChristian
09-13-2010, 04:47 PM
Hello,
I've been advised to start a help thread on this, so here it is. What I'm trying to do is combine two navbar mods from the following articles:
[HOW TO - vB4] Create a New Tab in the navbar by Lynne (https://vborg.vbsupport.ru/showthread.php?t=226914)
[HOW TO - vB4] How to Add Drop Down Navigation Items to the Navbar by Shelby (https://vborg.vbsupport.ru/showthread.php?t=228338)
What I'm trying to accomplish is to create NavTabs with drop-down menus, where the tab highlights when hovered over or selected (like the default tab behavior), that also displays the arrow indicating the drop-down menu, and the arrow remains the same color as the text, so it maintains visibility. In addition to this, I'd like to include different navbar subnav menus for the major areas of the website (forums, gallery, event calendar, etc...).
What Lynne's mod doesn't have that I need:
Drop-down menus on the TABS themselves.
What Shelby's mod doesn't have that I need:
The tab does not highlight when hovered over or selected.
There are no tablinks subnav replacements.
I greatly appreciate the work of both Lynne and Shelby in providing these tutorials! I just need some help adapting these for my site.
I've installed three separate tabs on my test site, using the three different methods:
GALLERY (Using Lynne's Method)
TOOLS (Using Shelby's Method)
EVENT CALENDAR (Combining the Two Methods)
The EVENT CALENDAR is the method I will be discussing in the rest of this thread and providing the code for. I'm using the two-step process taught by Shelby, with a PLUGIN and corresponding TEMPLATE. Here is the code that I am currently using:
PLUGIN:
Hook Location: process_templates_complete
Title: NavTab - Calendar
$tabselected = '';
$tablinks = '';
if (THIS_SCRIPT == 'calendar')
{
$vbulletin->options['selectednavtab']='Event Calendar';
$tabselected = ' selected';
$tablinks = ' <ul class="floatcontainer">
<li><a href="calendar.php?do=add&type=range&c=1">Add New Event</a></li>
</ul> ';
}
global $template_hook;
$newTemplate = vB_Template::create('navbar_tab_calendar');
$template_hook['navtab_end'] .= '<li class="popupmenu' . $tabselected . '">' . $newTemplate->render() . $tablinks . '</li>';
TEMPLATE:
Title: navbar_tab_calendar
<a href="javascript://" class="popupctrl navtab">Event Calendar <img src="{vb:stylevar imgdir_misc}/arrow.png" style="vertical-align: middle; margin-right: -5px;" /></a>
<ul class="popupbody popuphover" style="color:{vb:stylevar navbar_selected_popup_body_a_Color}">
<li><a href="calendar.php?c=1&do=displaymonth" style="text-indent: 0px;">Monthly View</a></li>
<li><a href="calendar.php?c=1&do=displayweek">Weekly View</a></li>
<li><a href="calendar.php?do=add&type=range&c=1">Add New Event</a></li>
</ul>
Here is a link to my TEST SITE (http://test.nashvillechristian.com) (v4.0.6)
It is .htaccess Password Protected (as required by vB).
Credentials are listed below:
.htaccess Username: test
.htaccess Password: help
This will only remain accessible until I find a solution, but I will post any updated code later in this thread so that others can benefit from this as well. This is the only test site that I'm using, so be sure to check the latest post in this thread to ensure there have not been modifications to this code.
Here are the PROBLEMS that I am currently noticing with this code:
The submenu isn't working correctly, it is displaying directly beneath the button instead of left aligned. When I add additional subnav links, they list vertically instead of horizontally.
The drop-down ARROW is NOT the same color as the text. So when the tab is highlighted, the arrow becomes almost invisible.
You have to CLICK on the button to activate the drop-down menu, insead of hovering triggering it.
Here is a Screen Shot:
http://nashvillechristian.com/images/support/vb_4-0-6_navtab_1.jpg
ANY and ALL help would be greatly appreciated!
Thanks!
:D Jeff
I've been advised to start a help thread on this, so here it is. What I'm trying to do is combine two navbar mods from the following articles:
[HOW TO - vB4] Create a New Tab in the navbar by Lynne (https://vborg.vbsupport.ru/showthread.php?t=226914)
[HOW TO - vB4] How to Add Drop Down Navigation Items to the Navbar by Shelby (https://vborg.vbsupport.ru/showthread.php?t=228338)
What I'm trying to accomplish is to create NavTabs with drop-down menus, where the tab highlights when hovered over or selected (like the default tab behavior), that also displays the arrow indicating the drop-down menu, and the arrow remains the same color as the text, so it maintains visibility. In addition to this, I'd like to include different navbar subnav menus for the major areas of the website (forums, gallery, event calendar, etc...).
What Lynne's mod doesn't have that I need:
Drop-down menus on the TABS themselves.
What Shelby's mod doesn't have that I need:
The tab does not highlight when hovered over or selected.
There are no tablinks subnav replacements.
I greatly appreciate the work of both Lynne and Shelby in providing these tutorials! I just need some help adapting these for my site.
I've installed three separate tabs on my test site, using the three different methods:
GALLERY (Using Lynne's Method)
TOOLS (Using Shelby's Method)
EVENT CALENDAR (Combining the Two Methods)
The EVENT CALENDAR is the method I will be discussing in the rest of this thread and providing the code for. I'm using the two-step process taught by Shelby, with a PLUGIN and corresponding TEMPLATE. Here is the code that I am currently using:
PLUGIN:
Hook Location: process_templates_complete
Title: NavTab - Calendar
$tabselected = '';
$tablinks = '';
if (THIS_SCRIPT == 'calendar')
{
$vbulletin->options['selectednavtab']='Event Calendar';
$tabselected = ' selected';
$tablinks = ' <ul class="floatcontainer">
<li><a href="calendar.php?do=add&type=range&c=1">Add New Event</a></li>
</ul> ';
}
global $template_hook;
$newTemplate = vB_Template::create('navbar_tab_calendar');
$template_hook['navtab_end'] .= '<li class="popupmenu' . $tabselected . '">' . $newTemplate->render() . $tablinks . '</li>';
TEMPLATE:
Title: navbar_tab_calendar
<a href="javascript://" class="popupctrl navtab">Event Calendar <img src="{vb:stylevar imgdir_misc}/arrow.png" style="vertical-align: middle; margin-right: -5px;" /></a>
<ul class="popupbody popuphover" style="color:{vb:stylevar navbar_selected_popup_body_a_Color}">
<li><a href="calendar.php?c=1&do=displaymonth" style="text-indent: 0px;">Monthly View</a></li>
<li><a href="calendar.php?c=1&do=displayweek">Weekly View</a></li>
<li><a href="calendar.php?do=add&type=range&c=1">Add New Event</a></li>
</ul>
Here is a link to my TEST SITE (http://test.nashvillechristian.com) (v4.0.6)
It is .htaccess Password Protected (as required by vB).
Credentials are listed below:
.htaccess Username: test
.htaccess Password: help
This will only remain accessible until I find a solution, but I will post any updated code later in this thread so that others can benefit from this as well. This is the only test site that I'm using, so be sure to check the latest post in this thread to ensure there have not been modifications to this code.
Here are the PROBLEMS that I am currently noticing with this code:
The submenu isn't working correctly, it is displaying directly beneath the button instead of left aligned. When I add additional subnav links, they list vertically instead of horizontally.
The drop-down ARROW is NOT the same color as the text. So when the tab is highlighted, the arrow becomes almost invisible.
You have to CLICK on the button to activate the drop-down menu, insead of hovering triggering it.
Here is a Screen Shot:
http://nashvillechristian.com/images/support/vb_4-0-6_navtab_1.jpg
ANY and ALL help would be greatly appreciated!
Thanks!
:D Jeff