Рад сообщить об открытии рубрики “Учимся на живых примерах”. В ней будут рассматриваться уже существующие в интернете сайты, а точнее их элементы, будет рассказано как то или иное сделано. А любителям можно будет просто поглядеть на это дело, ведь красиво.
Сегодня на рассмотрении реализация скрипта вертикального меню с блоком контента, работу которого можно посмотреть на сайте художницы “Марии Берсеневой”. Собственно сайт я и делал.
Работа скрипта: при наведении на графические пункты меню (слева) меняется контент справа, естественно, без каких-либо перезагрузок. При этом желательно, чтобы контент сменялся не мгновенно, а с эффектами затухания.
Подобная вещь довольно просто реализуется на флэше. Но флэш я не изучаю, поэтому надо было обойтись без него. Готового примера я не нашёл, а посему решил действовать вручную.
Инструментальный набор для программирования: "продвинутый javascript", а именно AJAX, а ещё точнее библиотека jQuery.
Возникшие проблемы и особенности вёрстки
Основная проблема заключалась вот в чём. Сайт не резинка, кнопки и блок контента различной ширины (по сути фиксированной, относительно других деталей сайта), необходимо, чтобы кнопки удлинялись влево при увеличении разрешения экрана. Единственным выходом, как мне показалось, было создать таблицу, шириной 100%, в четыре колонки, где две центральные имели бы жёсткие ширины, а две боковых были бы резинками (см.рис.).
Далее был проведён анализ первичного поведения, которым должен обладать скрипт. Необходимо, чтобы при наведении на пункты меню менялись четыре вещи:
-
На изображении надписи менялся фон и появлялась стрелка
-
Менялся бэкграунд второго столбца таблицы.
-
Менялся бэкграунд первого столбца таблицы.
-
Менялся контент справа.
Задание получено, пора выполнять.
HTMLим и CSSим.
Все смотрим на картинку.
Работа будет идти по первым трём столбцам. Первому столбцу присвоен класс .left_menu, второму присвоен идентификатор #left_menu, а третьему присвоен идентификатор #mainpage_c.
Каждая кнопка состоит из трёх частей (четырёх, если считать контент). При этом все её части (и контент тоже) имеют одинаковые начала названий идентификаторов. Например, для кнопки “фан-арт” они все начинаются на lb_fanart: во втором столбце расположен контейнер и идентификатором #lb_fanart, в котором расположен контейнер с изображением названия кнопки – #lb_fanart_img, в первом столбце продолжение кнопки – контейнер с идентификатором #lb_fanart2, а в третьем столбце в контейнере #lb_fanart_cont расположено содержимое блока.
А теперь смотрим код.
<tr>
<!--Первый столбец таблицы. Левая часть кнопок-->
<td valign="top" class="left_menu">
<div id="lb_fanart2"> </div>
<div id="lb_colls2"> </div>
<div id="lb_other2"> </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"> </td>
</tr>
</table>
И теперь CSS к нему.
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: Программирование
(голосов: 2, средний: 3.00 из 5)
Загрузка ...
09/03/2011 at 8:48 Постоянная ссылка Цитировать
а уменя интернет-магазин на скриптах шопскрипт фри. мне бы просто облагородить немного меню. дизайн сменить чтоли. это всё что я придумал. чтонибуть болеее стильненькое бы
09/03/2011 at 9:41 Постоянная ссылка Цитировать
Дизайн точно сменить стоит,т.к. то что есть назвать дизайном язык не поворачивается.
В любом случае если есть желание, можете написать мне в личку, обсудим.