Меню навигации CSS

Демонстрация: навигационная панель

Вертикальная навигационная панель

Горизонтальная навигационная панель


Навигационная панель

Легкая навигация важна для любого веб-сайта.

С помощью CSS вы можете преобразовать скучные меню HTML в привлекательные навигационные панели.

Навигационная панель = список ссылок

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

В нашем примере мы будем использовать стандартный список HTML для создания навигационной панели.

Навигационная панель в основном представляет собой список ссылок, поэтому использование элементов <ul> и <li> очень целесообразно:

Пример

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">Новости</a></li>
  <li><a href="contact.asp">Контакт</a></li>
  <li><a href="about.asp">О нас</a></li>
</ul>

Попробуйте сами

Теперь удалите маркеры списков, а также внешние и внутренние отступы (пADDING) из списка:

Пример

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Попробуйте сами

Объяснение примера:

  • list-style-type: none; - удалите маркеры списков. Навигационная панель не требует маркеров элементов списка.
  • настройка margin: 0; и padding: 0; Удалите mặcодные настройки браузера.

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