У нас є весь вміст, який нам потрібен на цій сторінці, і ми маємо заголовок на місці. Тепер ми можемо запустити CSSin 'з вмісту в дизайн, який ми маємо в Photoshop.
Одне, що ми зробили, це зробити список семи категорій статичним. Це лише один виклик менше wp_list_pages () і, отже, трохи ефективніший. Якщо ми коли-небудь змінимо категорії, це настільки велика річ, що не важко переглядати цей код.
Тут нам по суті потрібна конструкція з двома колонками. Це досить просто зробити, просто перемістивши пару div (або, швидше за все, використовуючи нашу існуючу структуру сітки). Але це не допомагає нам робити колони “рівної висоти”, як тут диктує наш дизайн. Зрештою, divs без встановлених висот мають лише стільки, скільки вміст усередині них. Встановлення висоти для div, як правило, погана ідея.
Щоб отримати стовпці однакової висоти, ми підробляємо це з акуратною маленькою ідеєю, де ми використовуємо один великий обгортковий div (який такий високий, як найвищий з колон, що він містить) і встановлюємо градієнтне тло. Не зникаючий градієнт з одного кольору в інший, а градієнт з жорсткими зупинками прямо там, де колона розбивається. Це дає нам необхідне забарвлення сірого зліва та білого справа.
Ми застосовуємо різні кольори тла до кожного посилання на категорію в лівій колонці із селекторами селекторів: nth-child (). Ми вирішили зробити це таким чином, а не класами, оскільки порядок кольорів важливіший, ніж узгодження кольору з категорією (це досить довільно).
Перш ніж ми закінчимо з цим скрінкастом, ми робимо ефект тіні (чітке розділення між стовпцями), застосовуючи псевдоелемент до навігації, яка простягається зверху вниз сторінки. Цей псевдоелемент має власний градієнт від чорного до прозорого, що робить його схожим на тінь.