Часто, кому-то помогая с сайтом, ну или просто что-то делая для себя, я сталкивался с проблемой создания простого меню, вернее не то что-бы это была проблема, просто я не помнил как это реализовать, вот решил «увековечить» свои знания :)
Меню из списка
Я часто видел, читая коды сайтов, что на них меню реализованы при помощи списков, я собственно докопался до сути и сейчас приведу пример с комментариями
Далее следует HTML-код обычного списка с указанным в главном теге аргумента id=’mainmenu’:
<!-- здесь что-то до меню --> <ul id="mainmenu"> <li><a href="#">Главная</a></li> <li><a href="#">Фотографии</a></li> <li><a href="#">Статьи</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Мой блог</a></li> <li><a href="#">Рецепты</a></li> <li><a href="#">Обо мне</a></li> </ul>
Теперь я опишу стиль для этого списка, собственно он и сформирует нам красивое, простое меню:
#mainmenu{
list-style-image: url(http://stalker-portal.su/images/new/news.png);
}
Вот пример того как это всё выглядит:
Также можно улучшить отображение меню продолжая настраивать его при помощи CSS:
#mainmenu{
list-style-image: url(http://stalker-portal.su/images/new/news.png);
}
#mainmenu a{
text-decoration: none;
color: black;
}
#mainmenu a:hover{
text-decoration: none;
color: blue;
text-decoration: underline;
background-color: white;
}
Вот результат:
Один из важнейших плюсов данного метода это как раз использование CSS. Можно настраивать меню на всех страницах сайта одновременно, при этом страницы сайта практически не нагружаются, браузер кеширует файл таблиц стилей и более его не загружает до первого изменения содержимого этого файла
Минусом могу посчитать то, что при использовании в этом меню Java-Script для изменения пиктограммы списка, она изменяется во всём списке, однако и этого можно избежать, но это усложнение кода, а мы разбираем простое меню :)
P.S.
Выражаю особую благодраность сайту stalker-portal.su за прдоставленую пиктограмму которую я использовал в примерах! ;-)