HTML и CSS

Знакомство с HTML5, первые ощущения

Логотип HTML5 Так сложилось, что ли, что ажиотаж, создаваемый различными новшествами, меня абсолютно не задевает, ну или совсем поверхностно. Вышел первый телефон на андроиде, я почитал о нём, подумал, отметил в блокнотике с надписью «желания» что надо бы такой когда нибудь приобрести, отложил его и забыл на пару лет.

Аналогичное поведение у меня было относительно выхода HTML5. Наверное, в моём подсознании, сам не подозревая об этом, у меня всплывает ассоциация — всё новое, ещё очень сырое и не стабильное, поэтому я пробую что-либо лишь через некоторый значительный промежуток времени.

Подробнее →

Путешествия и мероприятия

Петергофские фонтаны

Петергофские фонтаныКак-то раз, собравшись с друзьями в гостях у меня (поездка в Копорскую крепость), было решено — в следующий раз собраться в гостях у кого-то другого. И вот, тёплым солнечным утром вторника, сев на «9-ти часовую» электричку я отправился на встречу в Петергоф. Естественно, основной нашей целью, не считая встречи, было посещение нижнего парка фонтанов.

По приезде в Петергоф меня встретила ясная солнечная погода, как и дома — настроение от этого становилось всё лучше и лучше. Когда все собрались и были готовы идти — мы двинулись в сторону фонтанов.

И вот мы пришли. Отстояли в очереди из 5 человек, купили билеты по 100 рублей благодаря студенческим билетам и пошли в парк.

Кроме того, нам очень повезло, ведь одна из подруг работает в гротах в дворце, и ей удалось бесплатно провести нас на экскурсию. Экскурсия мне очень понравилась так как я люблю лазить по всяким подземельям и просто старым постройкам.

После мы совсем немного погуляли по парку и побежали на «потеху» — дорога, которую 3 раза в сутки с двух сторон начинают поливать водой. Там вообще много потешных фонтанов, что очень интересно в тёплую погоду — сухим ни кто не выходит.

Но, после данной потехи нам не повезло — налетел сильный ливень с грозой, который продлился аж до вечера, лишь периодически прерываясь. Этот факт подпортил нам настроение и сломал все планы — нам удалось посмотреть лишь очень малую часть парка и раньше уехать домой. Однако, не смотря на всё это — провести время с друзьями — это самое радостное, что может быть.

Надеюсь, мне удастся как-нибудь ещё раз сходить в нижний парк и посмотреть его полностью. До встречи!

По старой моей традиции — фотографии прилагаются.;-)

Истории из жизни

О планировании дел в онлайне

О планировании дел в онлайнеВсех нас постоянно сопровождают различные дела и заботы. Порой даже становится не по себе, от количества навалившегося на нас «груза». Чтобы выполнять их с наибольшей эффективностью и иметь возможность «предсказывать» своё время, мы прибегаем к планированию дел. Однако, и тут не всё так просто — иногда приходится пользоваться некоторыми хитростями, чтобы план удалось выполнить во время, а иначе какой от него толк?

В своём недавнем посте я упомянул о некоторых своих планах на ближайшее будущее. На моё удивление, я стал работать продуктивнее, и меня даже не преследовали приступы лени. Это произошло благодаря следующему:

  1. Перед этим я хорошо отдохнул (двое суток на природе на берегу моря с палаткой, костром и гречкой со сгущёнкой)
  2. Сообщил о своих планах онлайн

Первый пункт важен, но лишь для того, чтобы на время повысить эффективность своей работы, а вот второй пункт, как оказывается, открывает очень большие возможности :mrgreen:. Может конечно это действует не на всех людей, но лично меня это мотивирует. Хотя 100% гарантии на реализацию вашего плана никто не даст, но открыто заявив о своих целях, даже без указания дедлайна, у вас появиться стремление и интерес в выполнении поставленной цели.

Кроме того, если приходится долгое время выполнять какую-то рутиную работу, то спустя какой-то небольшой срок ваша продуктивность заметно снизиться, из-за банальной физической усталости. Здесь отлично выручают какие-нибудь интеллектуальные игры, например, встроенные игры в виндовс или же различные интернет игры (не будем обижать маководов и линуксойдов). Небольшая 15-20 минутная пауза в работе с отвлечением на игру и ваша концентрация и эффективность работы улучшаться.

А какими советами, исходя из своего личного опыта, или хитростями для по увеличению … трудоспособности вы можете поделиться? Делитесь информацией по теме в комментариях к данному посту. Все описанные советы буду собраны в новом посте с указанием ссылки на блог автора (да-да, халявная ссылка).

Буду очень благодарен за ретвит, плюсадин или рассказом другам вконтакте. ;-)

Путешествия и мероприятия

Поездка в Копорскую крепость

Поездка в Копорскую крепостьНаша большая страна обладает богатейшей Историей. Куда не плюнь, практически везде можно найти какое-то историческое место. Мне, как жителю Ленинградской области, повезло, так как здешние места были исторически заселены и обладают богатой историей. Сегодня я поделюсь фотографиями  и немного расскажу о поездке в Копорскую крепость, которая находится всего-лишь в 25 километрах от моего дома.

Копо?рье или копорие — древнерусский город, а ныне село в Ломоносовском районе. В 1237 году немецкими рыцарями Ливонского ордена рядом с поселением была заложена одноимённая крепость. В те времена крепость была ещё деревянной. Спустя 4 года, великий князь Александр Невский отбил эту крепость и разрушил её. Затем, в 1280 году был выстроен каменный город, который через 2 года был разрушен местными жителями, в результате конфликта с князем. В 1297 году крепость вновь была выстроена, а затем она была несколько раз перестроена: в конце XV и в начале XVI века. После, крепость несколько раз поочерёдно переходила то к Швеции, то к Руси. Также, она принимала участие в сражениях Великой Отечественной войне.

Ныне, крепость является музеем. Входной билет стоит 50 рублей (полный), однако его никто не проверяет. Пенсионерам, естественно, предоставляется скидка, чернобыльцам вход бесплатный, насчёт студентов не знаю — при себе студенческого билета не было, а над окошком никакой информации не нашёл. Вместе с билетиком выдают маленькую бумажку с предупреждением о том, что крепость в аварийном состоянии и ходить по стенам опасно, ведь они могут обвалиться в любой момент. Если вас заметят — оштрафуют на смешные 100 рублей.

Внутри крепости сохранились руины старой церкви, часть которой ныне восстановлена (часть достроена, сделана крыша, вставлены окна и решётки на них), а другая, видимо, будет отреставрирована когда-то в будущем.

Больше, пожалуй, каких-либо построек в крепости нет. Разве что есть какая-то комнатка, видимо для знати, с когда-то красивой отделкой, которая достаточно хорошо сохранилась до наших дней, благодаря реставраторам. В данном случае «достаточно хорошо» — это значит вообще сохранилась, ведь 8 веков — достаточно большой срок.

Про «внутренности» крепости я рассказал — их там совсем не много. Теперь перейду к самой крепости. Крепость имеет 4 башни, внутрь которых можно залезть, а также, можно залезть и на них. Это хорошо тем, что крепость находится на возвышенности, и с башен открывается красивейшая живописная панорама с видом на Финский Залив. Кстати, в 13 веке крепость находилась на берегу залива, но со временем залив отступил и теперь до него от крепости напрямик 13 км. По этой причине огромная губа Финского Залива получила название «Копорская Губа». Одна из башен находится в сильно разрушенном состоянии, поэтому проход к ней перегорождён изгородью, но любопытной молодёжи это не помеха — его можно обойти. Однако, именно с этой башни открывается тот самый живописный вид, но это не беда. Рядом с башней можно подойти к краю стены (главное не смотрите вниз! Там метров 30 до земли) и увидеть эту же панораму.

Полазив по всем башням, выйдите из крепости и обязательно пройдите, посмотрите на неё снаружи. Массивность стен (толщиной 5 метров), их полуразрушенный ветром вид и высота очень впечатляют!

На этом пожалуй и всё, больше о крепости рассказывать нечего — остальное надо смотреть, щупать и лазить :mrgreen:. Не знаю как вас, но лично меня всякие древние постройки очень впечатляют и данной экскурсией остался очень доволен! На этом я и закончу свой рассказ. Надеюсь хоть кому-то читать его было интересно. Фото, в виде слайд-шоу ниже, прилагаются!

Истории из жизни

Переход на новый уровень

Переход на новый уровень Здравствуйте, уважаемые читатели. Давно не виделись ;-). Как же я соскучился по своему блогу — 4 месяца я ничего не писал. Теперь столько радости — сидеть, клацать по клавишам и видеть эту знакомую страницу редактирования поста. За эти месяцы прошло многое, на самое главное — я успешно закончил первый курс, который дался мне не легко, теперь у меня есть целых 2 месяца свободного времени для реализации множества планов и идей, которые я задумал во время второго семестра.

Раз начал про учёбу, то немного всё-таки расскажу о ней. Как я уже сказал, далась она мне не совсем гладко. Сессия была очень напряжённая, что я даже не написал традиционный пост о дне рождения блога (5 июня блогу исполнилось аж 3 года!) и конечно же о своём дне рождени (21 июня мне исполнилось 19). Во время учёбы были проблемы с некоторыми предметами и преподавателями, сильно боялся остаться с тремя долгами, которые потом как по маслу с относительной лёгкостью закрыл к концу сессии. Причём, по одному из предметов, где была самая ужасная ситуация и я боялся, что вместе с экзаменом не наберу баллов даже на тройку, удалось прыгнуть выше головы, сдать экзамен на максимум баллов и в результате получить оценку «хорошо» — для меня это было хорошим подарком. Больше до такого доводить не буду ;-) — теперь опыт есть. Обойтись без троек не получилось, к тому же, во втором семестре их количество увеличилось в два раза (с 1 до 2 :mrgreen:), но это со всеми бывает. В следующем году попробую выбраться без них, а пока буду отдыхать и ждать официального перевода на второй курс.

В одной моей записи, я высказывал своё слегка негативное мнение о Питере, а некоторые комментаторы утверждали, что Питер чудесный город и моё мнение о нём поменяется через некоторое время. Да, они были правы :roll:, сегодня я уже не ощущаю никаких неудобств связанных с Питером, да и настрой у меня там более рабочий, чем дома.

Всё, об учёбе вроде всё рассказал что хотел, хотя можно и больше, но вряд ли уже это будет интересно читать. Теперь кратко расскажу о своих планах на лето. Более подробно, скорее всего, я расскажу о них в следующем посте.

Начну я естественно с того, что приведу в порядок свой блог: почищу тэги, почищу рубрики — нынешняя рубрикация никуда не годиться ибо слишком много пустых или переполненных рубрик.  Слегка подкорректирую сайт с видеозаписями музыкальных концертов. Соответственно налечь на наполнение некоторых своих сайтов контентом, некоторые тем самым вернуть к жизни. В онлайне пока планов больше нет. Ну а в реале планы достаточно простые — прочитать несколько книг, съездить в парочку путешествий (Ульяновск, Петрозаводск) и заняться собой.

На этом, пожалуй, я и остановлюсь. До скорых встреч, уважаемые читатели и случайные бродяги сети Интернет.

HTML и CSS

Расположение непрозрачного элемента внутри прозрачного (css)

Расположение непрозрачного элемента внутри прозрачного (css) Здравствуйте. Где-то месяц назад я опубликовал статью о том, как реализовать прозрачность cредствами css, где я пообещал в следующем посте рассказать как решить проблему прозрачности, когда все дочерние элементы унаследуют прозрачность от родителя и ничего нельзя с этим сделать. Для решения данной проблемы есть два способа.

Подробнее →

HTML и CSS

Создание тянущейся шапки с логотипом (для начинающих)

Создание “резиновой” шапки с логотипом (для начинающих)

Доброго времени суток, уважаемые читатели. Вчера вечером, мне написал в аську один человек, который попросил помочь ему с шапкой сайта. Перед ним стояла задача: сделать шапку с тянущимся фоном (резиновую) и чтобы посередине был размещён какой-то логотип. Конечно же, я не мог отказать человеку в помощи и поэтому пишу данный пост с примерами реализации такой шапки.

Подробнее →

HTML и CSS

Прозрачность средствами css (для начинающих)

Прозрачность средствами css (для начинающих)

Использование полупрозрачных элементов на странице является частым приёмом в веб-дизайне на сегодняшний день. Помимо этого, полупрозрачные элементы выглядят красиво и украшают страницу, если конечно ими не перебарщивать.

Чтобы сделать полупрозрачный элемент на фоне, например, какого-либо рисунка, можно использовать PNG-прозрачность, но данный способ не подходит для Интернет, поскольку изображения PNG-24 почти не сжимаются и имеют достаточно большой вес, а не все пользователи Рунета живут в центральной части и имеют высокоскоростной доступ в сеть. Как же быть в таком случае, чтобы угодить всем? Можно сделать взять фоновый рисунок, а затем наложить на него слой в графическом редакторе, слой сделать полупрозрачным, а затем сохранить полученное изображение в формате JPEG с приемлемой степенью сжатия. Этот метод подойдёт для небольшого блока фиксированных размеров, а если у нас большой блок с контентом, который ещё и динамически изменяется, то данный метод опять отпадает из-за большого веса изображений (при условии хорошо качества) и не возможности растягивать их. В таком случае у нас один выход, как и при использовании не прозрачного фона для блоков с динамически изменяющимися параметрами – полупрозрачность через использование каскадных таблиц стилей (CSS).

С помощью CSS прозрачность делает очень просто, достаточно к стилю элемента добавить всего 3 строки.

filter:alpha(opacity=100);  /* Здесь непрозрачность указывается в процентах (указывается только числовое значение). */
-moz-opacity:1;  /* Здесь в сотых долях от единицы. 1 = 100% не прозрачный блок. 0.5 (обязательно через точку – ни каких запятых) = 50% не прозрачности т.е. полу прозрачный. */
opacity: 1; /* Аналогично предыдущей строки */

Если честно, то достаточно только третей строки, но, к сожалению, не все браузеры поддерживают стандарты, поэтому для старых браузеров мы добавляем первые две строки. Первая для Internet Explorer, а вторая для старых версий Moziila, третья поддерживается всеми современными браузерами. Как видите, всё очень просто, но здесь есть одна хитрость – прозрачность передаётся «по наследству» от родительского контейнера, ко всем контейнерам внутри него (назовём их, дочерними).

«Унаследование» прозрачности вы можете наблюдать на картинке в начале статьи. К тому же, «унаследованную» прозрачность нельзя убрать, даже если установить для отдельного элемента 100% непрозрачность. Чтобы обмануть браузер, в прямом смысле, и сделать не прозрачный элемент внутри прозрачного, придётся создать 2 блока, один сделать полупрозрачным, а другой оставить «как есть», а затем с помощью CSS «заставить» браузер отобразить один поверх другого. Этот способ не слишком удобный, но есть ещё один – о нём я расскажу в следующем посте.

Теперь вы знаете, как управлять прозрачностью элементов с помощью каскадных таблиц. В одном из следующих уроков, я расскажу о позиционировании. Если вы не можете поставить один блок над другим, то ждите нового урока.

_________________________
Как хорошо, когда телефон это не только средство для общения — можно скачать бесплатные Java игры и поиграть в какие-нибудь игрушки, если застрял в пробке в общественном транспорте.

HTML и CSS

Использование тэга span для форматирования текста

Использование тэга span для форматирования текста Что же это за тэг такой, <span>? Данный тэг необходим для форматирования элементов. Он не является блочным элементом и позволяет, например, изменить стиль для одного слова. Его можно использовать внутри блочных элементов (<p>,<table>,<div>). Span поддерживается всеми известными браузерами (ну ещё бы он не поддерживался каким-либо браузером — стыд и позор :lol:)

Приступим к самому форматированию текста. В html это требует лишь пару символов кода, а всё остальное – чистый css. Хотя, можно прописать стили в html-коде, но это не хорошо, т.к. «нагружает» страницу лишним кодом, поэтому стили надо выносить в отдельный файл. Поскольку <span> это тэг для форматирования, то большая часть статьи будет о изучении и синтаксисе CSS.

Итак, дан текст: «Шел Грека через реку, видит Грека в реке рак, сунул грека руку в реку
рак его за руку цап…». Наши задачи:

  1. Придать словам «река» и «рак» синий цвет шрифта.
  2. Выделить жирным имя героя, без использования тэгов strong или b
  3. Изменить фон  и цвет глаголов, при наведении на них курсора мыши.

Задачи трудные, но это только на первый взгляд. На самом деле всё очень просто. Для начала «окружим» эти слова тэгом <span>. Должно получиться что-то, типа <span>рак</span>. Затем, необходимо присвоить класс к каждому тэгу span. У нас имеется 3 задачи, поэтому нам надо будет ко всем тэгам span присвоить один из трёх соответствующих классов, которые мы назовём, к примеру, “color” (1 задание), ”hero” (2 задание) и ”glagol” (3 задание). Пример присвоения классов к тэгу span — <span class=”color”>рак</span>. Всё, с html покончено, далее будет только CSS.

Создаём отдельный файл (назовите его style.css) и сохраняем его в том же каталоге, что и html файлы с нашим текстом. Подключаем файл стилей к нашей странице, сохраняем сделанные на  html странице изменения и можете смело её закрывать, теперь нам понадобиться только файл style.css. Для начала, ознакомлю вас с синтаксисом CSS. Он очень прост, задаётся селектор (название класса, айди или элемента), а затем идут различные свойства и их параметры. Сложно? Не переживайте, ниже будет пример кода, где вам всё станет понятно.

Итак, ранее мы создали 3 класса для каждой задачи. Теперь будем создавать стили для каждого их классов. Ниже я приведу отрывок кода с комментариями, где вы без труда разберётесь с синтаксисом CSS и не только. Небольшая шпаргалка: поскольку селекторы бывают разных типов, то они могут иметь одинаковые имена (Например, класс «color» и айди «color»), поэтому нам надо «сообщить» браузеру какой именно элемент нам нужен – для этого перед названием элемента ставятся специальные символы (без пробелов): «#» — перед айди, «.» — перед классом и ничего не ставиться перед названием тэга (например, span {} – этот стиль будет применяться для всех тэгов span, встречающихся в документе).

.color { /*Название селектора. В данном случае он называется «color.*/

Color:  #0000ff; /*Задаём тексту синий цвет. Color – свойство, а #ffff00 – параметры свойства.*/

}

.hero {

Font-weight: bold; /* Делаем текст жирным.*/

}

.glagol:hover { /*Дополнительное свойство селектора :hover позволяет задать стиль для данного элемента, который будет отображаться при наведении мыши на элемент.*/

Background: #eeeeee; /*Задаём фоновый цвет.*/

Color:  #666666;

}

Сохраняем написанные стили, запускаем html-файл в браузере и радуемся результату. Если вы всё сделали правильно, то вы увидите то же самое, что и на картинке к данной статье. А если у вас что-то не работает, то посмотрите исходники и найдите свои ошибки.

__________________

Украшать веб-страницы мы научились, теперь пора украшать свою девушку . Тут вместо CSS вам придётся использовать свадебные платья и прочие украшения, например ювелирные.

JavaScript и jQuery

Меню с эффектом наложения на jQuery

Меню с эффектом наложения на jQuery В этом уроке мы создадим простое меню, которое будет выделяться из всей страницы, при наведении на него курсора мыши, затемняя всю остальную часть страниц, при этом само меню будет оставаться незатемнённым, а под-меню будет будет «выезжать» из-под него. «Этот эффект мы воссоздадим используя jQuery.

Разметка

Html структура будет состоять из основного контейнера, который будет содержать в себе неупорядоченный список меню и слой наложения. Каждый элемент меню будет ссылкой и будет содержать в себе слой, в котором будет находиться само под-меню: заголовки и списки.

<div class="oe_wrapper">
	<div id="oe_overlay" class="oe_overlay"></div>
	<ul id="oe_menu" class="oe_menu">
		<li>
			<a href="">Collections</a>
			<div>
				<ul>
					<li class="oe_heading">
						Summer 2011
					</li>
					<li><a href="#">Milano</a></li>
					...
				</ul>
				<ul>
					...
				</ul>
				<ul>
					...
				</ul>
			</div>
		</li>
		<li>
			<a href="">Projects</a>
			<div style="left:-111px;">
				...
			</div>
		</li>
		<li>
			<a href="">Fragrances</a>
			<div style="left:-223px;">
				<ul class="oe_full">
					<li class="oe_heading">
						Fashion Fragrances
					</li>
					<li><a href="#">De?lure</a></li>
					<li><a href="#">Violet Woman</a></li>
					<li><a href="#">Deep Blue for Men</a></li>
					<li><a href="#">New York, New York</a></li>
					<li><a href="#">Illusion</a></li>
				</ul>
			</div>
		</li>
		<li><a href="">Events</a>
			<div style="left:-335px;">
				...
			</div>
		</li>
		<li><a href="">Stores</a>
			<div style="left:-447px;">
				...
			</div>
		</li>
	</ul>
</div>

Каждый список в под-меню необходимо выровнять по левому краю и расположить их в один ряд. Поскольку под-меню должно выводиться поверх элементов страницы, то его положение должно быть задано в абсолютных координатах, но поскольку каждый список в под-меню должен быть расположен внутри под-меню и должны быть выстроены в один ряд, то их положение необходимо задать в относительных координатах, относительно под-меню.

Стили

Сначала убедитесь, что вы сбросили стили. Ведь мы не хотим, чтобы наше меню в каждом браузере имело разную границу и разный отступ.

Начнём со слоя наложения, который будет затемнять остальную часть страницы.

.oe_overlay{
	background:#000;
	opacity:0;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

Позиция данного слоя является фиксированной т.е. он всегда будет на экране монитора, вне зависимости от прокрутки страницы.

Главное меню будет иметь следующий стиль:

ul.oe_menu{	
	list-style:none;
	position:relative;
	margin:30px 0px 0px 40px;
	width:560px;
	float:left;
	clear:both;
}

«Прижимаем» меню к левому краю, оставляя отступ 40 пикселей слева и 30 сверху. Теперь рассмотрим следующий очень важный момент — позиционирование элементов списка.

ul.oe_menu > li{
	width:112px;
	height:101px;
	padding-bottom:2px;
	float:left;
	position:relative;
}

Элементы списка будут позиционироваться относительно, что даёт нам возможность иметь элементы меню, позиционирование которых будет задаваться в абсолютных координатах.

Заголовок главного меню мы превращаем из простого текста в контейнер с текстом. Он будет иметь следующий стиль:

ul.oe_menu > li > a{
	display:block;
	background-color:#101010;
	color:#aaa;
	text-decoration:none;
	font-weight:bold;
	font-size:12px;
	width:90px;
	height:80px;
	padding:10px;
	margin:1px;
	text-shadow:0px 0px 1px #000;
	opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
	background:#fff;
	color:#101010;
	opacity:1.0;
}

В нашем JavaScript коде мы добавим класс «hovered» на элементы главного меню, благодаря чему, при наведении курсора мыши на элемент, фон элемента будет сменяться на белый:

.oe_wrapper ul.hovered > li > a{
	background:#fff;
	text-shadow:0px 0px 1px #FFF;
}

Сделаем под-меню невидимыми, так как они показываются только при наведении курсора мыши на тот или иной элемент главного меню:

ul.oe_menu div{
	position:absolute;
	top:103px;
	left:1px;
	background:#fff;
	width:498px;
	height:180px;
	padding:30px;
	display:none;
}

Затем зададим стиль для ссылок внутри списков под-меню.

ul.oe_menu div ul li a{
	text-decoration:none;
	color:#222;
	padding:2px 2px 2px 4px;
	margin:2px;
	display:block;
	font-size:12px;
}
ul.oe_menu div ul li a:hover{
	background:#000;
	color:#fff;
}

Так как мы будем показывать одновременно только одну подменю, то сделаем так, чтобы оно занимало всё пространство по длине главного меню.

ul.oe_menu div ul.oe_full{
	width:100%;
}

Если же внутри под-меню у нас не один список, то мы задаём им ширину в 150 пикселей, что позволяет нам разместить до трёх списков в один ряд.

ul.oe_menu li ul{
	list-style:none;
	float:left;
	width: 150px;
	margin-right:10px;
}

И наконец, выделим заголовок под меню особым стилем:

li.oe_heading{
	color:#aaa;
	font-size:16px;
	margin-bottom:10px;
	padding-bottom:6px;
	border-bottom:1px solid #ddd;
}

Работу со стилями мы закончили. Теперь перейдём к созданию эффектов с помощью javascript фреймворка jQuery.

Javascript

Основная идея заключается в том, чтобы затемнить всю страницу, за исключением меню. Слой наложения всегда будет поверх страницы, но под меню, потому, что в html-коде он идёт после всего, но раньше меню. К тому же, здесь нам помогает свойство z-index задающее положение элементов по оси z (направленна к нам, относительно плоскости монитора).

Начнём с того, что зарезервируем некоторые элементы.

var $oe_menu		= $('#oe_menu');
var $oe_menu_items	= $oe_menu.children('li');
var $oe_overlay		= $('#oe_overlay');

Когда мы наводим курсор мыши на один из элементов главного меню, то к соответствующему элементу присваиваются классы «selected» и «slided». В этот момент один соответствующий слой под-меню выезжает, а остальные остаются невидимыми, для этого мы даём очень большое значение свойству z-index данного слоя. Когда мы убираем курсор мыши с элемента главного меню, то класс «selected» снимается с данного элемента.

$oe_menu_items.bind('mouseenter',function(){
	var $this = $(this);
	$this.addClass('slided selected');
	$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
		$oe_menu_items.not('.slided').children('div').hide();
		$this.removeClass('slided');
	});
}).bind('mouseleave',function(){
	var $this = $(this);
	$this.removeClass('selected').children('div').css('z-index','1');
});

Класс «selected» необходим для оформления, а вспомогательный, в данном случае, класс «slided» лишь для идентификации элемента, находящегося в данный момент времени в раскрытом состоянии.

После наведения курсора мыши на меню, мы устанавливаем прозрачность слоя наложения равной 60% и добавляем класс «hovered» на контейнер для меню, что устанавливает на всё меню в целом белый фон.

$oe_menu.bind('mouseenter',function(){
	var $this = $(this);
	$oe_overlay.stop(true,true).fadeTo(200, 0.6);
	$this.addClass('hovered');
}).bind('mouseleave',function(){
	var $this = $(this);
	$this.removeClass('hovered');
	$oe_overlay.stop(true,true).fadeTo(200, 0);
	$oe_menu_items.children('div').hide();
})

Вот и всё! Наше меню готово! Надеюсь, что данный урок был интересен и полезен для вас.

Демонстрация работы | Скачать.

Данная статья является моим переводом с обработкой статьи с сайта tympanus.net.
______________________
Если вы любите посидеть вконтакте, то наверняка вы уже слышали фразы в свою сторону типа: «Опять ни черта не делал — весь день вконтакте онлайн!». Тогда вам в помощь статусы про обман — специальный скрипт для Opera 9, позволяющий сидеть вконтакте offline.