Advanced sidebar menus

[Antechinus]

Someone on the team move this to Tips and Tricks for me. I don't have those permissions any more.

Anyway, what I've done is add flyouts to the old sidebar menus so that they give all the same access options as the new drop menus, but in a more familiar format that some people may prefer. These menus will run with or without javascript, including full keyboard accessibility on the flyouts. Up to you if you want the jQuery/Superfish bits.

Screenshot is attached. Code is below. Do wotcha like.

GenericMenu.template.php:

Find:

Code Select Expand

// Is this the current area, or just some area?
if ($i == $menu_context['current_area'])
{
echo '
<strong><a href="', isset($area['url']) ? $area['url'] : $menu_context['base_url'] . ';area=' . $i, $menu_context['extra_parameters'], '">', $area['label'], '</a></strong>';

if (empty($context['tabs']))
$context['tabs'] = isset($area['subsections']) ? $area['subsections'] : array();
}
else
echo '
<a href="', isset($area['url']) ? $area['url'] : $menu_context['base_url'] . ';area=' . $i, $menu_context['extra_parameters'], '">', $area['label'], '</a>';

echo '
</li>';
}

Replace:

Code Select Expand

// Is this the current area, or just some area?
if ($i == $menu_context['current_area'])
{
echo '
<strong><a href="', isset($area['url']) ? $area['url'] : $menu_context['base_url'] . ';area=' . $i, $menu_context['extra_parameters'], '">', !empty($area['subsections']) ? '<span class="floatright">&#187;</span>' : '', $area['label'], '</a></strong>';

if (empty($context['tabs']))
$context['tabs'] = isset($area['subsections']) ? $area['subsections'] : array();
}
else
echo '
<a href="', isset($area['url']) ? $area['url'] : $menu_context['base_url'] . ';area=' . $i, $menu_context['extra_parameters'], '">', !empty($area['subsections']) ? '<span class="floatright">&#187;</span>' : '', $area['label'], '</a>';
// Is there any subsections?
if (!empty($area['subsections']))
{
echo '
<ul class="thingy">';

foreach ($area['subsections'] as $sa => $sub)
{
if (!empty($sub['disabled']))
continue;

$url = isset($sub['url']) ? $sub['url'] : (isset($area['url']) ? $area['url'] : $menu_context['base_url'] . ';area=' . $i) . ';sa=' . $sa;

echo '
<li>
<a ', !empty($sub['selected']) ? 'class="active" ' : '', 'href="', $url, $menu_context['extra_parameters'], '"><span>', $sub['label'], '</span></a>
</li>';
}

echo '
</ul>';
}
echo '
</li>';
}

index.css:

Find:

Code Select Expand

#left_admsection
{
width: 160px;
float: left;
padding-right: 10px;
}

Replace:

Code Select Expand

#left_admsection
{
width: 180px;
float: left;
padding-right: 10px;
}

That part is just because it works a bit better with a little extra width, to accommodate the subsection indicators with some of the longer links. Use your own judgement.

Anyway, next bit, still in index.css:

Find:

Code Select Expand

.left_admmenu li
{
padding: 0 0 0 0.5em;
}
.left_admmenu
{
margin-bottom: 0.5em;
}

Replace:

Code Select Expand

/*Begin sidebar flyout coding. */
.left_admmenu {
margin-bottom: 6px;
}
.left_admmenu li {
padding: 0 0 0 6px;
line-height: 2em;
}
.left_admmenu li a {
display: block;
}
.left_admmenu li strong a {
color: #333;
}
.left_admmenu li:hover a, .left_admmenu li.sfhover a {
color: #d37b00;
}
.left_admmenu li {
position: relative;
}
.left_admmenu li ul {
position: absolute;
z-index: 90;
top: 0;
left: -9999px;
width: 170px;
padding: 4px;
border-top: 1px solid #e7eaef;
border-left: 1px solid #e7eaef;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
background: #fff;
border-radius: 0 4px;
box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.left_admmenu li:hover ul, .left_admmenu li.sfhover ul {
left: 170px;
}
.left_admmenu li li {
padding: 0 0 0 0;
}
.left_admmenu li li a {
white-space: pre;
padding: 0 6px;
display: block;
}
.left_admmenu li:hover li a, .left_admmenu li.sfhover li a {
display: block;
color: #346;
}
.left_admmenu li li a:focus {
background: #fff;
width: 155px;
margin-left: 10169px;
}
.left_admmenu li li:hover a:focus, .left_admmenu li li.sfhover a:focus {
margin-left: 0;
}
/*End sidebar flyout coding. */

If you want the jQuery/Superfish effects, you'll also need some tweaks to index.template.php plus the relevant javascript files.

Index.template.php:

Find:

Code Select Expand

// RTL languages require an additional stylesheet.
if ($context['right_to_left'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/rtl.css" />';

Add after:

Code Select Expand


// Jquery Librarys
echo '
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery-1.7.1.min.js"></script>';

// Note that the Superfish function seems to like being called by the full syntax.
// It doesn't appear to like being called by short syntax. Please test if contemplating changes.
echo '
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/hoverIntent.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/superfish.js"></script>';

That assumes you are calling jQuery locally. Suit yourself on that detail.

Next, find:

Code Select Expand

var ajax_notification_text = "', $txt['ajax_in_progress'], '";
var ajax_notification_cancel_text = "', $txt['modify_cancel'], '";
// ]]></script>';

Add after:

Code Select Expand


echo '
<script type="text/javascript"><!-- // --><![CDATA[
$(document).ready(function() {
$("ul.dropmenu, ul.left_admmenu").superfish();
});
// ]]></script>';

That assumes you want the jQ effect on the main drop menus too. Again, suit yourself.

Screenshot below. Zipped js files attached.

[Robert.]

Moved. They look great, nice work

[Nityananda Maity]

I get Template Parse Error!. Please help me
Attachments
http://www.hopmoney.com/files/error.zip

[Shambles]

Lose the rogue } on line 102

[Nityananda Maity]

Lose the rogue } on line 102

tried it but not works correctly
http://hopmoney.com/files/Administration%20Center.pdf

[Shambles]

Lose the rogue } on line 102

tried it but not works correctly
http://hopmoney.com/files/Administration%20Center.pdf

You still get a parse error? 

[kat]

That's kinda groovy, Ant!

Opera somewhat screws it up, by having the link pop-out, though, obscuring things.

[Nityananda Maity]

Hi friends,
My problem is solved. After removing the last '}' from replacement edit on GenericMenu.template.php (provided on tutorial above).
Thanks all

[Antechinus]

That's kinda groovy, Ant!

Opera somewhat screws it up, by having the link pop-out, though, obscuring things.

Must admit I didn't test it in Opera. I'm not surprised that Opera somewhat screws it up. Opera has a habit of doing things like that.

I'll take a look at it later.

[kat]

Oh, it's not a problem!

I have the thing enabled, so that I don't go to places that have hidden links, kinda thing.

When people do the GO HERE! thing, I prefer to see where the links take me, before I click it.

[Antechinus]

Ok, so exactly what do you mean by "link pop-out"?

[kat]

When you place the cursor over a link, the links gets displayed.

Not a pop-out, really. Just a thing that... er... pops up. (If that makes any sense)

It's not like I can take a screeny, really. Although, one of those apps that takes a screeny with a hot-key might do it, I s'pose. I'll see if I can find one.

[kat]

Good ol' Irfanview.

Screeny attached.

[Antechinus]

Ah. Nothing I can do about that, since it's hard-coded into the browser. Why not just have the url showing in the status bar, like Firefox and Chrome? Much neater.

ETA: Hey just checked. Opera shows the url in the status bar by default.

[kat]

I must have a setting, somewhere, then.

I'll have a fiddle.

* K@ suggests we have this as standard in future versions of SMF.

[Antechinus]

I don't mind if it's in 2.1, but there would probably need to be more than one person in favour of it. It was just an idea that occurred to me, so I thought I'd see what the feedback was.

[kat]

It's a VAST improvement!

Not sure it'd be worth the hassle, for you, modding it up, for v2, though.

[kingston250]

That's good news your problem is solved.

[GraphicJunki]

Great tip thanks

[jpbeauty]

Thanks for the technique.