Доброго времени суток,% username%. Сьогодні я покажу як зверстати горизонтальне меню за мотивами меню на цьому форумі. Заздалегідь я підготував всі в фотошопі, PSD файл можна завантажити за цим посиланням. саме меню трохи модифіковано і виглядає так:
Як ми бачимо, меню трохи світліше і в ньому з'явилася форма пошуку. Уявімо конструкцію нашого меню. Пункти рубрик будуть реалізовані у вигляді посилань укладених в елементи списку
Збережіть зміни і відкрийте файл, маємо отримати наступне:
Необхідно буде створити вертикальний градієнт від кольору # 92cb2f до кольору # 57a20c.
Задамо фіксовані значення ширини і висоти блоку, а також скругление 5px кутів. Після чого централізуємо блок. Ось що вийшло. Найголовніше, на самому початку файли style.css скопіюйте reset css. Ці правила "скидаю" всі стилі, скасовуючи відступи і т.д.
Якщо ви подивіться результат. то побачите, що градієнт відобразився і блок центрована по центру сторінки. Тепер приступимо до оформлення нашого списку і посилань. Давайте поставимо списки в горизонтальну лінію, призначимо відступи і стилізуємо посилання:
Подивимося на поточний результат:
Виглядає непогано. Залишилося додати стилі для форми пошуку і не забути про роздільник. Почнемо з роздільник. Так як він повинен постійно фіксоване бути в одному місці, ми вдамося до абсолютного позиціонування. Якщо коротко, абсолютне позиціонування задає можливість позиціонування елементів щодо країв дисплея. Але, ми зробимо трохи інакше.
Я вирішив, що роздільник у вигляді трьох точок буде звичайним png зображенням, що не будемо перекручуватися з CSS, так як воно того не варто. На html сторінці, відразу після закривається тега створимо елемент span до класу .dots:
Відмінно. Тепер приступимо до його оформлення. Як я сказав вище, ми будемо використовувати для цього елемента абсолютне позиціонування. Але це будемо не зовсім коректно, тому що батьківський елемент фіксований і при збільшенні або зменшенні документа в браузері, роздільник буде бігати по горизонталі довільно. щоб цього уникнути його батьківського елементу .main-menu потрібно задати relativ позиціонування. Так ми доб'ємося того, що елемент span буде відштовхуватися вже щодо батьківського елементу. Тому, додайте цей рядок в CSS файлі до класу .main-menu:
Круто, то що треба. Давайте напишемо стилі для нашого span:
Так, з цим розібралися. Тепер потрібно подбати з формою пошуку і кнопкою в формі лупи. Для цього ми трохи модифікуємо знову наш HTML файл і відразу після роздільник ми змінимо наш код на такий:
Так то краще. Ми тепер додали кнопку і завернули все це справа в окремий
Тепер збережемо все це разом і подивимося результат:
Все вийшло так, як ми і задумували. За винятком того, що в Mozilla і Safari з padding'ом кнопки з'являються дрібні проблеми, причину яких пізніше ми з вами з'ясуємо і вирішимо.