Урок №10. Создание меню сайта с помощью CSS

Для создания меню сайта с помощью CSS понабится сделать три шага:
- создать структуру веб-страницы с помощью HTML
- создать ненумерованный список
- настроить дизайн ненумерованного списка (размер, цвет, горизонтальное/вертикальное меню, вложенное меню и т.д.)

Начнём со структуры веб-страницы.

КОД:


<!DOCTYPE html>


  <head>


  </head>


  <body>


  </body>


</html>

Далее создадим ненумерованный список c помощью тегов <ul> и </ul>.

КОД:


<ul>


  <li><a href="">Главная страница</a></li>


  <li><a href="">Информация</a></li>


  <li><a href="">О сайте</a></li>


</ul>

Теперь объединим две части кода в единое целое.

КОД:


<!DOCTYPE html>


  <head>


  </head>


  <body>


    <ul>


     <li><a href="">Главная страница</a></li>


     <li><a href="">Информация</a></li>


     <li><a href="">О сайте</a></li>


    </ul>


  </body>


</html>

Скопируем этот код и вставим в файл с расширением *.html Далее откроем этот файл в браузере.

Меню сайта состоит из 3 разделов. С помощью дополнительной пары тегов <ul> и </ul> можно добавить любое количество подразделов.

КОД:


<!DOCTYPE html>


  <head>


  </head>


  <body>


    <ul>


     <li><a href="">Главная страница</a></li>


     <li><a href="">Информация</a></li>


      <ul>


       <li><a href="">2020 год</a></li>


       <li><a href="">2021 год</a></li>


       <li><a href="">2022 год</a></li>


      </ul>


     <li><a href="">О сайте</a></li>


    </ul>


  </body>


</html>

Теперь мы видим, что в разделе "Информация" появилось 3 подраздела: 2020 год, 2021 год и 2022 год.

Меню сайта пока выглядит непритязательно, т.к. стили CSS ещё не подключены к нашему меню.

Страница обновлена 6 ноября 2022 года.