Скрипт меню с контентом “почти как флэш” своими руками. Часть 1. Вёрстка.

« Предыдущая запись
 
  Следующая запись »
 

Рад сообщить об открытии рубрики “Учимся на живых примерах”. В ней будут рассматриваться уже существующие в интернете сайты, а точнее их элементы, будет рассказано как то или иное сделано. А любителям можно будет просто поглядеть на это дело, ведь красиво.

Сегодня на рассмотрении реализация скрипта вертикального меню с блоком контента, работу которого можно посмотреть на сайте художницы “Марии Берсеневой”. Собственно сайт я и делал.

Работа скрипта: при наведении на графические пункты меню (слева) меняется контент справа, естественно, без каких-либо перезагрузок. При этом желательно, чтобы контент сменялся не мгновенно, а с эффектами затухания.

Подобная вещь довольно просто реализуется на флэше. Но флэш я не изучаю, поэтому надо было обойтись без него. Готового примера я не нашёл, а посему решил действовать вручную.

Инструментальный набор для программирования: "продвинутый javascript", а именно AJAX, а ещё точнее библиотека jQuery.

11123 thumb Скрипт меню с контентом “почти как флэш” своими руками. Часть 1. Вёрстка.

Возникшие проблемы и особенности вёрстки

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

Untitled1 thumb Скрипт меню с контентом “почти как флэш” своими руками. Часть 1. Вёрстка.

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

  1. На изображении надписи менялся фон и появлялась стрелка
  2. Менялся бэкграунд второго столбца таблицы.
  3. Менялся бэкграунд первого столбца таблицы.
  4. Менялся контент справа.

Задание получено, пора выполнять.

HTMLим и CSSим.

Все смотрим на картинку.

Untitled2 thumb Скрипт меню с контентом “почти как флэш” своими руками. Часть 1. Вёрстка.

Работа будет идти по первым трём столбцам. Первому столбцу присвоен класс .left_menu, второму присвоен идентификатор #left_menu, а третьему присвоен идентификатор #mainpage_c.

Каждая кнопка состоит из трёх частей (четырёх, если считать контент). При этом все её части (и контент тоже) имеют одинаковые начала названий идентификаторов. Например, для кнопки “фан-арт” они все начинаются на lb_fanart: во втором столбце расположен контейнер и идентификатором #lb_fanart, в котором расположен контейнер с изображением названия кнопки – #lb_fanart_img, в первом столбце продолжение кнопки – контейнер с идентификатором #lb_fanart2, а в третьем столбце в контейнере #lb_fanart_cont расположено содержимое блока.

А теперь смотрим код.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!--Первый столбец таблицы. Левая часть кнопок-->
<td valign="top" class="left_menu">
<div id="lb_fanart2">&nbsp;</div>
<div id="lb_colls2">&nbsp;</div>
<div id="lb_other2">&nbsp;</div>
</td>
<!--Второй столбец таблицы. Кнопки-->
<td width="418px" valign="top" id="left_menu">
<img src="blank.gif" width="418px" height="1px"><br>
<div id="lb_fanart">
<div id="lb_fanart_img"> <img src="blank.gif" alt="фан-арт" width="344" height="22"> </div>
</div>
<div id="lb_colls">
<div id="lb_colls_img"> <img src="blank.gif" alt="коллекции" width="344" height="21"> </div>
</div>
<div id="lb_other">
<div id="lb_other_img"> <img src="blank.gif" alt="другое" width="344" height="20"></div>
</div>
</td>
<!--Третий столбец таблицы. Контент-->
<td valign="top" width="557px" id="mainpage_c">
<img src="blank.gif" width="557px" height="1"><br>
<div id="conti">
<div id="lb_fanart_cont" style="display:block">
<h1>Персонажи из игр, аниме, книг</h1><br>
<p>В разделе “фанарт” присутствуют работы, посвященные играм, некоторым сериалам и книгам. Какие-то из них были нарисованы по просьбе знакомых и друзей, некоторые под собственным впечатлением.</p>
</div>
<div id="lb_colls_cont">
<h1>Гейши, Феи, Знаки Зодиака</h1><br>
Коллекции работ на заданные тематики для схем, загружаемых в автоматзированные вышивальные машины. Реализованы в компании EMEE (Австралия).
</div>
<div id="lb_other_cont">
<h1>Всякие другие штучечки</h1>
</div>
</div>
</td>
<!--Четвёртый столбец таблицы. Бэкграунд-->
<td bgcolor="#efeff5">&nbsp;</td>
</tr>
</table>

И теперь CSS к нему.

#left_menu, .left_menu {/*класс и ид к 1 и 2 столбцу таблицы (кнопки)*/
background:#d8dadd; /*задаём тёмно-серый фон кнопок*/
}
.left_menu #lb_fanart2 {
background:#efeff5;/*св.-серый фон левой части первой кнопки*/
}
/*два правила по высоте кнопок и бордюру (разделения кнопок по ним)*/
.left_menu div{
height:58px;
border-bottom: 1px solid #bdc0c6;
}
.left_menu #lb_other2 {
border:none;
height:59px;
}
/*Контейнеры кнопок во втором столбце таблицы*/
#left_menu #lb_fanart{
border-bottom: 1px solid #bdc0c6;
padding: 19px 0 17px 65px;
background:#efeff5;/*св.-серый фон правой части первой кнопки*/
}
#left_menu #lb_colls{
border-bottom: 1px solid #bdc0c6;
padding: 21px 0 16px 65px;
}
#left_menu #lb_other{
padding: 21px 0 18px 65px;
}
/*Контейнеры с изображением кнопок во втором столбце таблицы */
#left_menu #lb_fanart #lb_fanart_img {
background:url(images/lbut_fanart_act.png) no-repeat;
width: 344px;
height: 22px;
}
#left_menu #lb_colls #lb_colls_img {
background:url(images/lbut_collects.png) no-repeat;
width: 344px;
height: 21px;
}
#left_menu #lb_other #lb_other_img {
background:url(images/lbut_other.png) no-repeat;
width: 344px;
height: 20px;
}
#mainpage_c { /*Третий столбец таблицы*/
background-color: #efeff5; /*св.-серый фон поля контента*/
border-right: 1px solid #bdc0c6;
border-left: 1px solid #bdc0c6;
}
#conti div { /*настройки для каждого контейнера с контентом*/
display:none; /*отрубаем из видимости все контейнеры с контентом*/
padding: 10px 0 0 12px;
height: 167px;
}

Сразу скажу, если не обратили внимание сразу, что кнопке “фан-арт” мы задали светло-серый фон, то есть при загрузке страницы она будет как-бы активна. Все остальные пояснения для CSS – в листинге. Осталось дать пару комментариев для кода HTML.

  • 11 и 27 строчки – это изображения-распорки. они представляют собой однопиксельное прозрачное гиф-изображение, которому ставятся необходимая ширина. Нужно это с одной целью – чтобы при уменьшении разрешения экрана  вёрстка не плыла (делается вроде как только для некоторых версий IE).
  • В 13, 17 и 21 строчках содержатся изображения, всё те же гифки. Они просто имитируют изображения кнопок (сами изображения кнопок прописаны в CSS как бэкграунд к контейнерам).
  • 29 строчка. Прописан стиль для первого блока контента, чтобы он отображался при загрузке странице сразу (если помните, в css мы отключили их видимость).
  • 48 строчка, четвёртый столбец. К нему указан только цвет бэкграунда.

Вместо заключения

В целом всё готово для того, чтобы оживить меню. Думаю ни для кого не секрет, что мы будем работать с javascript и нам останется только написать сам скрипт, и дописать пару строчек в html-код – там мы будем работать с событием onMouseOver.

Пример того, что мы сегодня сделали можно скачать по ссылке.

Кажется всё. Если у вас есть какие-то идеи относительно того, как можно иначе было решить вопрос вёрстки, буду рад выслушать. Ну а также, если вы знаете готовый скрипт, который бы делал что-то похожее, тоже был бы очень признателен=).

 

Ссылки по теме

, , , , , , ,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 2, средний: 3.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 2 на запись

"Скрипт меню с контентом “почти как флэш” своими руками. Часть 1. Вёрстка."

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

  2. Дизайн точно сменить стоит,т.к. то что есть назвать дизайном язык не поворачивается.
    В любом случае если есть желание, можете написать мне в личку, обсудим.

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии