Одной из проблем
как начинающих, так и уже довольно опытных веб-мастеров
становится создание так называемого выпадающего меню.
Еще проблемнее становится вопрос создания такого же
меню, но работающего в различных браузерах. В данной
статье я постараюсь раз и навсегда решить эту проблему!
Что необходимо? Для начала нам понадобится непосредственно сама
страничка, куда мы будем вставлять меню и скрипт,
который будет управлять отображением/скрытием будущего
меню.
Для примера возьмем обыкновенную html страничку, с
несколькими ссылками:
<!--
function mouseOverPopup (obj) {
obj.style.backgroundColor='#74B3D3';
obj.className='';
}
function mouseOutPopup (obj) {
obj.style.backgroundColor='#fafafa'
obj.className='p_menu';
}
function MM_reloadPage(init) { if (init==true) with (navigator)
{if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n);
return x;
}
function P7_autoLayers() { var g,b,k,f,args=P7_autoLayers.arguments;
var a = parseInt(args[0]);if(isNaN(a))a=0;
if(!document.p7setc) {p7c=new Array();document.p7setc=true;
for (var u=0;u<10;u++) {p7c[u] = new Array();}}
for(k=0; k<p7c[a].length; k++) {
if((g=MM_findObj(p7c[a][k]))!=null) {
b=(document.layers)?g:g.style;b.visibility="hidden";}}
for(k=1; k<args.length; k++) {
if((g=MM_findObj(args[k])) != null) {
b=(document.layers)?g:g.style;b.visibility="visible";f=false;
for(j=0;j<p7c[a].length;j++) {
if(args[k]==p7c[a][j]) {f=true;}}
if(!f) {p7c[a][p7c[a].length++]=args[k];}}}
}
//-->
Думаю, описание его не требуется, так как это, в
принципе не главное :)
Назовем этот скрипт menu.js. После, чтобы его
вызвать, следует прописать на будущей странице строку
<SCRIPT language=javascript
src="menu.js"></SCRIPT>
сразу после тега </HEAD>
Что нужно делать
дальше?
Теперь надо бы нам написать слой, внутри него -
табличку, которая и будет отображаться при наведении
курсора на ссылку, этим и займемся:
Таблица, которая
находится внутри слоя (между
<DIV></DIV>)
изначально невидима за счет параметра VISIBILITY: hidden,
и следует заметить, что у каждого такого слоя (их может
быть несколько, для отображения нужного из нескольких,
при наведении курсора на определенную ссылку) есть свой
id. В нашем случае id=msa. Для остальных таблиц слоев
писать id=msb, id=msc и т.д. в порядке возрастания по
алфавиту. Теперь засовываем этот слой куда-нибудь вниз
нашей страницы (лучше сразу перед тегом
</BODY>).
Как же отобразить этот слой?
Чтобы отобразить нужный нам слой, следует в ссылке
прописать параметр ONMOUSEOVER=P7_autoLayers(0,'msa','Closer'),
где 'msa' указывает на id отображаемого слоя.
Теперь при наведении курсора мыши на link1 у нас будет
появляться табличка!
А как сделать, чтобы табличка появлялась в нужном
месте? Для этого существуют параметры LEFT и TOP, которые
указываются в стиле слоя. LEFT - отступ от левого края
страницы, TOP - отступ от верхнего края страницы. Чтобы
настроить отображение слоя в нужном месте, надо
поэкспериментировать со значениями этих параметров и
добиться желаемого эффекта ;) Также есть еще некоторые
параметры стиля слоя: WIDTH - ширина слоя, HEIGHT -
высота слоя.
Благодаря параметрам LEFT и TOP мы можем строить как
горизонтальное, так и вертикальное выпадающее меню! Для
этого нам необходимо просто указать нужные значения.
А как сделать, чтобы слой исчезал, когда курсор не на
сссылке? Для этого нам надо прописать новый параметр в
ячейках таблицы, "окружающих" наши ссылки. Т.е. следует
прописывать параметр
onmouseover=P7_autoLayers(0)
в теге <td> ячейки таблицы, которая находится
слева/справа/сверху/снизу наших ссылок (за исключением
ячейки, где собственно находятся ссылки). В итоге, при
наведении курсора на ячейку, в параметрах которой
прописано onmouseover=P7_autoLayers(0),
слой будет исчезать! Пропишем этот параметр в нужных
местах нашей страницы:
Теперь, при наведении курсора на ячейку, где написано
"Содержание страницы", слой, независимо какой у него id,
будет исчезать!
А как сделать другие слои, чтобы они отображались при
наведении курсора на другую ссылку?
Элементарно! А точней, аналогично :) Создаем новый слой
с другим id:
А если не для всех ссылок нужно подменю?
Тогда, чтобы слой, отображенный при наведении на другую
ссылку, не оставался видимым кодга мы наведем курсор на
ссылку, для которой подменю не требуется, следует
прописать новый параметр скрытия всех слоев в свойствах
этой ссылки:
Пример данного творения, а также его "скрипт-родитель"
можно увидеть .
Получившееся меню отлично работает (проверено лично!) в
разных браузерах - Internet Explorer, Opera, Mozilla.
Ну вот, в принципе и усе :) Думаю, теперь проблема
построения универнсального выпадающего меню отпадет!
Если у Вас все же еще остались (или только возникли)
какие-либо вопросы по поводу этого меню -
, отвечу на все вопросы!
Наверное, никто не сможет поспорить с утверждением, что главное в любой web-страничке - удобство для пользователя. После того, как мы выложили наше творение в сеть, мы сразу начинаем предпринимать массу усилий для того, чтобы привлечь на свой сайт максимум посетителей... подробнее
Этот скрипт поможет вам организовать на своем сайте или страничке баннерную систему.
Первый фрагмент вы вставляете в любое место странички... подробнее
В Internet Zone-154 была небольшая заметка Локальная баннерная система. Автор - Вадим Беляков (http://tuta.da.ru) предлагал поставить на страничку баннер, используя небольшой javascript. Я прочитал этот номер лишь в середине апреля. Мне сразу же пришло в голову использовать его для текстовой рекламы... подробнее
JS, или JavaScript язык сценариев, которые выполняются на стороне клиента и не требует перезагрузки страницы. JavaScript был разработан компанией Netscape в 1995 году... подробнее
Как известно, бичом современного Интернета является спам - непрошенная рассылка рекламных и прочих сообщений. По данным некоторых аналитиков, он составляет более 50% всех сообщений в Сети... подробнее
