Как сделать меню навигации

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

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

Как сделать меню навигации

Вам пригодится

  • — наличие на своем сайте нескольких страниц либо разделов
  • — пара мелких иконок по теме сайта
  • — знать, как заливать картины на сайт

Инструкция
1
Дабы строка меню была ссылкой, запишите ее следующим образом:Основная СТРАНИЦАВ данной записи замените http:? ?website.ru на адрес нужной страницы.
2
Код горизонтального меню, складывающегося из текстовых ссылок, записывается так:Основная СТРАНИЦА|ГАЛЕРЕЯ|ФОРУМ|ГОСТЕВАЯ КНИГА
3
Разделителями между пунктами меню, располагающегося в линию, помогают вертикальные штрихи. Для комплекта знака | с клавиатуры необходимо на британской раскладке одним пальцем надавить и удерживать клавишу Shift, а вторым — выбрать кнопку |/\, которая находится справа от буквы «Ъ». В обязательном порядке до штриха и по окончании него ставьте пробел, дабы пункты меню пребывали на расстоянии друг от друга.
4
Создать вертикальное меню из ссылок возможно посредством таковой записи:Основная СТРАНИЦА

ГАЛЕРЕЯ

ФОРУМ

ГОСТЕВАЯ КНИГА
5
В этом случае разделителем частей меню выступает тег

, что переносит следующий за ним текст на новую строке.
6
Если вы желаете сделать пункты меню не в виде слов либо словосочетаний, а в виде изображений, каковые будут делать роль ссылок, то сперва залейте на сайт все картины, каковые будут использованы в навигации ресурса.
7
Дабы поместить картину на веб-страницу, неоходимо в нужном месте поместить данный код:Для размещения собственного изображения вместо images/Kak_sdelat_menyu_navigacii.png напишите путь к нужной картине, залитой на ваш сайт.
8
Любой пункт графического меню пропишите так:В этом коде замените http:? ?website.ru на необходимый адрес, а на код нужной картины.
9
Создать горизонтальное меню, складывающееся из изображений, возможно так:

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

и

образуют строчок таблицы, а

и

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

CSS3 для начинающих | #10 Создание горизонтального меню


Темы которые будут Вам интересны: