І так, переходимо до першого кроку даного уроку і спочатку нам потрібно підключити файл demo.css. який лежить у нас в таткові css. а потім вже підключаємо шрифт Open Sans. Хлопці, я розповідаю все по демо, тому Ви можете все робити на свій розсуд.
Далі нам потрібно створити звичайний маркований список ul li. а також поставити першому ul ідентифікатор nav. щоб ми могли працювати через нього, звертаючись до стилів css. Робиться це дуже просто, не знаю, що тут можна описати, тому скидаю відразу структуру, як в демо.
Переходимо до стилів CSS і насамперед, ми повинні встановити той шрифт, який прописали спочатку даного уроку, а саме Open Sans. Після того, як наш шрифт успішно прописаний, переходимо вже до самого каркасу нашого маркованого списку, якому поставимо певні властивості, а також розташування і позиціонування елементів. Зауважимо, що ми створюємо горизонтальне меню, тому застосовуємо властивість float left.
Тепер після того, як наше меню успішно приховано, нам потрібно зробити меню, що випадає. Це реалізувати досить просто, потрібно задати елементу меню з ідентифікатором nav властивість visible. Тим самим ми отримаємо результат меню, що випадає. Далі все за стандартом, змінюємо меню, що випадає на наш розсуд, задаємо йому відступи і колір. Не забуваємо вказати властивість left 0 при Ховер, адже без нього все меню, що випадає поїде і відповідно буде не дуже красиво. (пункт 1 )
Так як Євген, підготував макет даного меню, то всі моменти пов'язані з його дизайном, ми реалізували з Вами відповідно. Тепер, нам потрібно реалізувати border меню, так як він мають якусь функціональну особливість. Давайте її розглянемо. Для початку нам потрібно зробити border справа для основного меню, потім щоб border не було зліва нам потрібно вказати основному меню задати властивість none.
Тепер, пора перейти до випадає меню, де функціональні властивості набагато здадуться складніше основного меню, адже нам доведеться ставити певні властивості елементів. Для початку зазначимо border для двох сторін меню, що випадає, а саме для правої сторони і лівої. І наостанок нам буде необхідно приховати за допомогою властивості border none праву і ліву сторону меню.
Перевіряємо всі на сайті і бачимо, що все відмінно працює, крім однієї деталі, а саме наше меню, що випадає при наведенні на другу посилання і подальшу зсувається трохи вправо. Для цього, щоб усунути цю проблему, ми задаємо елементу меню з ідентифікатором nav властивість left і в якості параметра даємо йому мінус два. (Див. Пункт 1)
Перевіряємо всі на сайті і бачимо, що ми тепер дійсно все зробили правильно і можемо закінчувати даний урок.