Sexy Elegant Menu

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

Muy buen tutorial, gracias por compartir

Gracias por el tuto!

Se ve lindo y bueno, excelente modificación.