Pug (бывший Jade) является шаблонизатором, который упрощает написание HTML-кода. Чтобы сверстать меню на Pug, вам потребуется создать структуру меню и придать ей нужный стиль. Ниже я приведу пример того, как можно сверстать простое горизонтальное меню:
1. Создайте файл с расширением .pug. Например, menu.pug.
2. Откройте файл menu.pug и добавьте следующий код:
nav
ul
li
a(href="#") Home
li
a(href="#") About
li
a(href="#") Services
li
a(href="#") Contact
В приведенном выше коде мы создаем nav элемент и вложенный в него ul элемент. Затем для каждого пункта меню мы создаем li элемент и ссылку a. Здесь также можно добавить классы и атрибуты в элементы, если это необходимо, просто добавьте их в нужные места.
3. Теперь, чтобы преобразовать Pug в HTML, вам потребуется компилировать файл menu.pug. Воспользуйтесь соответствующим онлайн-компилятором или установите Pug через npm, если вы работаете с проектом на Node.js. Затем скомпилируйте файл menu.pug с помощью команды pug [имя_файла], где [имя_файла] - это имя вашего файла Pug, например, menu.pug.
4. После компиляции вы получите файл HTML, в котором будет отображаться ваше меню:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Теперь вы можете использовать этот код, чтобы вставить меню на ваш сайт или приложение. Меню можно дополнительно оформить с помощью CSS, добавив классы или идентификаторы для элементов меню и применив стили в отдельном файле CSS.
Это основной пример того, как сверстать простое горизонтальное меню на Pug. Однако, в зависимости от ваших требований и дизайна, вы можете внести изменения в структуру меню и добавить дополнительные элементы или стили.