1. Сначала нужно меню отрисовать, как правило это делается в фотошопе. Создается слой с меню и под ним слой со свечением одного из пунктов меню. Как сделать красивое свечение рассказывать не буду, это выходит за рамки урока.
Должно выглядеть как то так:
2. дальше вырезаем само свечение полностью, чтобы переходящие оттенки в черный фон тоже были.
Размер рисунка получился 99х47 пикселей.
3. Далее выводим само меню на странице, с разделением по типам активное и неактивное. Скажу как сделал это я: Есть коонтейнер (далее DIV) с id=menu - div id="menu"
css свойства этого контейнера:
#menu{
height:47px; //равен высоте рисунка светящейся подложки padding:0 30px; //делаю отступ слева и справа приблизительно треть от ширины подложки, потом будет понятно зачем.
}
height:47px; //равен высоте рисунка светящейся подложки padding:0 30px; //делаю отступ слева и справа приблизительно треть от ширины подложки, потом будет понятно зачем.
}
#menu a{
color:#fff; //цвет текста ссылок меню по умолчанию
margin-right: 7px; //отступ справа от всех пунктов меню
}
color:#fff; //цвет текста ссылок меню по умолчанию
margin-right: 7px; //отступ справа от всех пунктов меню
}
4. внутри идут div'ы с самим пунктами меню. Есть два типа этих пунктов: активные и неактивные, соответственно div id="menu_active" и div class="menu_disactive".Почему в первом случае я использую ID а во втором CLASS? Объясняю - по специфике CSS ID должно быть уникально и встречаться только у одного элемента на странице, то есть активным у нас может быть только один пункт меню, тот на какой странице мы находимся. Все остальные пункты меню, должны подчиняться одним и тем же правилам, соответсвенно используем class.
CSS свойства обоих типов:
#menu_active{
height:47px; //равен высоте рисунка светящейся подложки
text-align:center; //центруриуем пункты меню по ширине
padding-top:22px; //центрируем пункты меню по высоте
float:left; //чтобы меню шли в строку, а не в столбец
}
height:47px; //равен высоте рисунка светящейся подложки
text-align:center; //центруриуем пункты меню по ширине
padding-top:22px; //центрируем пункты меню по высоте
float:left; //чтобы меню шли в строку, а не в столбец
}
#menu_active a{
color:#09e1fa; //выделяем активное меню цветом
}
color:#09e1fa; //выделяем активное меню цветом
}
.menu_disactive{
height:47px; //равен высоте рисунка светящейся подложки
text-align:center; //центрируем пункты меню по ширине
padding-top:22px; //центрируем пункты меню по высоте
float:left; //чтобы меню шли в строку а не в столбец;
}
height:47px; //равен высоте рисунка светящейся подложки
text-align:center; //центрируем пункты меню по ширине
padding-top:22px; //центрируем пункты меню по высоте
float:left; //чтобы меню шли в строку а не в столбец;
}
5. К слоям пунтов неактивных меню, добавляем два javascript события: onmouseout и onmouseover:
<div class="menu_disactive" onmouseout="menu_disactive(this)" onmouseover="menu_active(this)">
<a href="/menu2/">Меню2</a>
</div>
<a href="/menu2/">Меню2</a>
</div>
6. Теперь сами функции menu_active() и menu_disactive(). Думаю тут всё понятно, комментировать не буду:
function menu_active(item){
var menuW=itemW(document.getElementById('menu'));
var elementW=itemW(item);
var menu_active=document.getElementById('menu_active').style.background="none";
var menu=document.getElementById('menu');
itemx=item.offsetWidth;
if (itemx<99){
newx=elementW-menuW-(99-itemx)/2;}
else{
newx=elementW-menuW+(itemx-99)/2;}
menu.style.background="URL(/images/menu_active.jpg) "+newx+"px 0 no-repeat";
}
function menu_disactive(item){
var menu=document.getElementById('menu');
menu.style.background="none";
select_menu();
}
function select_menu(){
var item=document.getElementById('menu_active');
var menu=document.getElementById('menu');
var menuW=itemW(menu);
var elementW=itemW(item);
itemx=item.offsetWidth;
if (itemx<99){
newx=elementW-menuW-(99-itemx)/2;}
else{
newx=elementW-menuW+(itemx-99)/2;}menu.style.background="URL(/images/menu_active.jpg) "+newx+"px 0 no-repeat";
}
function itemW (elem){
var l = 0;
while (elem)
{
l += elem.offsetLeft;
elem = elem.offsetParent;
}
return l;
}
var menuW=itemW(document.getElementById('menu'));
var elementW=itemW(item);
var menu_active=document.getElementById('menu_active').style.background="none";
var menu=document.getElementById('menu');
itemx=item.offsetWidth;
if (itemx<99){
newx=elementW-menuW-(99-itemx)/2;}
else{
newx=elementW-menuW+(itemx-99)/2;}
menu.style.background="URL(/images/menu_active.jpg) "+newx+"px 0 no-repeat";
}
function menu_disactive(item){
var menu=document.getElementById('menu');
menu.style.background="none";
select_menu();
}
function select_menu(){
var item=document.getElementById('menu_active');
var menu=document.getElementById('menu');
var menuW=itemW(menu);
var elementW=itemW(item);
itemx=item.offsetWidth;
if (itemx<99){
newx=elementW-menuW-(99-itemx)/2;}
else{
newx=elementW-menuW+(itemx-99)/2;}menu.style.background="URL(/images/menu_active.jpg) "+newx+"px 0 no-repeat";
}
function itemW (elem){
var l = 0;
while (elem)
{
l += elem.offsetLeft;
elem = elem.offsetParent;
}
return l;
}
menu_active.jpg - это как раз наша картинка-подложка.
И еще небольшое дополнение. Чтобы при открытии страницы наше свечение сразу находило то самое место сделаем вот что:
<body onLoad="select_menu()">
Вот такой вот небольшой урок. Пробуйте, тестируйте, буду рад вопросам и пожеланиям.
Читать дальше...
Комментариев нет:
Отправить комментарий