Красносельский
Константин
Константинович

Компьютер и программы

Веб-дизайн

Справочники

Документация по CSS1

Настройка файла .htaccess

Коды ошибки http сервера

Подстановочные символы и регулярные выражения

Спецификация файла robots.txt

SSI – Server Side Includes

Таблица кодировки символов кириллицы

Нестандартные символы в HTML

Вторая таблица символов HTML

MIME Types (типы файлов)

 

Советы начинающим

Как в PHP поместить enum в массив

Советы начинающим Веб-дизайнерам: Что, где и зачем.

Правила плохого тона

WEB-уловки

Камень предкновения: верстка таблицами или блоками?

Рекомендации по разработке веб сайта

 

Анализ WEB-конъюнктуры. Создание лучшего сайта и его раскрутка.

Анализ WEB-конъюнктуры

Предисловие

Приручение поисковых машин

Уровень документа - все гениальное просто

Благоустройство нор для поисковых червей или как водить пауков по нашей паутине

Ускорение индексации сайта

Если гора не идет к Магомету

Индекс цитирования

Что это такое и с чем его едят

Приобретение веса в глазах общественности

Послесловие

Последние замечания по интернет-раскрутке

 

Приложения

А: «Рекомендации лучших пауководов»

Краткий комментарий.

Советы специалистов поисковой системы Rambler.

Использование файлов robots.txt.

Часто задаваемые вопросы.

Советы специалистов поисковой системы Aport.

Регистрация сайта в Апорте.

Советы специалистов поисковой системы Yandex.

Добавление страниц

Индексирование

Положение страницы на выдаче

Поиск со своей страницы

Ответы на часто задаваемые вопросы

 

Б: «1000 сверх-сайтов Рунета»

1000 сверх-сайтов Рунета

 

В: «Сто наиболее популярных поисковых слов»

Сто наиболее популярных поисковых слов

 

Г: «Где это сделать?»

Где это сделать?

 

Д: «Практическое руководство!!!»

Краткий комментарий.

Окна, ссылки и меню.

Ссылки и окна. Внешний вид и внутреннее содержание.

Организация ссылок. Всевозможные оглавления.

Если вам не нравятся фреймы, значит, вы не умеете их готовить.

Меню из выпадающих списков (javascript и CSS).

Многоуровневое раскрывающееся меню (javascript и CSS).

Работа с базами данных.

Обработка баз данных браузером посетителя

Обработка баз данных сервером (PHP)

Взаимодействие с посетителем

Отправка писем с веб-страницы.

Формы

Методы форм.

Создание на сайте PHP голосования.

Регистрация и контроль посетителей (PHP).

Интерактивность материала.

Создание гостевой книги на PHP.

Удаление записей из текстовых баз (PHP).

Заргузка файлов на сервер по HTTP-протоколу (PHP).

Разное.

Псевдослучайные элементы (PHP, javascript).

Точное определение имени и версии браузера с помощью JavaScript, SSI или PHP

Клоакинг и технология «Входных дверей».

Отложенное выполнение и выполнение с заданным интервалом (javascript)

Информация о размере, дате, собственные счетчики и протоколы посещений

 

 

 

Консультации

Экспорт и импорт новостей

PHP chmod – права доступа к файлам

WEB 2.0 – миф, или реальность?

Давно забытый AJAX

Способы хранения веб-страниц: документы FrontPage или базы данных

Как заработать на своем сайте?

FTP клиент, как настроить Total Commander

Знак собаки @ и подавление ошибок в PHP

AJAX

AJAX с точностью до наоборот, или как научить AJAX сохранять историю в браузере

 

Мониторинг веб сайтов и анализ поисковых запросов

Документация по Веб-дизайну

Желающим скачать PHP скрипт или JavaScript

 

Литература и поэзия

Гуманитарные науки

Хронология материалов

Обращение к посетителям

Скачать шрифты

Скачать рефераты

Создание web сайта на заказ

Создание веб сайтов (цены)

Веб-сайты, созданные мной (потенциальным заказчикам)

Полезные ссылки

Об авторе

Статистика сайта

 

Web На сайте

 

 

 

ТаблицейБлоками.

Приложение Д: Многоуровневое раскрывающееся javascript css html меню

Последняя модификация: 10.08.2014 г

Страница загружена с адреса: http://webdesign.site3k.ru/conjuncture/append/d/menutree.html

Моя студия веб-дизайна

Многоуровневое раскрывающееся меню.

Помимо способов организации меню (перечислены в  «Оглавления для сайтов»), стоит задуматься и над его оформлением. Не над оформлением его ссылок, как таковых (см.  «Ссылки и окна. Внешний вид и внутреннее содержание», а над общим оформлением меню. Меню в Интернете встречаются, почти на каждой странице, их миллионы, или, даже, миллиарды. Но все они характеризуются невероятным однообразием.

Фактически, существуют 3 типа меню: меню, основанное на географической карте или какой-то схеме, области которой связаны с адресами или скриптами, меню из кнопок-рисунков и меню в виде простого списка гиперссылок. Все – других меню Интернет не знает.

А напрасно. Избежать этого однообразия, можно, применив интерактивное многоуровневое раскрывающееся меню, аналогичное дереву каталогов. Это меню не только удобно, тем что, позволяет открыть доступ с одной страницы на любую другую, но и выглядит очень эстетично и, что не менее важно, очень полезно для ускорения индексации сайта поисковыми системами (оно ведь открывает доступ сразу ко всем страницам сайта, независимо от уровня их вложенности).

Поскольку это меню едино для всего сайта, его удобно держать в отдельном файле и включать в страницу либо как FRAME, либо как IFRAME, либо как OBJECT, либо как внешний JavaScript (src="menu.js">), либо с помощью SSI-инструкций (<!--#include file="menu.txt"-->). Как именно – дело личных предпочтений, хотя, следует учитывать что, SSI-вариант увеличит размер всех страниц, как раз на размер меню и может значительно замедлить их загрузку, а JavaScript сам по себе не укажет путь для поисковых роботов.

Само меню имеет не слишком сложный текст:

<p><A HREF="javascript:JS(menu1,image1);" title="Развернуть/Свернуть"><img NAME=image1 src="img/minus.gif" alt=""><img src="img/folder.gif" alt=""> Верхний уровень, пункт 1</a></p>
<span id=menu1>
  <p><A HREF="javascript:JS(menu2,image2);" title="Развернуть/Свернуть"><img NAME=image2 src="img/minus.gif" alt=""><img src="img/folder.gif" alt=""> Вложенный уровень, пункт 1</a></p>
  <span id=menu2>
    <p><a href="myfile.html" title="Смотреть"><img src="img/item.gif" alt=""> Ссылка на страницу 1</a></p>
  </span>
  <p><a href="javascript:JS(menu3,image3);" title="Развернуть/Свернуть"><img NAME=image3 src="img/minus.gif" alt=""><img src="img/folder.gif" alt=""> Вложенный уровень, пункт 2</a></p>
  <span id=menu3>
    <p><a href="myfile.html" title="Смотреть"><img src="img/item.gif" alt=""> Ссылка на страницу 2</a></p>
  </span>
</span>
<p><A HREF="javascript:JS(menu4,image4);" title="Развернуть/Свернуть"><img NAME=image4 src="img/minus.gif" alt=""><img src="img/folder.gif" alt=""> Верхний уровень, пункт 2</a></p>
<span id=menu4>
  <p><A HREF="javascript:JS(menu5,image5);" title="Развернуть/Свернуть"><img NAME=image5 src="img/minus.gif" alt=""><img src="img/folder.gif" alt=""> Вложенный уровень, пункт 3</a></p>
  <span id=menu5>
    <p><a href="myfile.html" title="Смотреть"><img src="img/item.gif" alt=""> Ссылка на страницу 3</a></p>
  </span>
  <p><a href="javascript:JS(menu6,image6);" title="Развернуть/Свернуть"><img NAME=image6 src="img/minus.gif" alt=""><img src="img/folder.gif" alt=""> Вложенный уровень, пункт 4</a></p>
  <span id=menu6>
    <p><a href="myfile" title="Смотреть"><img src="img/item.gif" alt=""> Ссылка на страницу 4</a></p>
  </span>
</span>

Идея данного меню заключается в том, что оно состоит из ссылок верхних уровней, щелчок на который инициирует запуск функции на JavaScript, передавая ей в качестве параметров имя следующего за ссылкой контейнера span (следующего уровня вложенности). А функция открывает этот контейнер или закрывает, в зависимости от его текущего состояния, заодно меняя его рисунок. Уровень вложенности и количество элементов на уровень ни чем не ограничивается. Самые нижние ссылки открывают желаемые страницы.

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

<SCRIPT LANGUAGE="JavaScript">
function JS(name,image) {

   if(name.style.display=='none')
   {
   name.style.display='block';
   image.src='img/minus.gif'
   }
   else
   {
   name.style.display='none'
   image.src='img/plus.gif'
   }

}
</SCRIPT>

Для корректного вида неплохо добавить CSS-директив:

IMG {border-style:none; vertical-align:middle}
span {margin:5 0 5 13}

Что позволит выровнять рисунки меню относительно текста и убрать с них не нужные рамки, а так же, отодвинет каждый вложенный уровень немного вправо. Кроме того, не лишним будет сворачивать все ветви меню, оставляя раскрытой только текущую. Для этого на каждую страницу следует поместить скрипт примерно такого содержания:

<SCRIPT LANGUAGE="JavaScript">
menu1.style.display='none';
menu2.style.display='none';
menu3.style.display='none';
menu4.style.display='none';
menu5.style.display='none';
menu6.style.display='none';
image1.src='img/plus.gif';
image2.src='img/plus.gif';
image3.src='img/plus.gif';
image4.src='img/plus.gif';
image5.src='img/plus.gif';
image6.src='img/plus.gif';
</SCRIPT>

Где в открытых пунктах display='none' заменить на display='block', а src='img/plus.gif' на src='img/minus.gif'. Можно, конечно, сразу на все пункты поставить display='none', а скриптом открыть только текущий пункт, но некоторые поисковики проигнорируют скрытые ссылки и, сайт может остаться не проиндексированным ими. Поэтому лучше скрывать скриптом некоторое количество изначально отображаемых пунктов, чем отображать один из изначально неотображаемых. А чтобы при большом количестве пунктов код скрывающего скрипта не получился слишком большим, можно применить цикл, скрывающий все пункты, по окончании которого, открыть нужный:

<SCRIPT LANGUAGE="JavaScript">
for(i=1;i<=6;i++) // Пока i=1, не достигнет 6 (количество задействованных span), увеличивая его на единицу и сравнивая после прохода цикла
{
eval('menu' + i + '.style.display="none"');
eval('image' + i + '.src="img/plus.gif"');
}
menu1.style.display='block'; // открываем один и меняем рисунок
image1.src='img/minus.gif';
menu2.style.display='block'; // до последнего уровня
image2.src='img/minus.gif';
</SCRIPT>

Если меню хранится в одном отдельном файле, а разделы разложены по каталогам, то код, сворачивающий ветви, удобно выделить в отдельный файл типа "show.js" и положить его в каждый каталог. Тогда на всех страницах он будет инициализироваться одинаково:

<SCRIPT LANGUAGE="JavaScript" src="show.js"></SCRIPT>

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

Приведенные скрипты рассчитаны на оперу или Internet Explorer, для Netscape требуется иной синтаксис. Netscape не готов принммать объекты в качестве параметров функций и не может ими оперировать. Для управления атрибутами HTML-элементов, Netscape требуется получить ссылку на этот элемент. Для чего в функцию должен передаваться не объект типа javascript:JS(menu6,image6), а его имя: javascript:JS('menu6','image6') (в кавычках). Функция должна получать ссылку на объект методом getElementById() и только через эту ссылку управлять поведением элемента (Эксплорер так же поддерживает такой способ). То есть, приведенные код приобретает вид:

<p><A HREF="javascript:JS('menu6','image6');"><img id=image6 src="img/minus.gif" alt=""><img src="img/folder.gif" alt=""> Литература и поэзия</a></p>
<span id=menu6>
...

<SCRIPT LANGUAGE="JavaScript">
for(i=1;i<=6;i++) // Пока i=1, не достигнет 6 (количество задействованных span), увеличивая его на единицу и сравнивая после прохода цикла
{
nameDiv=eval("document.getElementById('menu' + i)"); // Сворачивание, единое для всего сайта
myimage=eval("document.getElementById('image' + i)");
nameDiv.style.display="none";
myimage.src="img/plus.gif";
}
nameDiv=eval("document.getElementById('menu1')"); // открываем один и меняем рисунок
myimage=eval("document.getElementById('image1')");
nameDiv.style.display='block';
myimage.src='img/minus.gif';
nameDiv=eval("document.getElementById('menu2')"); // до последнего уровня
myimage=eval("document.getElementById('image2')");
nameDiv.style.display='block';
myimage.src='img/minus.gif';

function JS(menu,image) {//
   nameDiv=eval("document.getElementById(menu)");
   myimage=eval("document.getElementById(image)");
   if(nameDiv.style.display=='none')
   {
   nameDiv.style.display='block';
   myimage.src='img/minus.gif';
   }
   else
   {
   nameDiv.style.display='none';
   myimage.src='img/plus.gif';
   }
}
</SCRIPT>

Такой код должен работать в любом браузере, поддерживающем JavaScript.

Смотреть

Другие способы организации ссылочной навигации смотрите в  «Оглавления для сайтов»,  «Ссылки и окна. Внешний вид и внутреннее содержание» и  Меню из выпадающих списков.

 

Комментарии к странице (всего 5)

 

 

 


На главную страницу сайта