960Pixels netpress wordpress, tutoriale, grid960, photoshop itd…

Ostatnio miałem przyjemność zaprojektować menu, które zdecydowałem się troszkę ożywić za sprawą CSS’a. Jako, że wyszło w praniu, że owe menu ma być dwupoziomowe, dodane zostało jQuery za sprawą kolegi z pracy – Tomka. Poniżej prezentuję opis jak zrobić tego typu menu.

Na pierwszy rzut idzie struktura, czyli markup html5. Standardowo – lista:

<nav>
	<ul id="menu-menu" class="menu">
		<li><a href="#" title="#"></a>
			<ul class="sub-menu">
				<li><a href="#" title="#"></a></li>
				<li><a href="#" title="#"></a></li>
				<li><a href="#" title="#"></a></li>
				<li><a href="#" title="#"></a></li>
				<li><a href="#" title="#"></a></li>
			</ul>
		</li>
		<li><a href="#" title="#"></a></li>
		<li><a href="#" title="#"></a></li>
		<li><a href="#" title="#"></a></li>
		<li><a href="#" title="#"></a></li>
		<li><a href="#" title="#"></a></li>
		<li><a href="#" title="#"></a></li>
	</ul>
</nav>

Następnie wypadałoby naszą listę nieco ostylować. Poniżej prezentuję styl, którego użyłem na stronie, pod którą miałem przyjemnośc projektować owe menu:

#left-sidebar nav {
background:#1a6bc6;
width:100%;
}

#left-sidebar nav > ul {
padding:5px;
}

#left-sidebar nav ul li {
display:block;
clear:both;
position:relative;
}

#left-sidebar nav ul li > ul {
display:none;
background:#004a96;
}

#left-sidebar nav ul li > a {
background:url(../img/hover-arrow.png) -10px 15px no-repeat;
border-bottom:1px solid #2679d5;
color:#fff;
display:block;
text-decoration:none;
text-shadow:-1px -1px 0 #0e3766;
padding:11px 0 11px 20px;
}

#left-sidebar nav ul li > a:hover {
background:#2679d5 url(../img/hover-arrow.png) 10px 15px no-repeat;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
-webkit-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
padding:11px 0 11px 30px;
}

#left-sidebar nav ul li.current-menu-item {
background:#0058b8;
}

#left-sidebar nav ul li > ul li a {
background:url(../img/hover-arrow.png) -10px 15px no-repeat;
padding-left:30px;
border-color:#004389;
}

#left-sidebar nav ul li > ul li a:hover {
background:#044180 url(../img/hover-arrow.png) 20px 15px no-repeat;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
-webkit-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
padding:11px 0 11px 40px;
}

#left-sidebar nav ul li > ul li.current-menu-item {
background:#044180 20px 15px no-repeat;
}

#left-sidebar nav ul li span {
display:block;
position:absolute;
border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
right:10px;
top:11px;
width:14px;
height:14px;
cursor:pointer;
background:url(../img/plusiminus.gif) 0 0 no-repeat;
}

#left-sidebar nav ul li span.plus:hover {
background:url(../img/plusiminus.gif) 0 -14px no-repeat;
}

#left-sidebar nav ul li span.minus {
background:url(../img/plusiminus.gif) -14px 0 no-repeat;
}

#left-sidebar nav ul li span.minus:hover {
background:url(../img/plusiminus.gif) -14px -14px no-repeat;
}

Jak widać w powyższym kodzie, zdefiniowane są także klasy:

current – dla aktualnie zaznaczonego elementu – w przypadku WordPressa klasa ta dopisywana jest automatycznie.

plus, minus – jeśli któraś ze stron/kategorii będzie miała dzieci (substrony, lub subkategorie) wyświetlony zostanie ‘+’ w celu rozwinięcia listy, nastepnie po rozwinięciu zamieni się on na ‘-’.

W powyższym kodzie można zauważyć coś nowego, mianowicie:

-moz-transition: all 0.3s ease-out; /*dla firefoxa*/
-o-transition: all 0.3s ease-out; /* dla opery*/
-webkit-transition: all 0.3s ease-out; /*dla safari*/
transition: all 0.3s ease-out; /*dla innych*/

Tak, to ten element, dzięki któremu nasze menu będzie animowane w momencie, gdy najedziemy na dany link! Jako, że nasze menu miało być ponad to rozwijane/zwijane należy dodać do szczęścia troszkę jQuery:

$(document).ready(function(){
	$('.menu li').has('ul').find('ul').before('<span class="menu-toggle expand plus"></span>');

	$('.menu-toggle').live('click',function(){
		$(this).next().stop(true, true).animate({height:'toggle'});
		if($(this).hasClass('plus'))
		{
			$(this).removeClass('plus').addClass('minus');
		}
		else
		{
			$(this).addClass('plus').removeClass('minus');
		}
	});

	$('ul.sub-menu a[href="'+window.location+'"]').closest('ul').toggle();

});

Wszystko powinno przyszłowiowo „trybić”. Zobaczcie jak wygląda to menu w akcji (demo).
Efekt jak dla mnie – bardzo fajny :). Jeśli ktoś chciałby zaimplementować powyższy kod pod swojego bloga wystarczy, że odnajdzie plik sidebar.php i doda w nim następujący kod:

<nav>
	<?php wp_nav_menu(array(
	'depth' => 2,
	'container' => '',
	)); ?>
</nav>

Oczywiście, w tym przypadku nasz theme musi wspierać dynamiczne menu – w functions.php należy dodać deklarację:

	// WordPress custom menu register
	function register_menu()
	{
		register_nav_menus();
	}
	add_action( 'init', 'register_menu' );

To by było na tyle – może się komuś przyda. Pozdrawiam :)!