Main navigation in a sidebar

[Smudges]

VS Admin , Brian , pawl or any staff member question about main navigation. Is is possible to have THE main navigation in a sidebar, and if it is possible how would i go about implementing it.

i have tried using sidebar redux, but could not get it right .

[Brian]

It's possible.

Did you have a specific design in mind or an example we could go off of? It should simply be a matter of recreating the menu in the Forum Wrapper template, then using Javascript to move that menu into the sidebar.

If you don't have a specific menu design in mind, I was just going to have them in a vertical list, with hyphens before each menu option.

[Smudges]

Brian i got the idea of sidebar main navigation from another forum site graphic-force.com/index/

[Brian]

That example is perfect! I think I have something figured out for you.


In your sidebar, make a box with settings that look exactly like this. If I specify something in parenthesis, you can put whatever you want there.

Title: (anything you want can go here)
ID: side-menu-container
Style: Style 1
Content:

<div id="side-menu"></div>

Once you've saved that, go back to your admin area and select Structure > Layout Templates > Forum Wrapper. Scroll down until you find the line that says $[header] and add one or two new lines below it. Paste this on one of those new lines. You'll need to do this on every theme the sidebar plugin is enabled on.

<table id="side-menu-table" style="display: none;">
    {foreach $[navigation.menu]}
    <tr>
        <td>
            <a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
                $[navigation.menu.name]
            </a>
        </td>
    </tr>
    {/foreach}
</table>
<script type="text/javascript">
    $(document).ready(function(){
        $('#side-menu').append($('#side-menu-table'));
        $('#side-menu-table').show();
    });
</script>

And finally, add this to the bottom of Themes > Advanced Styles & CSS > Style Sheet on every theme the plugin is enabled on. You can change the padding and colors in green to your preferred hex colors.

/* Adjust these values to change the appearance
of your sidebar menu */
@side_menu_padding: 8px;
@side_menu_bg: #dddddd;
@side_menu_hover_bg: #ffffff;
@side_menu_text: #000000;
@side_menu_hover_text: #000000;
@side_menu_button_border: #000000;

#side-menu-container > .content { padding: 0 !important; }
#side-menu-table { width: 100%; }
#side-menu-table td a { background-color: @side_menu_bg; color: @side_menu_text; border-bottom: 1px solid @side_menu_button_border; display: block; width: 100%; padding: @side_menu_padding; }
#side-menu-table td.last a { border-bottom: 0; }
#side-menu-table td a:hover { background-color: @side_menu_hover_bg; color: @side_menu_hover_text; }

[Smudges]

thanks Brian it works

[Brian]

Sweet. Glad you've got it all down.

[Smudges]

Brian is it possible with this to have it as well as the different header & content code by pawl ?

[Brian]

I'm not sure I follow. What code are you referring to?

[Smudges]

Brian sorry for lateness but the code i was refering about was support.proboards.com/thread/434970/template-different-widths-header-content

[Brian]

I don't see why that wouldn't work. Probably worth noting that if you have the Move Banner option set to Yes in the sidebar redux plugin, the HTML for that modification is already in place. You would just need to replace #wrapper2 with #sidebarr-wrapper in the CSS provided.

[Demian Kinley]

is it possible to integrate ,,PBN Admin Menu,, in the side-bar ?

this would be great...

[Demian Kinley]

bump

[Silverwolfabyss]

Brian, would there be a way to go about adding a strikethrough upon hovering over the link in the menu?

[Brian]

Jun 5, 2013 11:03:35 GMT -8 Demian Kinley said:

is it possible to integrate ,,PBN Admin Menu,, in the side-bar ?

this would be great...

Yes, but you'd have to remove a lot of the CSS from the source code of the PBN admin menu.

Jun 11, 2013 17:26:41 GMT -8 Silverwolfabyss said:

Brian, would there be a way to go about adding a strikethrough upon hovering over the link in the menu?

Yeah.

Just add on to this line of CSS at the end of my other post.

#side-menu-table td a:hover { background-color: @side_menu_hover_bg; color: @side_menu_hover_text; text-decoration: line-through; }

[Demian Kinley]

thanks for your answer,

you spend a little time to integrate in side-bar ?