Речь пойдёт о выпадающем меню.Условия:

1. должно работать во всех браузерах;
2. наигибкость при динамическом создании меню в cms;
3. настраиваемый внешний вид

Скрипт не претендует на звание наилучшего. Свои минусы тоже имеются.
Для примера было взято меню с Blender3D.

Начнём с простого. Создадим меню из ссылок:


<div id="ns_navigation">
<div></div>
<a href="about" onmouseover="ns_menushow(this, ‘Features=features| Gallery=gallery| Applications=applications| Testimonials=testimonials| Requirements=requirements’);" onmouseout="ns_menuhide(this);">About Blender</a>
<div></div>
<a href="news" onmouseover="ns_menushow(this, ‘Blender News=blender-news| Announcements=announcements| Development=development| Artists=artists|Submit News=submit-news’);" onmouseout="ns_menuhide(this);">News</a>
.............................................................
<a href="blender-foundation" onmouseover="ns_menushow(this, ‘About=about|Blender conference=blender -onference|History=history|Donation & payment=donation-n-payment|Press=press|Media Exposure=media-exposure’);" onmouseout="ns_menuhide(this);">Blender Foundation</a>
<div></div>
<a href="e-shop" onmouseover="ns_menushow(this, ‘Books=books|Downloadable=downloadable|CD Roms=cd-roms|Blender Wear=blender-wear’);" onmouseout="ns_menuhide(this);">E-Shop</a>
</div>

Ссылки находятся внутри <div id=”ns_navigation”> в общем, так сказать, контейнере. А между ссылками находятся div’ы которые будут отображать разделительную картинку. Сами ссылки имеют события onmouseover и onmouseout и это логично. При вызове функции ns_menushow отправляются параметры: this – элемент на который навели курсором мыши, а второй элемент строка содержащая всё названия и url ссылок для выпадающего меню. Очень удобно по определённому символу разделять строку на элементы массива. Я выбрал символ «|» для разделения на пункты меню и знак « = » для разделения заголовка и самой ссылки (ссылки здесь указаны в виде пермалинков).

Чтобы всё красиво выглядело подключаем css-файл в котором пишем:


div#ns_navigation{
margin: 0px;
padding: 0px;
text-align: left;
font: 11px Verdana;
}
div#ns_navigation{
background-color: #000000;
height:19px;
width: 724px; // ширину придётся подстраивать вручную
overflow: hidden; //в IE6 есть баг при котором последний пункт меню дублируется и вставляется под меню, поэтому - скрываем
}
#ns_navigation a{
display: block;
float:left;
text-decoration: none;
color: #FFFFFF;
padding: 3px 14px 2px 14px;
}
#ns_navigation div{ //настраиваем разделительную картинку
margin: 0px;
padding: 0px;
float:left;
width: 1px;
height: 18px;
background: url(ns_dropdown_menu.gif);
}
#ns_navigation a:link, #ns_navigation a:visited{
background-color: #00518c;
}
#ns_navigation a:hover, #ns_navigation a:active{
background-color: #003c63;
}

Внешний вид горизонтального меню готов. Теперь займёмся созданием выпадающего меню.
Подключаем javascript-файл в котором пишем:


var dropmenu = document.createElement("div"); //создаём тэг div куда поместим подменю
var over_head = false; // переменные для определения, держит ли
var over_menu = false; // пользователь мышку на главном или выпавшем меню или нет


// отличная функция, определяющая точные координаты элемента, независимо в каком тэге находится меню. Работает во всех браузерах.
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
// возвращает левую и верхнюю позицию в массиве
return [curleft,curtop];
}


function ns_menushow(menu_head, string_params) { // функция показа меню
var positions = findPos(menu_head); //получаем точную координату элемента
var left = positions[0] - 1; // присваеваем координату переменной left
var top = positions[1] + menu_head.offsetHeight + 1; // присваеваем координату переменной top, но добавляем высоту горизонтального меню.
var params = string_params.split(’|'); // делим строку с параметрами напункты меню
var html = "";
for (i=0; i < params.length; i++){ // в цикле делим пункты меню
title = params[i].split(’='); // на заголовки и адреса и генерируем ссылки
html += "<a href='" + title[1] + "'>" + title[0] + "";
}
document.body.appendChild(dropmenu); // помещаем div на страницу
dropmenu.innerHTML = html; // помещаем в него ссылки
dropmenu.style.left = left + "px"; // задаём левую позицию
dropmenu.style.top = top + "px"; // задаём верхнюю позицию
dropmenu.id = ‘ns_dropmenu’; // называем
over_head = true; // а здесь говорим: курсор находится на заголовке меню
}


dropmenu.onmouseover = function(){ // если наводим курсор на выпавшее меню
over_menu = true;
}


dropmenu.onmouseout = function(){ // если убираем курсор с выпавшего меню
over_menu = false;
var tim = setTimeout("ns_clear()", 1500); // через полторы минуты запускаем функцию удаления выпадающего меню
}


var tim;
function ns_clear(){
var dropmenu = document.getElementById(’ns_dropmenu’);
if(!over_menu && !over_head && dropmenu){
// если курсора нет ни на главном меню ни на выпадающем и вообще существует выпадающее меню, то удаляем его.
document.body.removeChild(dropmenu);
clearTimeout(tim);
}
}


function ns_menuhide(){ // если убираем курсор с главного меню
over_head = false;
var tim = setTimeout("ns_clear()", 1500); // через полторы минуты запускаем функцию удаления выпадающего меню
}

Ну вот. Надеюсь в комментариях понятно объясни что и как.
Осталось настроить внешний вид выпадающего меню.


div#ns_dropmenu{
background-color: #EFEFEF;
position: absolute;
width: 160px;
overflow: hidden;
filter:alpha(opacity=75);
opacity:.75;
}
#ns_dropmenu a{
display: block;
text-decoration: none;
color: #FFFFFF;
padding: 5px 20px;
margin: 0px;
}
#ns_dropmenu a:link, #ns_dropmenu a:visited{
background-color: #7392ad;
}
#ns_dropmenu a:hover, #ns_dropmenu a:active{
background-color: #003c63;
}

И добавляем #ns_dropmenu в самую первую инструкцию для горизонтального меню:


div#ns_navigation, div#ns_dropmenu{
margin: 0px;
padding: 0px;
text-align: left;
font: 11px Verdana;
}

В итоге должно получиться нечто такое.
Скачать исходник

Можно было бы сделать подсказку атрибутами alt или title, но они появляются и исчезают как-то вяло. Мне захотелось жизни. Хотелась чтоб подсказка двигалась вместе с мышкой. И вот результат.

Итак:

Для начала подумаем куда деть оформление подсказки. Если хотите можно в отдельный css файл или напрямую в html воткнуть в тэг <style>. Я выбрал первое. Создал css файл в который написал следующее:

#ns_tt{
position: absolute;
border: solid #AAAAAA 1px;
background-color: #DDDDDD;
font-family: Tahoma, sans-serif;
font-size: 11px;
line-height: 16px;
padding: 2px 5px;
overflow: hidden;
margin: 25px 0px 0px 5px;
}
Тем самым оформил текст и саму подсказку. “position: absolute” здесь является директивой позиционирования подсказки. Она не должна зависеть от других элементов. Поэтому не трогайте её. Остальное можно менять по своему усмотрению. Разве что рекоммендую margin меньше не делать иначе подсказка попадёт под курсор и будет подрагивать.

Пойдём далее.

Дальше в вашем html файле подключаем css файл:

<link rel="stylesheet" type="text/css" href="your_css_file.css" />
Создаём js файл.
Вот тут самое интересное.
Создаём переменные отвечающие за левую и верхнюю позицию подсказки:

var l = 0, t = 0
Проверяем браузер. Если это Internet Explorer, то он будет понимать document.all и соответственно у него другие понятия о событиях и значениях которые они возвращают.

var IE = document.all?true:false
При движении мыши запускаем функцию, которую опишем ниже:

document.onmousemove = getMouseXY
Создаём элемент div который у нас будет являться подсказкой:

var ns_tt = document.createElement("div")
А эта функция будет изменять положение подсказки относительно положения курсора мыши:

function getMouseXY(e) {
if (IE) {
l = event.clientX + document.body.scrollLeft
t = event.clientY + document.body.scrollTop
}
else {
l = e.pageX
t = e.pageY
}
ns_tt.style.left = l + "px"
ns_tt.style.top = t + "px"
return true
}
Как вы видели мы проверяли наличие браузера IE. Дело в том что IE во-первых: положение курсора мыши понимает из объекта event в частности его значений clientX и clientY; во-вторых: координаты мыши отсчитываются от левого верхнего угла окна браузера, а когда пользователь использует прокрутку то в IE координата смещается, чего нет в других браузерах.

Следующая функция помещает в body нашу подсказку, вставляет текст переданый в качестве параметра и даёт ей уникальное имя, по которой в последствии мы будем её искать для удаления:

function AddTT(tt_text){
document.body.appendChild(ns_tt)
ns_tt.id = "ns_tt"
ns_tt.innerHTML = tt_text
}
Последняя функция удаляет подсказку:

function RemoveTT() {
document.body.removeChild(document.getElementById("ns_tt"))
}
Теперь подключаем js-файл к html-файлу. В любое место html-файла вставляем код:

<script type="text/javascript" src="ns_tooltip.js"></script>
Ну и то чез чего всё это не будет работать. Нужно выбрать элемент и поместить туда код вызова и удаления подсказки например:

<div onmouseover="AddTT('Вы читаете этот текст,<br /> а сейчас видите <b>подсказку</b>');" onmouseout="RemoveTT();">
Текст, картинка, блок... да любой объект над которым появится подсказка!
</div>
Будьте аккуратны с кавычками в onmouseover.
Для подсказки в CSS можно добавить например фильтр полупрозрачности (Работает везде, кроме IE6.):

filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
Тестировано в: IE 6, IE 7, Opera 9.02, Firefox 2.0.0.1

Посмотрите как это работает

Архив с исходником

Были времена когда я чувствовал себя последователем The Prodigy, Crystal Method и Chemical Brothers. Тогда я даже и не представлял себе на сколько я далёк от них.

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

Хотелось быстро научиться программировать на php. Но как научиться, если объекта для разработки нет? Гостевая книга? Скучно. Чат? Банально (хотя до этой банальности я однажды дошёл)

Как постоянный посетитель сайта cjcity, я не мог не знать о проблеме которая вот-вот доведёт до отчаяния мэра города си-джеев — Cj John PM. У сайта небыло базы данных пользователей в которую заносились данные об исполнителях и ссылки на их музыку. Все данные вносились вручную самим мэром. Ну согласитесь, это не дело! Самый главный loop’ов начальник и beatrate’ов коммадир, сидит часами, до distortion’а в глазах и копирует шаблонные строчки. Я бы свихнулся.

Так уж получилось что человек я отзывчивый (но в меру) и сочувствующий (тоже в меру). Поступило от меня предложение взяться за базу обеими руками и десятью пальцами! Предложение было обговорено, условия утверждены, заказ принят.

Наступило время мыслительных процессов. Заваленая бумагой, огрызками, бутылками, стаканами, книжками и дисками комната, превратилась в лабораторию по проведению опытов, с целью выяснить сколько человека хватит чтоб не сойти с ума от общения с интерпретатором php. Оказалось что не всё так плохо. Натуралом я остался и база с грехом пополам была написана. (правда в течении полугода исправлялась и дорабатывалась)

Опыта я получил больше, чем если бы я сам себе придумал какую-либо задачу, поскольку творил для людей, а люди — народ придирчивый. (Уж вы мне поверьте!)

Что в ней хорошего:

• Хоть основана на файлах, но работает стабильно.
• Один суперюзер-админ-модератор. Для него я просто сделал доступ к любому аккаунту напрямую, вводя админский пароль. Таким образом админ получает права на редактирование данных пользователя.
• Посчёт и вывод треков.
• Сбор жанров.
• Постраничный вывод.
• Регистрация с подтверждением через e-mail
• Восстановление пароля, через тот же e-mail

и другие возможности. Не идеал, но для начала не плохо.

В данный момент сайт переживает внеочередной кризис. База мною написанная морально устарела. А все кто брался писать новую — ретировался. Мэр лихорадочно ищет программистов. Даже деньги предлагает (мне-то чисто символически была выплачена небольшая сумма и выслан эксклюзивный сборник музыки “CjCity Избранное”). Небольшие, но хоршие.