Меню с выделением (скачать)

      Часто мне доводилось слышать такие вопросы: "Есть несколько страниц с одинаковым меню. Как сделать так, чтобы при переходе на любую страницу, соответствующая этой странице ссылка выделялась и писалась обычным текстом, а не ссылкой?" Собственно, это делается очень просто с помощью JavaScript. Весь скрипт будет размещаться во внешнем файле и занимать не более пяти строк.
      Итак, для начала мы имеем некоторое количество однотипных страниц, с одинаковым меню. Например, какой-нибудь каталог или рейтинг. Для нормальной работы нужно все страницы назвать по порядку именами содержащими числа. Самый простой пример, берем и называем все однотипные страницы так: 1.htm, 2.htm, 3.htm и так далее. Но я для примера возьму следующие обозначения: page1.htm, page2.htm и page3.htm. Всего у меня будет три страницы.
      Скрипт, отображающий меню на этих страницах, будет выглядеть так:

var numb;
function menu (numb) {
document.write(" <br>Страницы: ");
for(i=1;i<4;i++)
{
if( i == numb ) 
document.write('<b><font size=+1>'+ i +'&nbsp;</font></b>'); 
else document.write('<b><a href="page'+ i +'.htm">
'+ i +'</a>&nbsp;</b>'); } }

      Переменная "numb" в этом скрипте нужна для обозначения той страницы на которой мы сейчас находимся. Этот скрипт помещаем в файл. Назовем его к примеру menu.js. Все, про этот скрипт забыли и переходим к нашим страницам на которых должно быть меню. В самом начале документа между тэгами <head> и </head> нужно написать строку, которая говорила бы обработчику, из какого файла нужно брать скрипт. Пишем:

<SCRIPT LANGUAGE="JavaScript" SRC="menu.js">
</SCRIPT>

      Теперь одинаковое меню будет на каждой странице. Для того чтобы весь наш скрипт работал, в него необходимо передать информацию о том, какая страница в данный момент загружена. Эту информацию можно передать двумя способами. Первый - наиболее простой и примитивный - все вписывается в ручную. Второй - более тернистый и сложный - все определяет скрипт. Лично мне больше нравится первый (простой) способ. В нем все просто до предела и проблем никаких не возникает. Мы просто берем и дописываем к предыдущей строке

<SCRIPT>numb=1;</SCRIPT> 

Соответственно, для второй страницы numb нужно присвоить значение 2, и тд.
Теперь в том месте, где у нас должно находится меню вписываем

<script>menu (numb); </script>

Все.
В конечном виде в каждый файл нужно дописать эти строки

<head>
…
<SCRIPT LANGUAGE="JavaScript" SRC="menu.js"></SCRIPT>
<SCRIPT>numb=1;</SCRIPT>
…
</head>

где переменной numb присваивается значение в зависимости от имени файла и строку

<script>menu (numb); </script>

которая во всех файлах одинакова. То есть получается, что нам в каждый файл нужно прописать по три строки.
Если в дальнейшем число страниц увеличится, то мы просто в файле menu.js увеличиваем число до которого должен доходить цикл. Это строка

for(i=1;i<4;i++)

Если число страниц увеличивается, то вместо 4 нужно писать число равное числу страниц плюс один.
В принципе, меня этот скрипт вполне устраивает, но можно его доработать, чтобы во все файлы вписывать абсолютно одинаковые строки и не менять значение numb в ручную. Правда скрипт значительно увеличится в размерах.

      Итак, усложняем скрипт. Причем хочу заметить, что в этом случае не получится написать абсолютно универсальный скрипт. И вот почему. Скрипт будет отличаться в зависимости от того, как у нас названы файлы и в зависимости от того, используются ли фреймы на нашем сайте. Предположим, что мы не используем на сайте фреймы и файлы у нас названы так как мы приняли вначале. Тогда в каждый файл пишем

<head>
…
<SCRIPT LANGUAGE="JavaScript" SRC="menu.js"></SCRIPT>
…
</head>
<body>
…
<script>menu (); </script>
…
</body>

Зато скрипт, находящийся во внешнем файле, немного усложнится и будет выглядеть следующим образом:

var numb;
var st;

function menu ( ) {
st = parent.location.pathname;
numb = st.substring ( st.lastIndexOf ( "e" )+1, st.length - 4 );
document.write(' <br> Страницы: ');
for(i=1;i<4;i++)
{
if ( i == numb) 
document.write('<b><font size=+1>'+ i +'&nbsp;
</font></b>'); else document.write('<b><a href="page'+ i +'.htm">
'+ i +'</a> &nbsp;</b>'); } }

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


Примечание:
Если у вас под рукой нет справочника JavaScript, то ниже я перечисляю использованные в скрипте методы, свойства и объекты.
1.     location - объект. Полная информация об URL текущего документа. Объект location используется для определения URL любого активного документа, включая документы в других окнах или кадрах навигатора. Если объект window не указан, подразумевается текущее окно. Каждое свойство объекта location содержит отдельную часть URL. Шесть частей URL отражены в объекте location:

protocol://hostname:port/pathname search#hash

2.     substring - метод. Возвращает часть строкового объекта в зависимости от двух индексов.

StringName.substring(index1, index2)

3.     lastIndexOf - метод. Возвращает позицию символа или подстроки в строке, начиная поиск с конца.
4.     length - свойство. Целое число, показывающее длину или размер соответствующего свойства объекта.

Автор: Jimy SHADE
Сайт независимого дизайнера



© журнал принадлежит Web Creation
по всем вопросам обращаться А. Кузьмин