Несколько наиболее интересных ссылок, о которых я писал в своём Твиттере в апреле. Это полезные статьи, сервисы и просто разные разности ))). Берём на вооружение, сохраняем в закладки, делимся с другими – не пропадать же добру!

• Полезный сервис для вёрстальщиков – генератор css спрайтов. Есть визуальный редактор. Удобно!

• Для тех, кто использует браузер Firefox наверняка прийдтся по вкусу красивая тема – SoCool.

• “CSS3 Glow Tabs” (анг.) – статья о том, как сделать табы без единой картинки, используя CSS3.

• Планируйте своё время и составляйте to-do списки с помощью оригинального таск-менеджера “The Big Picture”

• “The Ultimate Guide To Wordpress Hacks And Customizations” (анг.) – громаднейшая коллекция статей по настройке и хакам Wordpress.

• “Floating panel” – плагин для jQuery, позволяющий создать плавающий виджет c поддержкой IE6. (CSS свойство position: fixed)

• “30 Stunning jQuery Slider Plugins and Tutorials To Boost Your Work” (анг.) – отличнейшая коллекция статей и плагинов для jQuery для создания слайдшоу и всевозможных слайдеров. В закладки!

• “ПТ Санс” – бесплатный русский шрифт (+версия для веба!). Гарнитура состоит из 8 начертаний: 4 стандартных начертания; 2 начертания с расширенными пропорциями для мелкокегельного набора; 2 узких начертания для экономного набора.

• И на последок немного юмора! Суперобложки для книг, которые стыдно читать в метро. Берем такую обложку и оборачиваем ею что-нибудь постыдное. И сразу все понимают: едет интересный человек.

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

1. Facebox IE6 png transparency fix!
2. Непростое CSS меню с использованием спрайтов
3. На заметку: кроссбраузерный CSS display: inline-block

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

Все вы, надеюсь, вдоволь начитались и наделали 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. Facebox IE6 png transparency fix!
2. Как сделать Web IDE портабельной?

Thickbox – простой в использовании, универсальный, с широкими возможностями плагин для jQuery из семейства “lightbox”. С его помощью можно сделать почти всё :) Кроме callback’а по закрытии окна. Пусть с минимальными возможностями… нету и всё! А иногда так необходимо обновить родительское окно по закрытии popup.

В четвёртый раз перерывая официальный форум нашёл-таки полезный совет. Даже целую статью о модификациях thickbox’а, в которой описаны открытие вторичных окон, вызов окна без добавления к ссылке класса, вызов по закрытию попапа любой родительскогй функции…. Вкуснотища!!!

Нет похожих статей.

Появился интересный плагин для jQuery – Facebox. Он является аналогом лайтбокса, тоже позволяет выводить картинки… но кроме них ещё и div’ы и даже отдельные странички!!! Берём на вооружение :)

ЗЫЖ прямо старые добрые модальные окна…

ЗЫЖЖ люди, чтобы в jQuery не было глюков, юзайте “DOCTYPE XHTML 1.0 Strict”, а то попалась в руки готовая вёрстка с “Transitional” и пришлось полдня разбирался почему в ИЕ глючит анимация :((((

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

1. Facebox IE6 png transparency fix!
2. Настраиваем Thickbox
3. jQuery – статьи, уроки, книги…

Привет всем! Извините, что давно не пишу – сейчас мало времени :(
Но думаю компенсировать в скором чем-нибудь новеньким. А пока…

Если вам вдруг интересен jQuery, и чисто случайно есть желание почитать о нём, но совсем нет времени искать ресурсы, то вам к Потапову Геннадию! Он собрал просто громадную коллекцию ссылок (Влад, было приятно увидеть там ссылку и на твой блог!) :

jQuery – The best JavaScript framework

Так что страничку в закладки, а “TermiT’s Blog” в подписку! :)
Удачи!

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

1. Настраиваем Thickbox
2. Facebox
3. Facebox IE6 png transparency fix!