Верстка вертикального меню
В этом уроке будем работать с левой колонкой. Она у нас состоит из вертикального меню и баннера (пример вертикального меню с выпадающим списком). Первым делом измерим ширину колонки, затем в шаблоне html пропишем необходимые теги, потом при помощи каскадных таблиц стилей оформим все элементы.
Как измерять элементы в программе Photoshop мы уже знаем, поэтому попробуйте сейчас сделать это самостоятельно. Переходим к шаблону html. В блоке <div class="leftCol">...</div> удалите текст, который там сейчас есть, и также, как для горизонтального меню создайте вертикальное, т.е. в виде списка:
Для баннера создаем блок <div class="banner"></div>, сразу после меню. И в нем прописываем заголовок и картинку:
Переходим к стилям. Находим класс .content, и у него нужно убрать отступы справа и слева:
Далее переходим к классу .leftCol, и для него нужно установить ширину, у меня получилось 232px. Также убрать background-color и padding:
Записываем стили для вертикального меню:
Здесь все свойства мы знаем, единственное — это значение inset у свойства box-shadow. Это значение устанавливает тень внутри блока, через запятую стоит значение для тени за границами блока:
Такая же тень снизу. Для тега li убираем маркеры. Для тега a прописываем:
Здесь все свойства нам уже знакомы. Теперь давайте запишем свойства для a:hover
Теперь нам нужно убрать бордер у верхнего пункта меню, для этого мы воспользуемся псевдоклассом :first-child. Этот псевдокласс выбирает первый элемент в списке, таблице. Нам нужен первый элемент в списке, поэтому запишем
Так же, при помощи этого элемента, нужно закруглить углы у первого и последнего пункта меню, в состоянии, когда на них наведен курсор. Для последнего элемента используется псевдокласс :last-child
Переходим к баннеру. Как видно из макета, блок для меню и блок для баннера схожи, поэтому мы находим класс .leftCol ul, ставим запятую и прописываем .banner, теперь все свйоства, указанные для блока меню, будут действовать для блока с баннером:
Для заголовка запишем:
Теперь нужно открыть шаблон html, и вставить картинку в тег <p>...</p>, а потом в стилях прописать для этих элементов свойства:
И еще, в самом начале в стилях, у html,body удалите строку background-color...
Источник: http://psd-html-css.ru/css/verstka-vertikalnogo-menyu


Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
Секрет быть несчастным: иметь время занудствовать на тему, счастлив ты или нет Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp