[Tuto] Menu jQuery Black & Blue.

Board:

Tutoriales

Topic:

[Tuto] Menu jQuery Black & Blue.

Description:

Foro de tutoriales para smf

« previous next »

Pages: [1]

Author Topic: [Tuto] Menu jQuery Black & Blue. (Read 1506 times)

0 Members and 1 Guest are viewing this topic.

[Tuto] Menu jQuery Black & Blue.

« on: July 28, 2011, 12:10:33 AM »

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:

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>';
}

Reemplazamos por :

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

Code: [Select]

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