Вертикальное меню на html5 и css3: Как сделать вертикальное меню

CSS-трюк: двойные бордюры-разделители вертикального меню

Когда при верстке требуется создать меню с разделителем, я использую замечательную технику, которую когда-то давно предложил Юрий «akella» Артюх.

Недавно я столкнулся с очень похожей, но более сложной задачей — мне нужно было сверстать вертикальное меню, разделителем которого является двойная линия, состоящая из двух разных цветов (синий и белый):

Возможные способы решения задачи:

• использовать изображение;
• использовать только CSS.

В решении необходимо предусмотреть, что:

• высота пункта списка может меняться, т.е. текст может быть в несколько строк;
• часть текста может быть за пределами тега ссылки.

Проблемы при использовании изображения

Объясню, почему решение в виде использования изображения в качестве бордюра не подходит в данном случае.

Структура HTML-кода нашего меню максимально проста:

<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">О компании</a></li>
	<li><a href="#">Статьи</a></li>
	<li><a href="#">Отзывы</a></li>
	<li><a href="#">Фотографии</a></li>
	<li><a href="#">Вопросы</a></li>
	<li><a href="#">Контакты</a></li>
</ul>

По идее, используя технику Юры Артюха, можно было бы разделитель сделать изображением и поставить его фоном к элементу <li>. Но дело в том, что в списке у каждого пункта еще используется изображение-маркер, и если это изображение ставить фоном тега <a>, тогда возникают следующие проблемы:

1. Если в меню появится многострочный пункт, тогда меню станет некрасивым (не хватает одинакового отступа слева у текста в каждой строке):

2. Первую проблему можно было бы решить, сделав ссылку блочный элементом (a {display:block}), однако при этом возникнет другая проблема — если после ссылки добавить текст, то он перенесется на новую строку, а этого также необходимо избежать:

Решение с помощью CSS

Мое решение с использованием чистого CSS позволяет избежать вышеописанных проблем.

CSS-код будет выглядеть нижеследующим образом. Основные для нашей задачи стили я прокомментирую:

ul {
	width: 150px;
	padding: 0 6px;
	background: #F2F7FD url(bg.gif) 0 100% repeat-x;
  border: 1px solid #C0D7FB;
  font-weight: bold;
	overflow: hidden; /* необходимо для того, чтобы
	спрятать верхний бордюр у первого пункта и
	нижний бордюр у последнего пункта */
}
li {
	list-style: none;
  background: url(bullet.

  
 gif) 4px 8px no-repeat;
	padding: 5px 0 8px 22px;
  border-top: 1px solid #C0D7FB; /* синяя линия */
  border-bottom: 1px solid #FFF; /* белая линия */
  margin: -1px 0 -2px; /* "нахлестываем" на предыдущий и следующий пункт,
	в результате чего и достигается нужный эффект */
	height: 1%; /* для устранения бага в IE6 и IE7 */
}

Для наглядности вы можете посмотреть на живой пример.

Вот, собственно, и все. Решение кроссбраузерное, надеюсь, кому-нибудь пригодится.

* * *

Для качественного сайта с большой аудиторией лучше использовать VPS хостинг (VPS или VDS — это виртуальный выделенный сервер), который, по сравнению с обычным виртуальным хостингом, имеет большие преимущества в плане ресурсов и программной части.

Красивое вертикальное меню для сайта в Photoshop

В этом уроке вы узнаете, как создать красивое вертикальное меню для сайта при помощи Adobe Photoshop.

Материалы по теме:

• CSS Tab Designer — программа для создания меню сайта

• 30 горизонтальных меню для сайта

• 38 примеров выпадающих меню в веб дизайне

Выберите инструмент «Rounded Rrectangle Tool» (U) — «Прямоугольник со скругленными углами» установите радиус в 20 px, цвет #1d97bc, а также другие настройки как показано ниже и нарисуйте прямоугольную фигуру.

Теперь выберите инструмент «Pen Tool» (P) — «Перо», затем зажмите клавишу CTRL и кликните на границе прямоугольника, в результате появится выделение. Далее зажмите клавишу Alt и при помощи скроллинга можете увеличить фигуру для более удобной работы с ней.

Сделайте то же самое с нижним правым углом, в результате у вас должна получится следующая фигура.

Примените следующие Blending Options — Параметры наложения. (Слой >> Стиль слоя >> Параметры наложения…)

Drop Shadow — Тень. Blend Mode: Multiply — Режим: Умножение.

Outer Glow — внешнее свечение.

Stroke — Обводка. Position:Outside — Положение:Снаружи;

Добавьте название меню в самом верху. (Настройки смотрите на изображении ниже).

Далее выберите инструмент Pencil Tool (B) — Карандаш. Создайте новый слой Слой >> Новый >> Слой… (SHIFT + CTRL + N) и проведите горизонтальные линии, одну верхнюю черного цвета, вторую белого цвета. Измените, прозрачность слоя до 18%.

Дублируйте этот слой нажатием сочетания клавиш CTRL + J и выбрав инструмент «Перемещение» (CTRL + V) переместите этот слой ниже на 27 px. Повторите дублирование и перемещение 5 раз.

Примечание переводчика:
Для того чтобы легче было делать линии лучше увеличьте масштаб прямоугольника, для этого нажмите клавишу ALT и увеличьте масштаб при помощи скроллинга. Для того чтобы линии были прямыми нажмите клавишу SHIFT, а затем рисуйте линию.

Создайте новый слой и при помощи инструмента «Прямоугольная область» (M) сделайте между двумя линиями небольшое выделение и заполните его цветом #75c5de. Тоже самое сделайте и для других позиций меню.

Примечание переводчика: 
Заполнить выделение можно при помощи инструмента «Заливка» (G).

Теперь используя инструмент Horizontal Type Tool (T) — «Горизонтальный текст» напишите текст.

Теперь необходимо сделать ховер эффект. При помощи инструмента «Прямоугольная область» сделайте прямоугольное выделение верхнего пункта меню, затем создайте новый слой Слой >> Новый >> Слой… (SHIFT + CTRL + N) и разместите его под слоем с текстом и используя Gradient Tool (G) — инструмент «Градиент» сделайте градиентную заливку.

Окончательный вариант:

Материал подготовлен проектом: webmastermix.ru
Источник

Рекомендуем ознакомиться:

Подробности

Опубликовано: 09 Март 2010

Обновлено: 20 Сентябрь 2013

Просмотров: 21634

Создайте вертикальное меню с подменю в CSS3 и HTML

DEMO

Концепция

Простые меню с использованием CSS3 и HTML5 становятся довольно популярными, потому что вам не нужны JQuery или JavaScript для добавления анимации. Мы покажем, как быстро создать красивое чистое вертикальное меню с выдвигающимся подменю.

Меню будет использовать вложенный элемент

для отображения подменю.

Разметка HTML 5

CSS​

Родительский CSS

 p, ul, li, div, nav
        {

            заполнение: 0;
            маржа: 0;
        }


        тело
        {
            семейство шрифтов: Calibri;
        }


        #меню {
            переполнение: авто;
            должность: родственница;
            z-индекс: 2;
        }


        . родительское меню {
            цвет фона: #0c8fff;
            минимальная ширина: 200 пикселей;
            плыть налево;
        }


        #меню ул
        {
            тип стиля списка: нет;
        }


        #меню уль ли а
        {

            отступ: 10 пикселей 15 пикселей;
            дисплей:блок;
            цвет:#fff;
            текстовое оформление: нет;
        }


            #menu ul li a:hover
            {
                цвет фона:#007ee9;
            } 

Меню работает очень просто. Родительский контейнер должен быть расположен относительно, чтобы подменю могло отображаться внутри него. Вам также необходимо установить z-индекс, чтобы родительское меню было над подменю (это будет описано позже). Каждый элемент

 #menu ul li:hover > ul {

                слева: 200 пикселей;

                -webkit-transition: осталось 200 мс для облегчения входа;

                -moz-transition: осталось 200 мс облегчение;

                -ms-transition: осталось 200 мс для облегчения входа;

                переход: осталось 200 мс облегчение;

            }


            #меню ул ли > ул {

                положение: абсолютное;

                цвет фона: #333;

                сверху: 0;

                слева: -200px;

                минимальная ширина: 200 пикселей;

                z-индекс: -1;

                высота: 100%;

                -webkit-transition: осталось 200 мс для облегчения входа;

                -moz-transition: осталось 200 мс облегчение;

                -ms-transition: осталось 200 мс для облегчения входа;

                переход: осталось 200 мс облегчение;

            }


            #menu ul li > ul li a:наведите курсор

            {

                цвет фона:#2e2e2e;

            } 

• javascript
• html
• css
• side-menu

Что бы я сделал, так это создал третий div и присвоил ему класс или идентификатор (я просто назову его Green Box), а два других поместил div внутри третьего.