[Tip] Drop Down Menu Tutorial (..for all themes)

[capabmx]

Hey, fresh install, got it working, thank you very much :], this tutorial is excellent and I will be using this for every theme!! The problem I was having before I think was due to me rushing and editing the root style.css not the individual theme style.css. I'm clumsy haha but anyways thanks again

[Harvester]

I got this working no problems.. added my chat, links, bookmarks and gallery links to the menu too.

Had a few problems though...

1. It was so wide it broke my template... even though the buttons were only about 66% of the screen width.

2. its too tall. Id like it to be only about 25.. maybe 30 pixels tall.. seems to be about 50+

3. Fonts too big

4. the new css mods overwrote all the background images on my headers of my forum instead of just being used on the dropdown menus.

5.  I have the Ads Management Mod installed. I have adds at the top of my page below the menu. The drop down menus go BEHIND the ads up top rather than in front. Therefore they can not be seen.

How can i fix these issues?

Please help.

thank you

[Antechinus]

Link?

[Harvester]

I removed the modified files until I can get a resolution. My site is live and well established and I had to go back to the default buttons until I can resolve this, unless i want to have an inbox flooded with complaining members

What information do you need though? I will be more than happy to PM you any necessary information that could help you.   url,... login info.. whatever you need.

Thank you

[Antechinus]

Set up a test copy of the theme in question (your members don't have to use it) and sort us out a link and a test account.

[Xavi-Nena]

I also posted a request on Tiny Portal but wanted to ask here too..

I am looking for a drop down compatible with the theme His Own
http://custom.simplemachines.org/themes/index.php?lemma=1050

[Antechinus]

So what's the problem then?

[Xavi-Nena]

When I apply these changes here it does not have the same menu tabs section as the one given and i get syntax errors.

I changed the site im working on this with back to the regular hisown default button strip but the buttons for this theme look like this:

Code Select Expand


// Show the start of the tab section.

echo '
<ul>';

// Show the [home] button.
echo '<li><a href="', $scripturl, '">' , $txt[103] , '</a></li>';

// Show the [forum] button.
echo '<li><a href="', $scripturl, '?action=forum">' , Forum , '</a></li>';

// Show the [help] button.
echo '<li><a href="', $scripturl, '?action=help">' , $txt[119] , '</a></li>';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '<li><a href="', $scripturl, '?action=admin">' , $txt[2] , '</a></li>';

// How about the [search] button?
if ($context['allow_search'])
echo '<li><a href="', $scripturl, '?action=search">' , $txt[182] , '</a></li>';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '<li><a href="', $scripturl, '?action=profile">' , $txt[79] , '</a></li>';

// Go to PM center... [pm]
if ($context['user']['is_logged'] && $context['allow_pm'])
echo '<li><a href="', $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a></li>';

// The [calendar]!
if ($context['allow_calendar'])
echo '<li><a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a></li>';

// the [member] list button
if ($context['allow_memberlist'])
echo '<li><a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a></li>';


// If the user is a guest, show [login] button.
if ($context['user']['is_guest'])
echo '<li><a href="', $scripturl, '?action=login">' , $txt[34] , '</a></li>';


// If the user is a guest, also show [register] button.
if ($context['user']['is_guest'])
echo '<li><a href="', $scripturl, '?action=register">' , $txt[97] , '</a></li>';


// the [chat] button
echo '<li><a href="', $scripturl, '?action=chat">' , Chat, '</a></li>';


// Otherwise, they might want to [logout]...
if ($context['user']['is_logged'])
echo '<li><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a></li>';

echo '</ul>';


}

// Generate a strip of buttons.
function template_button_strip($button_strip, $direction = 'top', $force_reset = false, $custom_td = '')
{
global $settings, $buttons, $context, $txt, $scripturl;

// Create the buttons...
foreach ($button_strip as $key => $value)
{
if (isset($value['test']) && empty($context[$value['test']]))
{
unset($button_strip[$key]);
continue;
}
elseif (!isset($buttons[$key]) || $force_reset)
$buttons[$key] = '<a href="' . $value['url'] . '" ' .( isset($value['custom']) ? $value['custom'] : '') . '>' . $txt[$value['text']] . '</a>';

$button_strip[$key] = $buttons[$key];
}

if (empty($button_strip))
return '<td> </td>';

echo '
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'last' : 'first' , '"> </td>
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_back">', implode('  |  ', $button_strip) , '</td>
<td class="', $direction == 'top' ? 'main' : 'mirror', 'tab_' , $context['right_to_left'] ? 'first' : 'last' , '"> </td>';
}


And I apparently do not know where the menu section ends or how to alter it to be compatible with this theme.

[Antechinus]

Meh. I'll knock one up for ya. Not tonight though. Manana.

[Xavi-Nena]

gracias

if I happen to get support on TP before than I will post here to let ya know. thanks again.

[Antechinus]

Sorted. I did something a little different this time. If you want anything changed I'll think about it if you ask nicely.
I'm assuming you can sort tabs and submenu links to suit yourself. These files are for 1.1.x only.
I didn't add a TP forum button coz I couldn't be bothered but you know the drill for that anyway.
Happy chocolate rabbits n stuff.

[Xavi-Nena]

thank ya sir... now i did attempt to fix it on my own but take a look at how it displays www.FrenchieTalk.com

there is that gap block between each horizontal tab..

edited:
also I see on the drop down in index.template.php it shows view calendar as the first link for Home drop down, however it is not showing and permission is enabled for everyone.

[Antechinus]

Mate you have three different menus in that style.css: mine , Crip's original and some other one I've never seen before. No wonder your poor old forum is confused.

Get rid of this lot for a start and see how it looks:

Code Select Expand

#nav li.active_menu a {
background: url(images/toolbar-select.png) 0 0 no-repeat;
}

#nav {
background: url(images/img/toolbar-div.png) 0 0 no-repeat;
}

#nav li {
background: url(images/img/toolbar-div.png) 100% 0 no-repeat;
}

#nav li a {
color: #fff;
}

#nav a:hover {
color: #FCE001;
}

#nav {
margin: 0 0 0 20px;
padding: 0;
height: 31px;
}

#nav ul {
padding: 0;
margin: 0;
margin-left: 2px;
}

#nav li {
margin: 0;
padding: 0;
float: left;
display: block;
}

#nav a {
text-decoration: none;
cursor: pointer;
font-weight: bold;
}

#nav li.on li.on a {
text-decoration: underline;
}

#nav li a {
display: block;
float: left;
height: 31px;
line-height: 31px;
padding: 0 15px;
}


Also you really need to learn how to do HTML validation. Much easier to track errors if you know the site is clean to start with (although there is nothing you can do about Google ads since they are always a mess).

[Xavi-Nena]

Well I do know how to run the validation check at http://validator.w3.org/ but not sure if that is the same thing, nor do i know really how to interpret the findings...but than I haven't really put much time into it...but will make attempt to do so now.

and also...that other menu code was from HCM's original post in this TIP thread. But thank you sir for pointing that out I had forgotten completely I added that when I was adding yours. Anyhow I did remove both the one you suggest which im guessing is Crip's theme one and the other one I put in there trying to do this originally and it worked.

you so smart...

thank you mate.

[Antechinus]

Get this Firefox add-on for validation. https://addons.mozilla.org/en-US/firefox/addon/249

If you set it to SGML parser it'll run the same algorithm as the W3 gizmo, but the formatting of the results is much more user-friendly.

As for the menu, when I was setting it up I initially left Crip's menu in place to make it easier transfer colour codes and padding, so I knew exactly what was causing the double dividers.

[Xavi-Nena]

also interesting how you left the gaps between each drop down button..

[Antechinus]

Yeah I thought I'd do that just for a change. I've seen it elsewhere and though it looked cool for something different. It's just a top margin on the relevant css class.

[PalmBeachPreps]

For me, it appears as a huge block instead of a horizontal list. See the attached screenshot.

Same here!

[genusis]

has a code been developed for smf 2 RC1 yet? i really don;t have to much time to read through everything sorry ^^.

[KahneFan]

has a code been developed for smf 2 RC1 yet? i really don;t have to much time to read through everything sorry ^^.

Yes...
http://custom.simplemachines.org/mods/index.php?mod=1508