Elegant Menu
Resultado final:
Abrimos nuestro index.template.php buscamos:
Code Select
// Here comes the JavaScript bits!
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>
Remplazamos por:
Code Select
// main menu jquery
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/menu.css" />';
// Here comes the JavaScript bits!
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>
<script type="text/javascript">
$(function() {
$("#lbutton1,#lbutton2,#lbutton3,#lbutton4,#lbutton5").tipsy({gravity: "s"});
});
</script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery_menu.js"></script>
Buscamos:
Code Select
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;
echo '
<div id="main_menu">
<ul class="dropmenu" id="menu_nav">';
foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">
<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
<span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
</a>';
if (!empty($button['sub_buttons']))
{
echo '
<ul>';
foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li>
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
<span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
</a>';
// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';
foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
<span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
</a>
</li>';
echo '
</ul>';
}
echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}
echo '
</ul>
</div>';
}
Remplazamos por:
Code Select
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;
echo '
<ul class="topnav">';
foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li>
<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
<div>', $button['title'], '</div>
</a>';
if (!empty($button['sub_buttons']))
{
echo '
<ul class="subnav">';
foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li>
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
<div>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</div>
</a>';
// 3rd level menus
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul class="subnav">';
foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a', $grandchildbutton['active_button'] ? ' class="active"' : '', ' href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
<div>', $grandchildbutton['title'], '</div>
</a>
</li>';
echo '
</ul>';
}
echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}
echo '
</ul>';
}
Ahora solo descargar los archivos adjuntos y lo suben a su respectivo directorio.
Imagenes_menu.rar lo descomprimimos y subimos las imagenes a Tutheme/images/theme
menu.css lo subimos a Tutheme/css
jquery.rar lo descomprimimos y subismos los 2 archivos .js a Tutheme/scripts