News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Advanced sidebar menus

Started by Antechinus, July 04, 2012, 07:29:36 PM

Previous topic - Next topic

Antechinus

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

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:
// 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:
// 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:
#left_admsection
{
width: 160px;
float: left;
padding-right: 10px;
}


Replace:
#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:
.left_admmenu li
{
padding: 0 0 0 0.5em;
}
.left_admmenu
{
margin-bottom: 0.5em;
}


Replace:
/*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:
// 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:

// 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:
var ajax_notification_text = "', $txt['ajax_in_progress'], '";
var ajax_notification_cancel_text = "', $txt['modify_cancel'], '";
// ]]></script>';


Add after:

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


Shambles


Nityananda Maity



kat

That's kinda groovy, Ant!

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

Nityananda Maity

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

Antechinus

Quote from: K@ on August 06, 2012, 05:12:03 AM
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. :D

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. :P

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



Advertisement: