Изготовление меню с ярлычками. Часть первая. Библиотека I2R. Еще один вариант использования css-позиционирования для разработки навигационной панели - пример работает в практически всех "главных" браузерах.

Меню с ярлычками по типу того, что висит сверху на странице. Сразу предупреждаю — тот вариан, что вы видите, не совсем уверенно работает в Нетскейпе6 и совсем не работает в Опера пятых и шестой версий. Оставленно оно частично из-за лени, частично из принципа...

Начинается все с простого эксперимента — несколько слоев позиционируем абсолютно и задаем им одинаковые координаты. При просмотре изготовленного в броузере мы обнаруживаем интересную (и вполне ожидаемую) картину — видимым является только тот слой, который выводится последним (последний из прописанных в страничке). Все остальные оказываются под ним. Работает это и в Эксплорерах, и в Опере, и в Нетскейпе6. По идее, это и является основой меню — на надо только менять расположение ДИВов, то один сверху, то другой...

Тут интересный момент есть — получается, что ДИВы наши имеют один Z-индекс, но располагаются друг под другом. Прекрасный пример важности очередности вывода блоков...

Теперь нам надо поменять порядок вывода слоев, или, если точнее, их расположение. Логичнее всего попробовать просто изменить Z-индекс необходимого нам блока, причем для достижения "натуральности" менять нам придеться еще и другие параметры (цвета блока, цвета рамочек, цвета текста). Поясню всю необходимую нам картину — ярлычки должны быть активными и неактивными, при нажатии на определенный ярлык вверху оказывается нужный нам слой, сам ярлычок "загорается". По идее, расположенное на этой страничке меню является несколько "кастрированным" вариантом задуманного — все блоки с ссылками имеют одинаковое описание стилей (почти), а задумывалось меню с разным цветом ярлычков и панелей. Нажимаем на синий ярлык — получаем синюю панель, нажимаем на желтый — желтый.

Делаем наш скриптик:



<SCRIPT LANGUAGE="Javascript">

<!--

function ba (id) {

document.getElementById(id).className = 'vs';

document.all[id].className = 'vs';

}



function b (id) {

document.getElementById(id).className = 'hd';

document.all[id].className = 'hd';

}

//-->

</script>

Примерно что-то в этом духе... Прописываем два класса в стилях для наших блоков-панелей:



.vs {z-index: 5; }

.hd {z-index: 2; }

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

Посмотрите результат

Пока мы меняем порядок расположения блоков с помощью простых ссылок (кстати, в Эксплорере есть такая кнопка — "ВИД", выберите в выпадающем при ее нажатии пункт "просмотр HTMLкода" и спокойно все посмотрите), нам же надо сделать ярлычки...

Разберемся с происходящим при нажатии на ярлык — изменяя Z-индекс появляется нужная панель, все остальные панели уходят вниз, ярлык, на который мы нажимали, тоже передвигается на передний план. В принципе, если рамочки делать не будем, все сильно упрощается. Если панели делать с рамочками, то при нажатии на ярлык и появлении панели того-же цвета ярлык должен как-бы сливаться с панелью, составлять одно целое, а рамочки нам тут все могут подпортить. С ярлыками все просто — мы указываем рамки только для правого, левого и верхнего краев, для панели нам надо указывать все рамочки, тут никуда не дется. Для "сливания" придется расположить ярлычки так, чтоб нижним краем они закрывали верхний край панели на ширину рамки. Именно из-за этого нам придеться изменять Z-индекс не только панелям, но и ярлыкам — прятать их под все наши панели.

Теперь о расположении. Или, если точнее, о порядке вывода блоков. В приведенном выше примере мы используем два Z-индекса — больше и не понадобится.

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

Предположим, у нас два ярлыка и две панели синего и желтого цветов. При нажатии на желтый ярлык должна появлятся желтая панель, ярлык должен располагаться НАД панелью. Можно, конечно, прописать отдельные Z-индексы для панелей и ярлыков, но можно сделать все значительно проще — ярлык должен находится на том-же уровне, что и панель, но выводиться должен ПОСЛЕ панели. Описываться это будет примерно так:

блок панели
блок ярлычка для этой панели

блок панели
блок ярлычка для этой панели

В этом случае при одинаковом Z-индексе панели и ярлычка ярлычок будет находиться всегда выше своей панели.

В стилях пишем примерно следующее:



BODY { padding: 0px 0px 0px 0px;

margin: 0px 0px 0px 0px;

font-size: 10px;

font-family: Verdana, sans-serif;

font-style: normal;

font-size-adjust: 0.58;  

}



#banner0 {background-color: #FF6A55;

border: 1px solid; 

border-color: #000000;

position: absolute; left: 50%;

top: 100; 

height: 100;

width: 46%; 

overflow: auto;

color: #000000;

font-size: 10px;

}



#bb0 {background-color: #FF6A55;

border-top: 1px solid #000000;

border-right: 1px solid #000000;

border-left: 1px solid #000000;

position: absolute; left: 50%;

top: 80; 

height: 21;

width: 10%; 

color: #fff;

font-size: 10px;

text-align: center;

}



#banner1 { background-color: #EEBB1F;

border: 1px solid #000000;

position: absolute; left: 50%;

top: 100; 

height: 100;

width: 46%; 

overflow: auto;

text-align: left;

color: #000000;

font-size: 10px;

}



#bb1 {background-color: #EEBB1F;

border-top: 1px solid #000000;

border-right: 1px solid #000000;

border-left: 1px solid #000000;

position: absolute; left: 61%;

top: 80; 

height: 21;

width: 10%; 

color: #fff;

font-size: 10px;

text-align: center;

}



#banner2 { background-color: #00C000;

border: 1px solid #000000;

position: absolute; left: 50%;

top: 100; 

height: 100;

width: 46%; 

overflow: auto;

text-align: left;

color: #000000;

font-size: 10px;

}



#bb2 {background-color: #00C000;

border-top: 1px solid #000000;

border-right: 1px solid #000000;

border-left: 1px solid #000000;

position: absolute; left: 72%;

top: 80; 

height: 21;

width: 10%; 

color: #fff;

font-size: 10px;

text-align: center;

}



.vs {z-index: 5;}

.hd {z-index: 2;}



#bb0 A { color: #000;

text-decoration: none; 

font-size: 10px;

}

#bb0  A:hover  {color: #000;

text-decoration: underline;}  



#bb1 A { color: #000;

text-decoration: none; 

font-size: 10px;

}

#bb1  A:hover  {color: #000;

text-decoration: underline;}  



#bb2 A { color: #000;

text-decoration: none; 

font-size: 10px;

}

#bb2  A:hover  {color: #000;

text-decoration: underline;}

Все #banner здесь — описания панелей, все #bb — описания ярлычков.

Посмотрите результат

Часть вторая. Продолжение здесь. Много получается писанины... :)

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Изготовление меню с ярлычками. Часть первая