Создаем красивое, легкое вертикальное меню навигации
Быстро и легко!
Приблизительное время выполнения: 5 минут
Инструментом Rounded Rectangle с радиусом угла 20рх, цветом #1d97bc и настройками как на рисунке ниже, нарисуйте скругленный прямоугольник на новом слое. Затем вытащите эти 4 гайда.
Выберите инструмент Pen, зажмите CTRL и кликните рядом с границей прямоугольника. Вы увидите «путь» (path). Приблизьте левый угол, зажмите ALT и нажмите на две точки (1,2). Затем отпустите ALT и кликните по точке 3, чтобы ее стереть. Зажмите CTRL, кликните по точке 4 и не отпускайте кнопку мыши! Отпуститу CTRL (все еще держа зажатой кнопку мыши!), нажмите SHIFT и перетащите эту точку к нашим гайдам.
Повторите то же самое и с нижним правым углом.
Примените к слою следующие стили
Наверху напишите Menu
Используя Pencil (карандаш), на новом слое нарисуйте черным цветом горизонтальную линию, а под ней такую же белую. Измените непрозрачность этого слоя до 18%, скопируйте его и подвиньте вниз. Повторите так несколько раз.
Между двумя такими линиями выделите прямоугольную область и на новом слое залейте ее цветом #75c5de. Так для всех позиций меню.
Напишите текст.
Теперь сделаем эффект осветления для одной из позиций (чтобы пользователь понимал, на какой из страниц он находится). Выделите область кнопки, создайте новый слой и поместите его под текстовые. Используйте инструмент Gradient и залейте выделение.
Готово! 
Источник: http://bwebi.com/clean_vertical_menu.html
Смотрите также:
хм… очередной понятный урок, в котором разжевано все до мелочей
Апрель 28th, 2008
а продолжение как я его должен скрипить что бы это зараотало? и главное нарезать(было бы очень замечательно )
Май 1st, 2008
Может кто нибуть поможет? как мне скрепить слои и сделать так что бы при наводе мышки
нужный слой подсвечивался
Май 3rd, 2008
Тебе скрипт нужен под JAVA SCript или можно обойтись простым CSS
Май 4th, 2008
anna ну а как хотя бы в CSS обойтись?? Я хочу сайт сделать на фото-шопе а у меня изо этой навигации все встало….
Май 5th, 2008
Короче дай мне свою почту я тебе пример кода пришлю тут писать много надо. Одним словом просто при наведении мышки будет заменяться background. В твоем случае это целесообразней, так некоторые пользаватели могут отключить отображение Джава, это надо тоже учитывать при разработке
Май 6th, 2008
anna pozitiviys@yandex.ru
Май 7th, 2008
не… слоями не очь получится, а вот скриптиком при что бы при наведении курсора всё плавало и переливалось вполне
Май 27th, 2008
А скриптиком не поделишься
Май 27th, 2008
a{background:url(картинка1)}
a:hover{background:url(картинка2)}
Если нужно заверстать на СSS, то пишите на besserebrenik(пес)bk.ru и прикладывайте PSD.
Сделаю для разминки
Июль 2nd, 2008
Спасибо все сделано -)
Август 1st, 2008
ребята, спасибо за урок! но у меня та же проблема: не знаю как вставить в сайт и чтоб кнопки могли подсвечиваться. в инете ничего не нашел, как это сделать
помогите!!
Сентябрь 7th, 2008
мой имейл: clotowski@bigmir.net
Сентябрь 7th, 2008
там в дремвивер вся тема есть, тьлько поковыряться надо а так напиши; (anna — задай ей вопрос) =)
Сентябрь 8th, 2008
Короче там просто надо сделать a:hover и поставить bg при наведении она будет подсвечиваться. Ну у спецов можно скрипт попросить. Если что пиши.
Сентябрь 8th, 2008
я посмотрел англ. оригинал урока, там все подробно расписано. если что не пойму, напишу. спасибо!!
Сентябрь 8th, 2008
Спасибо за урок, у меня получилось
Февраль 21st, 2009
Молодец!Урок суперский!
Апрель 20th, 2009
хммм…Урок класс всё получилось,добавил своего и вообще замечательно,вот только одно но!как перевести это в HTML помогите если кто знает,я плоховато в нём разбираюсь.
Ноябрь 30th, 2009
Вижу у всех проблемма с мигание
и переделкой в CSS.Посмотрел англ. версию не понятно xD
Ноябрь 30th, 2009
А фотошоп попраси, он тебе все порежет для веба вообще делать ничего не надо. Если объяснить надо тогда пиши на почту.
anna_zharova@mail.ru
Ноябрь 30th, 2009
Вабще-то это можно сделать только на чистом CSS без никакой графики. И JavaScript…
Февраль 21st, 2011