CSS-панель навигации


Оглавление

    Показать оглавление


Демо: панели навигации

Вертикальный

Горизонтальный



Панели навигации

Наличие простой в использовании навигации важно для любого веб-сайта.

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


Панель навигации=Список ссылок

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

В наших примерах мы создадим панель навигации из стандартного HTML-списка.

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

Пример

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

<!DOCTYPE html>
<html>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

</body>
</html>


Теперь давайте удалим из списка маркеры, поля и отступы:

Пример

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

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>


Пример объяснен:

list-style-type: none;

- Удаляет пули. На панели навигации не нужны маркеры списка.

margin: 0;

удалить настройки браузера по умолчанию

padding: 0;

удалить настройки браузера по умолчанию

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