Верстка вертикального меню

В этом уроке будем работать с левой колонкой. Она у нас состоит из вертикального меню и баннера (пример вертикального меню с выпадающим списком). Первым делом измерим ширину колонки, затем в шаблоне 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://youtu.be/OFjr7LJiKqA

Источник: http://psd-html-css.ru/css/verstka-vertikalnogo-menyu

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Верстка вертикального меню | | 2012-04-12 22:06:00 | | Статьи Web-мастеру | | В этом уроке будем работать с левой колонкой. Она у нас состоит из вертикального меню и баннера (пример вертикального меню с выпадающим списком). Первым делом измерим ширину колонки, затем в шаблоне | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: