Создание меню для сайта html

Безимени-197Одним из самых важных компонентов сайта, которые бросаются в глаза в процессе просмотра страницы, считается меню html навигации. Навигационное меню – это то средство, при помощи которого каждый посетитель имеет возможность просматривать веб-сайт, и чем удобнее, проще и функциональнее окажется меню, тем больше времени пользователь будет находиться на веб-портале, а это оказывает большое влияние на его популярность. Навигационное меню должно применяться также в целях продвижения сайта: наименования подразделов меню должны быть в меру короткими, лаконичными, а также ориентироваться на индексацию портала поисковиками, то есть отображать ядро контента ресурса.

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

Меню бывает различных типов:

1. Раскрывающееся меню или меню аккордеон.

Обладает раскрывающейся структурой, то есть если кликнуть какую-либо ссылку, то откроется несколько дополнительных ссылок, которые характеризуют подразделы. Как показано на рисунке ниже.

Безимени-198Код данного меню:

посмотреть результат

 

2. Выпадающее меню. Бывает Горизонтальным и вертикальным. Когда курсор наводится на пункт меню, то выпадают подпункты со ссылками на соответственные страницы. Подпункты меню делают легкой навигацию по веб-порталу, помогают сгруппировать информацию. Данный вид меню удобен тем, что позволяет экономить место на сайте.

3. Статическое меню. Это самая распространенная навигационная система, состоящая из текстовых активных ссылок на конкретные страницы сайта, и зачастую имеет древовидную структуру. Может располагаться справа или слева от основного контекста. Также бывает горизонтальным или вертикальным.

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

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

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

http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика