Всем привет! Снова с вами я, а значит настало время очередной заметки. Ударимся немного в трудовые будни создания сайтов, а точнее горизонтального меню. Но не простого, а… нет, не золотого :) Просто немного нестандартного.



Все вы, надеюсь, вдоволь начитались и наделали css меню с использованием спрайтов (объяснять не вижу смысла, есть много материла на данную тематику — «CSS Sprites: все, что вы знали, но боялись спросить»).

Техника до ужаса проста — делаем список, на фон ссылки стилями вешаем картинку, по :hover смещаем фон…

Создавал десятки простых меню (с прямыми границами) и я…
К примеру такое:

Но однажды попалось с диагональными:

При создании такого меню придётся немного заморочиться. Первым делом нужно создать спрайт-матрицу для каждого состояния кнопок. Пример:

Не пинайте за код (хотя всё в нём ОК) — главное идея! ))

Начнём с xhtml кода меню. Обычный список, у каждой ссылки уникальный id, т.к. меню полностью графическое:

1
2
3
4
5
6
7
8

<ul id="menu">
	<li><a href="#" id="menu-home" class="hide">Home</a></li>
	<li><a href="#" id="menu-incentives" class="hide">Federal Incentives</a></li>
	<li><a href="#" id="menu-approach" class="hide">Personal Approach</a></li>
	<li><a href="#" id="menu-solutions" class="hide current">Custom Solutions</a></li>
	<li><a href="#" id="menu-opportunities" class="hide">Partnership Opportunities</a></li>
	<li><a href="#" id="menu-contacts" class="hide">Contact Us</a></li>
</ul>

Создадим также css спрайт:

И стили для данного меню:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.hide {text-indent:-9999px; overflow:hidden; zoom:1; display:block;}
 
#menu {width:990px; margin:0; padding:0;overflow:hidden; zoom:1;}
 
	#menu li {list-style-type:none; display:inline; margin:0; padding:0;}
 
		#menu li a {float:left;height:30px;background: #145395 url(../img/menu.png) no-repeat 0 0;}
 
		#menu a#menu-home {width:97px;background-position:0 0;}
		#menu a#menu-home:hover, #menu .prev a#menu-home:hover, #menu a#menu-home.current {background-position:0 -30px;}
		#menu .prev a#menu-home {background-position:0 -60px;}
 
		#menu a#menu-incentives {width:174px;background-position:-97px 0;}
		#menu a#menu-incentives:hover, #menu .prev a#menu-incentives:hover, #menu a#menu-incentives.current {background-position:-97px -60px;}
		#menu .prev a#menu-incentives {background-position:-97px -90px;}
 
		#menu a#menu-approach {width:174px;background-position:-271px 0;}
		#menu a#menu-approach:hover, #menu .prev a#menu-approach:hover, #menu a#menu-approach.current {background-position:-271px -90px;}
		#menu .prev a#menu-approach {background-position:-271px -120px;}
 
		#menu a#menu-solutions {width:186px;background-position:-445px 0;}
		#menu a#menu-solutions:hover, #menu .prev a#menu-solutions:hover, #menu a#menu-solutions.current {background-position:-445px -120px;}
		#menu .prev a#menu-solutions {background-position:-445px -150px;}
 
		#menu a#menu-opportunities {width:220px;background-position:-631px 0;}
		#menu a#menu-opportunities:hover, #menu .prev a#menu-opportunitie:hover, #menu a#menu-opportunities.current {background-position:-631px -150px;}
		#menu .prev a#menu-opportunities {background-position:-631px -180px;}
 
		#menu a#menu-contacts {width:139px;background-position:-851px 0;}
		#menu a#menu-contacts:hover, #menu .prev a#menu-contacts:hover, #menu a#menu-contacts.current {background-position:-851px -180px;}

Но у автора вышеупомянутой статьи была ситуация проще — только один край кнопки скошен. У нас же — оба. Получается, что кроме указания фона активному пункту (он жёстко прописан у текущей страницы — класс «current»), нужно ещё позаботиться и о предыдущем (класс «prev» — навесим на li, т.к. IE6 не любит много классов на одном элементе):

Далее задача наша сводится нескольким пунктам (js код ниже):

  1. запомнить текущий активный пункт (2)
  2. при наведении курсора на пункт меню (4) убрать все классы (6)
  3. на предыдущий пункт навесить класс «prev» (7)
  4. при убирании курсора (9) убрать клас «prev» (10)
  5. вернуть активный пункт меню к первоначальному состоянию (11)

Обратимся за помощью к javascript, а точнее к jquery — благо, данную библиотеку использую почти на всех проектах:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function() {
	var $current = $('#menu .current');
	$current.parent().prev().addClass('prev');
	$('#menu a').hover(
		function() {
			$(this).parent().parent().find('li').removeClass('prev').find('a').removeClass('current');
			$(this).parent().prev().addClass('prev');
		},
		function() {
			$(this).parent().prev().removeClass('prev');
			$($current).addClass('current').parent().prev().addClass('prev');
		}
	);
});

В итоге всё заработает, можете посмотреть демо1.

Можно даже немного пошаманить со картинкой-спрайтом, упростив её!

Смотрим демо2.

PS: и без js тоже вполне приемлимо… и без… Но об этом в следующий раз. Удачи!

Понравилась статья? Поделись с другими:

    Похожие статьи:

    1. Как сделать Web IDE портабельной? Как сделать Web IDE портабельной?
    2. Facebox IE6 png transparency fix! Facebox IE6 png transparency fix!
    3. PNG-прозрачность в IE 5.5-6-7 PNG-прозрачность в IE 5.5-6-7