Данная рассылка посвящена web-дизайну и web-программированию. Ведущий рассылки Голубев Алексей. По вопросам размещения статей в рассылке обращайтесь по e-mail: alexey-golubev@mail.ru. Буду всегда рад разместить их здесь, а также на моем сайте. Ссылка на ваш сайт гарантирована! Так же можете присылать и статьи других авторов или ссылки на них в интернете.
» О рассылке
Уважаемые подписчики!
![]()
Данная рассылка посвящена web-дизайну и web-программированию. Ведущий рассылки Голубев Алексей. По вопросам размещения статей в рассылке обращайтесь по e-mail: alexey-golubev@mail.ru. Буду всегда рад разместить их здесь, а также на моем сайте. Ссылка на ваш сайт гарантирована! Так же можете присылать и статьи других авторов или ссылки на них в интернете.
![]()
Данная рассылка посвящена web-дизайну и web-программированию. Ведущий рассылки Голубев Алексей. По вопросам размещения статей в рассылке обращайтесь по e-mail: alexey-golubev@mail.ru. Буду всегда рад разместить их здесь, а также на моем сайте. Ссылка на ваш сайт гарантирована! Так же можете присылать и статьи других авторов или ссылки на них в интернете.
» Сегодня в рассылке (Выпуск №4)
Разделы рассылки:
![]()
![]()
Если у вас есть соображения по увеличению рассылки, увеличению количества ее разделов, то пишите мне. Кроме этого присылайте свои вопросы. Вместе мы ответим на них.
Если у вас есть соображения по увеличению рассылки, увеличению количества ее разделов, то пишите мне. Кроме этого присылайте свои вопросы. Вместе мы ответим на них.
» Новости сайта
На нашем сайте появилась Гостевая книга по адресу: /gb. Не ахти какая, но все же... Так что милости прошу, заходите, оставляйте свои весточки.
![]()
Вверх
Вверх
» Создание меню при помощи JavaScript
Автор: Алексей Голубев
![]()
Сайт: http://www.frnet.narod.ru/
![]()
Как создать меню на web-странице? Данный вопрос, как мне кажется, интересует достаточно большую часть начинающих web-дизайнеров. Во-первых, использование такой формы навигации достаточно удобно посетителям вашего сайта. С помощью меню можно сгруппировать огромное количество материала по темам, например:
![]()
![]()
Согласитесь, это гораздо удобнее, чем создание отдельных тематических страничек (их можно использовать как альтернативу), которые будут ссылаться на подразделы сайта. Во-вторых, это выглядит достаточно красиво и оригинально. В-третьих, не каждый это умеет делать, но каждый хочет научиться. Приступим к созданию такой навигации.
![]()
1. Группировка элементов.
![]()
Прежде чем создавать меню, вы обязательно должны мысленно или на листке бумаги изобразить его. Определить какие элементы, в какой раздел поместить. Вы должны разгруппировать их так, чтобы не было повторений элементов в разных разделах. Главное на добавить лишнего. Посмотрите на рисунок, который представлен выше (рис.1). Все элементы стоят в своих тематических разделах.
![]()
2. Использование визуальных средств создания.
![]()
Некоторые редакторы web-страниц (существуют еще и специализированные см. далее) предлагают создать меню при помощи уже готовых скриптов. Они зачастую бывают не очень просты в разборе и использовании, используют большое количество ненужных функций, адаптирую меню для какого-либо конкретного браузера. Кроме этого, редакторы типа «Pop-up Creator», вставляют в меню свой логотип или надпись подобно этой: «Created with …»
![]()
3. Мое решение проблемы.
![]()
Итак, решая данную проблему, я разработал собственный скрипт для создания меню. Он состоит из четырех функций. Разберем их по порядку:
![]()
А) Отображение элементов меню.
![]()
function show_menu(elem, leftp) {
document.all.webdm.style.display="none";
document.all.webpm.style.display="none";
document.all.startm.style.display="none";
document.all[elem].style.left=leftp;
document.all[elem].style.display="block";
window.event.cancelBubble=true; }
![]()
Первые три строчки прячут от ваших глаз слои (они заданы тегом
Сайт: http://www.frnet.narod.ru/
Как создать меню на web-странице? Данный вопрос, как мне кажется, интересует достаточно большую часть начинающих web-дизайнеров. Во-первых, использование такой формы навигации достаточно удобно посетителям вашего сайта. С помощью меню можно сгруппировать огромное количество материала по темам, например:
Согласитесь, это гораздо удобнее, чем создание отдельных тематических страничек (их можно использовать как альтернативу), которые будут ссылаться на подразделы сайта. Во-вторых, это выглядит достаточно красиво и оригинально. В-третьих, не каждый это умеет делать, но каждый хочет научиться. Приступим к созданию такой навигации.
1. Группировка элементов.
Прежде чем создавать меню, вы обязательно должны мысленно или на листке бумаги изобразить его. Определить какие элементы, в какой раздел поместить. Вы должны разгруппировать их так, чтобы не было повторений элементов в разных разделах. Главное на добавить лишнего. Посмотрите на рисунок, который представлен выше (рис.1). Все элементы стоят в своих тематических разделах.
2. Использование визуальных средств создания.
Некоторые редакторы web-страниц (существуют еще и специализированные см. далее) предлагают создать меню при помощи уже готовых скриптов. Они зачастую бывают не очень просты в разборе и использовании, используют большое количество ненужных функций, адаптирую меню для какого-либо конкретного браузера. Кроме этого, редакторы типа «Pop-up Creator», вставляют в меню свой логотип или надпись подобно этой: «Created with …»
3. Мое решение проблемы.
Итак, решая данную проблему, я разработал собственный скрипт для создания меню. Он состоит из четырех функций. Разберем их по порядку:
А) Отображение элементов меню.
function show_menu(elem, leftp) {
document.all.webdm.style.display="none";
document.all.webpm.style.display="none";
document.all.startm.style.display="none";
document.all[elem].style.left=leftp;
document.all[elem].style.display="block";
window.event.cancelBubble=true; }
Первые три строчки прячут от ваших глаз слои (они заданы тегом
), которые содержат в себе элементы меню, чтобы не было наложений. Атрибуты id этих слоев соответственно равны: webdm, webpm, startm. Четвертая строка устанавливает абсолютное значение левого края слоя. Пятая строка отображает меню на экране. И наконец, последняя шестая – запрещает всплывание события. Данную функцию надо добавить в событие OnMouseOver главных элементов. Не забудьте указать атрибуты функции (которые в скобочках).
![]()
Б) Прячем все…
![]()
function hide_all_menu() {
document.all.webdm.style.display="none";
document.all.webpm.style.display="none";
document.all.startm.style.display="none"; }
![]()
Эта функция написана для того случая, когда курсор мыши не находится над главными элементами меню. Как видите, она делает то же самое, что и три первых строчки в предыдущей функции.
![]()
В) Выделение пунктов меню.
![]()
Как только мышь появляется в зоне одного из пунктов меню, он (пункт) должен получить какую-нибудь отличительную черту:
![]()
function menu_item_over(elem, stext) {
document.all[elem].style.backgroundColor="#00b0ee";
document.all[elem].style.textDecoration="underline";
window.status=stext; }
![]()
В данном случае мы выделяем его особым фоном и подчеркиванием. Кроме выделения в строке состояния будет выводиться текст, содержащийся в переменной stext. Снять это выделение можно следующей функцией:
![]()
function menu_item_over(elem, stext) {
document.all[elem].style.backgroundColor="#00b0ee";
document.all[elem].style.textDecoration="underline";
window.status=stext; }
![]()
Она возвращает в исходное состояние стилевые свойства, измененные при наведении мыши на пункт. Вообще, вы можете выделять пункты как хотите, например, рамкой, изменением цвета текста, добавить какой-нибудь фильтр (стилевое свойство: filter) и так далее.
![]()
Г) Настройка скрипта.
![]()
Во-первых, функции показа меню надо добавить в событие наведение мыши (onMouseOver) заголовков меню.
![]()
Во-вторых, дать название каждому пункту и группе пунктов, которые в последующем придется использовать как параметры вызываемых функций (параметр elem).
![]()
В-третьих, добавить функцию сокрытия меню к событию onMouseOver тега body.
![]()
Вроде бы все, но если чего-то не дописал, пишите вопросы на e-mail.
![]()
P.S. использования данного скрипта можно посмотреть по адресу: http://www.frnet.narod.ru/new/.
![]()
Вверх
Б) Прячем все…
function hide_all_menu() {
document.all.webdm.style.display="none";
document.all.webpm.style.display="none";
document.all.startm.style.display="none"; }
Эта функция написана для того случая, когда курсор мыши не находится над главными элементами меню. Как видите, она делает то же самое, что и три первых строчки в предыдущей функции.
В) Выделение пунктов меню.
Как только мышь появляется в зоне одного из пунктов меню, он (пункт) должен получить какую-нибудь отличительную черту:
function menu_item_over(elem, stext) {
document.all[elem].style.backgroundColor="#00b0ee";
document.all[elem].style.textDecoration="underline";
window.status=stext; }
В данном случае мы выделяем его особым фоном и подчеркиванием. Кроме выделения в строке состояния будет выводиться текст, содержащийся в переменной stext. Снять это выделение можно следующей функцией:
function menu_item_over(elem, stext) {
document.all[elem].style.backgroundColor="#00b0ee";
document.all[elem].style.textDecoration="underline";
window.status=stext; }
Она возвращает в исходное состояние стилевые свойства, измененные при наведении мыши на пункт. Вообще, вы можете выделять пункты как хотите, например, рамкой, изменением цвета текста, добавить какой-нибудь фильтр (стилевое свойство: filter) и так далее.
Г) Настройка скрипта.
Во-первых, функции показа меню надо добавить в событие наведение мыши (onMouseOver) заголовков меню.
Во-вторых, дать название каждому пункту и группе пунктов, которые в последующем придется использовать как параметры вызываемых функций (параметр elem).
В-третьих, добавить функцию сокрытия меню к событию onMouseOver тега body.
Вроде бы все, но если чего-то не дописал, пишите вопросы на e-mail.
P.S. использования данного скрипта можно посмотреть по адресу: http://www.frnet.narod.ru/new/.
Вверх
» Интересные скрипты
» Имитация ссылок.
![]()
Создание ссылок при помощи JavaScript.
![]()
Скачать: здесь.
» Часы на JavaScript.
![]()
Выводит часы в окно браузера.
![]()
Скачать: здесь.
» Вывод списка ссылок на страницу.
![]()
Пример работы с ActiveX на web-странице.
![]()
Скачать: здесь.
![]()
Вверх
Создание ссылок при помощи JavaScript.
Скачать: здесь.
» Часы на JavaScript.
Выводит часы в окно браузера.
Скачать: здесь.
» Вывод списка ссылок на страницу.
Пример работы с ActiveX на web-странице.
Скачать: здесь.
Вверх
» Разделы сайта
На нашем сайте (http://www.frnet.narod.ru/) имеются слудующие разделы:
![]()
![]()
Вверх
- Статьи - статьи о web-дизайне и web-программировании
- Скрипты - скрипты для web-страниц
- Книги - книги той же тематики
- Программы - программы для верстки и дизайна
- Шаблоны - заготовки для web-страниц
- Рассылка - Все выпуски рассылки
- Анекдоты - подборка интересных анекдотов различной тематики
- Ссылки - ссылки на другие полезные ресурсы сети
Вверх
» Заключение
Надеюсь, вам понравилась информция в рассылке и вы не будете от нее отписываться. Больше информации можно найти на нашем сайте. Ваши пожелания и критику присылайте на e-mail: alexey-golubev@mail.ru.
![]()
При публикации статей из рассылки или с сайта вам следует подписать автора статьи и действующую ссылку на наш сайт.
![]()
Ответственный за рассылку: Голубев Алексей.
![]()
Вверх
При публикации статей из рассылки или с сайта вам следует подписать автора статьи и действующую ссылку на наш сайт.
Ответственный за рассылку: Голубев Алексей.
Вверх
