HTML или JavaScript?

HTML или JavaScript?

Сегодня в Интернете очень часто встречаются так называемые меню быстрого перехода, представляющие собой обычные HTML-dropdown-меню (ниспадающие меню). Одни такие меню используют в качестве основной навигации (чем экономят очень много места на странице), другие, не желая загромождать главное меню, помещают в такой раскрывающийся список второстепенные пункты, подразделы и пр., третьи делают его дублирующим (например, внизу каждой страницы) и т.д. Одним словом, такое меню — вещь, безусловно, нужная и полезная, а в ряде случаев — просто необходимая. Используя в качестве основы стандартный раскрывающийся список HTML (теги SELECT и OPTION), переход по заданным адресам можно осуществить 3-мя основными способами: посредством «чистого» HTML, HTML плюс JavaScript и с помощью CGI. Если вы читали хотя бы парочку статей цикла «Копилка веб-мастера», то наверняка заметили, что все предлагаемые примеры относятся к типу Client-Side (исполняемых на строне клиента). Это сделано специально, т.к. далеко не каждый имеет доступ к серверным настройкам и может исполнять свои собственные скрипты. Поэтому остановимся на первых двух вариантах реализации.

HTML-вариант чрезвычайно прост. Вот примерный листинг для такого HTML-меню:

<form>
<select name=»menu»>

<option value=»page1.html»>Страница 1</option>

<option value=»page2.html»>Страница 2</option>

<option value=»page3.html»>Страница 3</option>

</select>

<input type=»button» value=»Перейти» onclick=»top.location.href=this.form.menu.options[this.form.menu.selectedIndex].value»>
</form>

Посредством тега OPTION можно добавлять сколько угодно новых пунктов меню. У тега SELECT обязательно должен быть атрибут NAME со значением, соответствующим объекту в записи «top.location.href=this.form.menu.options» (расшифровка следующая: «документ во весь экран=в этом окне.эта форма.название этой формы.значения пунктов»).

С помощью JavaScript такое меню можно реализовать по-разному. Вот один из вариантов. Задаем массив данных:

<script language=»JavaScript»>

function MakeArray()
{
this.length = MakeArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = MakeArray.arguments[i]
}

Определяем переменную наименований пунктов меню (названия пунктов в кавычках):

var sitename = new MakeArray(
«Страница 1»,
«Страница 2»,
«Страница 3»
);

Определяем переменную конечных адресов перехода после выбора пункта меню (адреса в кавычках):

var url = new MakeArray(
«page1.html»,
«page2.html»,
«page3.html»
);

Задаем функцию перехода по указанным адресам из HTML-меню:

function gotoURL(form)
{
i = form.SelectMenu.selectedIndex;
window.location.href = url[i+1];
}
document.writeln(‘<form>’);
document.writeln(‘<select name=»SelectMenu»>’);
go = sitename.length;
for (var i = 1; i <= go; i++)
document.write(«<option>» +sitename[i]);
document.writeln(‘</select>’);
document.writeln(‘<input type=»button» value=»Перейти» onClick=»gotoURL(this.form)»>’);
document.writeln(‘</form>’);
// —>
</script>

Оставьте комментарий

Наши контакты

⚑ г. Москва Пресненская наб.
стр.12 (Башня Федерация).


☏ +7(495) 908-63-63
✉️ mail@vebpro.ru
Яндекс.Метрика

Дизайн-студия и агенство интернет рекламы vebpro.ru © 2019 – Все права защищены