Разработка сайтов

Верстка, адаптивная верстка, программирование, разработка на WordPress

Верстка горизонтального меню для сайта. Часть 1

Привет! В последнем уроке по переносу сайта на WordPress я говорил что будет урок о создании меню для сайта и добавлении логотипа на сайт, вот и он. Начнем. Откройте сайт который мы делали в уроке, теперь внесем изменения в файл index.html. В теге header уберем «Шапка сайта» и добавим логотип, вот так:

Мы создали ссылку и применили к ней класс logo, так как наш логотип будет кликабильным и вести на главную страницу сайта. Теперь добавим свойство для него в файле style.css.

Рисунок logo.png должен быть 100*100 px. Обновите страницу и смотрите на логотип. Поехали дальше. Делаем меню. В файл index.php после тега header допишем такое:

Так как мы верстаем в html5 то и теги будут соответственные. За меню отвечает тег nav. Далее идет список ul  и четыре ссылки на страницы, они никуда не ведут так сайт для примера. Названия ссылок можете поставить другие. Теперь в файл style.css нужно добавить вот такой код:

Сохраняем обновляем страницу браузера и радуемся! Вот такой вид должен быть у сайт на даном этапе ссылка. И вы можете  скачать сайт с меню и логотипом вот здесь. В следующем уроке будем переносить все что сделали на WordPress в нашу тему test. Если что не понятно пишите в комментариях.

  • светлана ильина

    Как сделать закрепленное меню, чтобы при прокрутке оно было закреплено вверху экрана ?

    • Анатолий Липчук

      position: fixed;

      top: 0;

      right: 0;