Seleccionar idioma:
Realizar Donación - Mods Premium - Portfolio



Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.
* [Tuto] Menu jQuery Black & Blue.
  Leído 4683 veces
* Viendo el foro
 0 Usuarios y 1 Visitante están viendo este foro.


*
Autor: Prototype
Jul 28 2011
Hola Amigos! Esta vez les traigo un Tuto de cómo adaptar un Menú jQuery muy vistoso.
Dedicado especialmente a Gonza (Y)

*

Comencemos descargando la imagen del Menú:
Link de Descarga
Ahora vamos al Index.template de nuestro Theme.

 Buscamos:
Código: [Seleccionar]
// 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>';
}
Reemplazamos por :
Código: [Seleccionar]
// 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 id="topnav">';

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">
<a href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
', $button['title'], '
</a>
</li>';
}

echo '
</ul>
</div>';
}
Ahora vamos al Index.css
Agregamos al final:
Código: [Seleccionar]
ul#topnav {
margin: 0; padding: 0;
float: left;
width: 1000px;
list-style: none;
font-style: normal;
background: url(../images/theme/topnav_stretch.gif) repeat-x;
}
ul#topnav li {
float: left;
border-right: 1px solid #555;
}
ul#topnav li:hover {
background: #1376c9;
}
ul#topnav li a {
padding: 5px 15px;
display: block;
color: #fff;
}

Copiamos la imagen a la carpeta images de su theme.
Como ustedes comprenderán el menú está adaptado para el Theme Default, en otros quizás se deforme si es así, no duden en preguntar para dejarlo a la perfección.
Gracias a Neekiinh0 por reducir el codigo.
Nota: El menú lo adapte para usarlo en Smf, no lo cree yo.

Fuente del código Original:Sohtanaka

Saludos! Espero sirva: D


« Última Modificación: Julio 29, 2011, 08:02:48 pm por Prototype »



bbuen tuto

k +1




Gracias amigo  +10




Excelente aporte  +10

bbuen tuto

k +1

En ves de darle k+1 le hubieras aprovado el archivo de descarga!! :P

Ya lo aprove ;)




jojo!! -.-




muy bueno  +10




Es el que use en mi ultimo theme http://www.skinmod.eu/index.php?topic=2124.0




Ahí vi la demo de tu theme, es el mismo menú, pero yo no lo saque de tu theme, lo adapte de la página que deje en la fuente.
Por lo tanto es claro que el menú tampoco lo creaste tu, con todo respeto no se a que viene esa respuesta amigo.





aja se quiere dar los creditos..




Solo comentaba que es el que use en el ultimo theme mio.

Tampoco dije que lo habia creado.. lee bien lo que escribi..

Es el mismo que USE!!!!!! no puse que cree ... esta clarisimo.

aeiou? no opines estupideces... con tal de responder todos los temas pones cualquier cosa y nadie te dice nada :)


Aportando algo, si te fijas el codigo del menu es puro css, por lo tanto no hacen falta los js ya que no hace ningun efecto de nada.

En fin, es un buen aporte +10 !




Otros temas de su interes




Usuario:
Contraseña:
Sesión:
hermes bracelet replica, christian louboutin replica, van cleef and arpels replica, red bottoms replica, cartier love bracelet replica christian louboutin replica, christian louboutin replica, hermes bracelet replica,