Post by My Display Name on Nov 24, 2012 15:19:30 GMT -8
Justin's Dropdown Navigation Plugin
v1 Release
The following plugin allows you to add a "drop down" navigation to the navigation bar. The default links (Home, Profile, etc) were removed as we could not directly modify those so you can add whatever menu buttons you wish and choose which ones have a "dropdown"
Updated to version 2
Installing
In order to install this plugin you have to go through the regular steps to install a plugin but you also have to modify the template.
Navigate to Admin - Structure - Layout Templates - Forum Wrapper
replace lines 25-35
v1 Release
The following plugin allows you to add a "drop down" navigation to the navigation bar. The default links (Home, Profile, etc) were removed as we could not directly modify those so you can add whatever menu buttons you wish and choose which ones have a "dropdown"
Updated to version 2
New in version 2
---------------------------
-Added a separate navigation for Guests/Members. You can decide what a guest sees and what a member sees.
-Bug fixes
-The user can now change the width of the background the "Sub Links" appear on. If you want it how it was enter 150 into the field.
Notifications Preview: newnoty.PNG (11.59 KB)
-Bug fixes
-The user can now change the width of the background the "Sub Links" appear on. If you want it how it was enter 150 into the field.
Notifications Preview: newnoty.PNG (11.59 KB)
Installing
In order to install this plugin you have to go through the regular steps to install a plugin but you also have to modify the template.
Navigate to Admin - Structure - Layout Templates - Forum Wrapper
replace lines 25-35
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]" accesskey="$[navigation.menu.accesskey]">
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
With this:
this is important as it removes the default menu buttons and tells the plugin where to insert the new one. As well as if it should be displayed to a guest or a member.
If you have the v1 release installed replace <div id="droppy"></div> with if !$[current_user.is_member]}
<div id="droppy_guest"></div>
<style type="text/css">
.dropdown {
display: none;
}
</style>
{else}
<div id="droppy"></div>
<style type="text/css">
.guestnav {
display: none;
}
</style>
{/if}
Now navigation to Admin - Themes - Color and Styles - Style Sheet
and re-add this to line 269 (if you removed it in an old upgrade (v1 Beta))
#navigation-menu div.tip-holder div.tip-number { padding: 3px 7px 2px 7px; background-color: johnnynav_bar_bubble_background; .rounded-corners(johnnynav_bar_bubble_border_radius); font: johnnynav_bar_bubble_font; line-height: .8em; text-shadow: none; .box-shadow(2px, 2px, 2px, shadow_color); height: .8em; color: johnnynav_bar_bubble_text_color; }
Installing Notifications
Navigate to the "dropdown" tab in the plugin and in the field that says "ID" where you want your notification bubble to appear (I have mine appearing on the main link of "members" which is where the profile is) you must enter "messy" into that field (without quotation marks), if you don't the plugin won't recognize it and you won't have notifications.
id - The ID of the Main Link (Used for additional styling/notification installation)
Main Url - The url you want the Main Link to navigate to
Main Link - The new "menu button"
Sub Link - The dropdown "menu buttons" (displayed when menu button is hovered over)
Installing a sub link
I really couldn't think of a good way to do this so until I figure out a better way this will have to do. In the "sub link" text area you MUST insert the following in it:
<a href="URLHERE">SUBLINKHERE</a> you can add as many as you like.
How many you insert is the number of "sub link menu buttons" you have
if you still don't understand you can watch a video located here
Have fun. and if you find a problem please tell me
or if you find a bug please let me know!
Download:
Dropdown Navigation 20 (1).pbp (3.18 KB)
Preview:
preview.PNG (29 KB)
The dropdown is covering the ad, is this against the TOS?
No, I've talked to the ProBoards staff about this before back when I had this on a v4 board, I was told it was no different then scrolling down the page and covering the ad that way.
<li>
<a href="$[navigation.menu.href]" accesskey="$[navigation.menu.accesskey]">
{if !$[current_user.is_member]}
<div id="droppy_guest"></div>
<style type="text/css">
.dropdown {
display: none;
}
</style>
{else}
<div id="droppy"></div>
<style type="text/css">
.guestnav {
display: none;
}
</style>
{/if}
<div id="droppy_guest"></div>
<style type="text/css">
.dropdown {
display: none;
}
</style>
{else}
<div id="droppy"></div>
<style type="text/css">
.guestnav {
display: none;
}
</style>
{/if}
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
this is important as it removes the default menu buttons and tells the plugin where to insert the new one. As well as if it should be displayed to a guest or a member.
If you have the v1 release installed replace <div id="droppy"></div> with if !$[current_user.is_member]}
<div id="droppy_guest"></div>
<style type="text/css">
.dropdown {
display: none;
}
</style>
{else}
<div id="droppy"></div>
<style type="text/css">
.guestnav {
display: none;
}
</style>
{/if}
Now navigation to Admin - Themes - Color and Styles - Style Sheet
and re-add this to line 269 (if you removed it in an old upgrade (v1 Beta))
#navigation-menu div.tip-holder div.tip-number { padding: 3px 7px 2px 7px; background-color: johnnynav_bar_bubble_background; .rounded-corners(johnnynav_bar_bubble_border_radius); font: johnnynav_bar_bubble_font; line-height: .8em; text-shadow: none; .box-shadow(2px, 2px, 2px, shadow_color); height: .8em; color: johnnynav_bar_bubble_text_color; }
Installing Notifications
Navigate to the "dropdown" tab in the plugin and in the field that says "ID" where you want your notification bubble to appear (I have mine appearing on the main link of "members" which is where the profile is) you must enter "messy" into that field (without quotation marks), if you don't the plugin won't recognize it and you won't have notifications.
id - The ID of the Main Link (Used for additional styling/notification installation)
Main Url - The url you want the Main Link to navigate to
Main Link - The new "menu button"
Sub Link - The dropdown "menu buttons" (displayed when menu button is hovered over)
Installing a sub link
I really couldn't think of a good way to do this so until I figure out a better way this will have to do. In the "sub link" text area you MUST insert the following in it:
<a href="URLHERE">SUBLINKHERE</a> you can add as many as you like.
How many you insert is the number of "sub link menu buttons" you have
if you still don't understand you can watch a video located here
Have fun. and if you find a problem please tell me
or if you find a bug please let me know! Download:
Dropdown Navigation 20 (1).pbp (3.18 KB)
Preview:
preview.PNG (29 KB)
The dropdown is covering the ad, is this against the TOS?
No, I've talked to the ProBoards staff about this before back when I had this on a v4 board, I was told it was no different then scrolling down the page and covering the ad that way.
