Меню для сайта

Назначение и виды меню

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

Далее можно почитать о назначении и видах разных меню (их примеры показываю, естественно). Либо можно перейти к самым интересным примерам меню сразу:

Меню сайта может быть различных видов. Зависит от размеров самого сайта, т.е. от его наполненности разными веб-страницами, где, собственно, и находится какая-либо нужная посетителю информация.

Любое меню по своему устройству - ссылки.

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

Но продолжим. Визуально оформить такие "менюшные" ссылки можно совершенно разными способами. Об этом дальше.

Виды меню

Как уже говорил, способов оформления ссылок меню множество. На небольших сайтах часто используют для этого технику CSS "sprite".   Пример здесь:

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

Более крупные ресурсы с достаточно большим количеством веб-страниц для своих сайтов могут создавать довольно интересные примеры вложенного меню.

Это так называемое "jQuery МЕГА-меню" (откроется в новом окне).

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

Впрочем, подобные и очень интересные(!) виды меню сейчас чрезвычайно популярны на всех крупных и даже очень крупных ресурсах: социальных сетях, госорганах, больших интернет-магазинах, и так далее.

Только!

Только они применяют обычное текстовое меню, но очень функциональное и относительно просто сделанное.
Это многоуровневое меню. Вот его интересные примеры я и показываю далее.

Многоуровневые меню для сайта

Много говорить не буду, а просто покажу примеры разных видов таких меню. Однако, сначала сделаю одно важное примечание(!) о ссылках, содержащихся в них.

* * *

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

И самое интересное в них то, что делаются они довольно просто.

К примеру, первые два из трёх показанных ниже примеров сделаны вообще БЕЗ всяких скриптов. HTML+CSS только!
Сложного же в них - только лишь таблицы CSS, благодаря которым они и действуют.

*Prim.  Имя каждой из подключённых таблиц указал в их собственных подразделах примеров и, если есть какие-либо особенности, указал там же. Подключённые таблицы стилей достаточно подробно прокомментировал в CSS-коде самих таблиц.

Горизонтальное меню сайта

Данный вид многоуровневого меню работает от внешней (подключённой) таблицы стилей, которой дал имя: menu_horizontal.css

Вертикальное меню сайта

Многоуровневое меню этого вида также работает от внешней (подключённой) таблицы стилей с именем: menu_vertical.css

Скрытое меню сайта

В этом подразделе показываю ещё один вид многоуровневого меню, и именно оно самое популярное(!) в настоящее время.
Правда, оно несколько сложнее двух показанных выше меню для сайта, но совсем немного. Зато оно гораздо более функциональное(!), т.к. в скрытом виде места, практически, не занимает!

Сделал его, скопировав HTML-код предыдущего вертикального меню, соединённого с тем же самым CSS-файлом: menu_vertical.css

Чтоб была возможность открывать/скрывать это меню, подключил к нему уже готовый, когда-то ранее (при обучении) написанный JavaScript-код спойлера: spoiler.js, который находится в каталоге js

Открывается/закрывается меню кликом по иконке "гамбургер".

Как сделать меню для сайта

Вообще-то, меню для сайта делается довольно просто, и проще всего, конечно, делать его с помощью таблиц со ссылками, как, собственно, у себя на сайте и делаю. Но!

Если бы я сейчас начинал делать свой сайт, то стал бы делать для него меню как оно и полагается, т.е. с помощью списков из ссылок.

Списки гораздо компактнее таблиц, и их довольно легко сделать многоуровневыми, что и показал на этой странице.

И с точки зрения веб-дизайна - "списочными" меню проще и удобнее пользоваться. К тому же - они симпатичнее!

Впрочем, не важно, какое меню делать.

"Табличное" или "списочное", всё равно будем иметь дело со ссылками, и очень желательно знать некоторые особенности работы с этими веб-элементами.

Не буду здесь касаться, как создать таблицу или список. Это основы HTML! А данный подраздел предназначен для другого.

Все без исключения ссылки имеют атрибуты. Как обязательный - типа: "href" (адрес целевой страницы ссылки), так и достаточное количество вспомогательных.

Одни из них помогают браузерам открывать страницы сайта так, как это было задумано веб-мастером.
Вот, к примеру, самый часто используемый атрибут target говорит браузеру: в каком окне открыть страницу.  Точнее - не сам атрибут, а его значения определяют это.

Ещё один очень часто используемый вспомогательный атрибут rel  своими значениями, которых множество, ОГРОМНОЕ КОЛИЧЕСТВО(!), помогает страницам сайта быть правильно проиндексированными поисковыми системами.

Ну а вообще же, атрибут rel - это сокращение от английского слова relationship, которое переводится как отношение, взаимосвязь.
И смысл этого атрибута в том, что он обозначает отношение ссылающейся страницы сайта к тому ресурсу, адрес которого указан в атрибуте href, т.е. на который она ссылается.

Так, прописав rel="nofollow", мы говорим поисковым системам, что указанный веб-адрес не стоит того, чтобы на него заходить.
И обычно такую запись делают при ссылке на тематически НЕ связанные ресурсы для того, чтобы "поисковый вес" ссылающейся страницы не "утекал" на объект ссылки.

Однако, кажется, я немного отвлёкся.

Как сделать лучшее меню для сайта, используя знания видов меню и их основных компонентов, т.е. типов ссылок и всевозможных атрибутов ссылок?

Проблем нет. Очень просто!

Правда, как говорил выше, его ещё нужно откорректировать под свои нужды, т.е. прописать веб-адреса и правильные атрибуты в ссылках меню, а их сто-о-олько! ... ...

Вот поэтому я и сохранил в архивах очень полезную(!) информацию, собранную мною на профессиональных ресурсах, о типах ссылок и атрибутах ссылок, и их значениях, разумеется.

Всё собранное в процессе изучения объединил в 3 справочника, которые выполнил для удобства использования в обычном текстовом формате - .txt

В первом архиве находится один справочник: "Типы ссылок и атрибутов".

Во второй архив упаковал целых два справочника: "Типы документов и расширений",  и ещё "MIME-типы WEB-документов".

Архивы с пособиями здесь:

Внимательно ознакомившись с пособиями из этих архивов, правильно сделать и настроить меню для сайта станет просто.

Важное об атрибутах ссылок

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

Меню для него сделать гораздо проще!

Изучая разные способы создания этого веб-элемента, обследовал исходные коды страниц множества сайтов.

И нигде(!), кроме лишь использования одного-единственного главного, обязательного ссылочного атрибута href, другие атрибуты НЕ ПРИМЕНЯЛИСЬ!

Вывод: никакие другие атрибуты (кроме href) для ссылок меню сайта не нужны!

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

Важно!

В прежних обучающих курсах объяснялось, что при создании ссылки для скачивания какого-либо архива, нужно прописать, к примеру, так:

<a href="arhiv.rar"  target="_blank"  title="Что в архиве">Скачать</a>

И такой код в компьютерах с операционной системе Windows XP отлично работал во всех версиях браузеров. НО!
В современной версии О.С. Windows 10 подобная запись кода приводит к довольно неприятному результату. Нет! Архив всё-таки скачивается, но происходит это не сразу, а так, как показал на нижнем скриншоте.

Сначала открывается совершенно пустое новое окно, что, собственно, вполне логично, т.к. в коде прописан атрибут target со значением "_blank" (в новом окне).

И вот только потом уже, где-то секунды через 2, в этом открывшемся окне появляется форма загрузчика со стандартными кнопками управления.
Это, конечно, не смертельно, но всё-таки довольно неприятно. Долго и необычно!

И вот поэтому!

Изучив найденные материалы (те, что в данных выше архивах), решил такие ссылки для скачивания прописывать несколько по-другому.

<a rel="archives"  download  href="arhiv.rar"  title="Что в архиве">Скачать</a>

Подобный код ссылки сообщает поисковикам, что это архив, а браузерам говорит, что его нужно скачивать, а не открывать.

Ещё для этого же - самый ГЛАВНЫЙ ссылочный атрибут href специально поставил после атрибута скачивания download.

А кроме того, - из кода ссылок я убрал атрибут и его значение: target="_blank", что и позволило "всё вернуть на круги своя".
То есть - архивные ссылки снова стали вести себя прилично.

На этой странице, по крайней мере.

Переделывать код ссылок буду, естественно, на всех страницах сайта, но не сразу. Их много. Начну с тех, где архивов больше всего.

На этом, считаю, раздел о меню для сайта и разных типах ссылок можно заканчивать. Тем более, что разных примеров, которые можно скачать для обучения, в нём достаточно.

* * *

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

ВВЕРХ