Горизонтальное выпадающее меню

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

Горизонтальное выпадающее меню

В HTML шаблоне мы записываем простой код для меню:

<ul class="menu">
	<li><a href="/">Главная</a></li>
	<li><a href="/">О компании</a>
		<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>
		</ul>
        </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>

Для меню мы создаем контейнер <ul>...</ul> с классом "menu", в нем прописываем пункты с ссылками. При помощи CSS3 для контейнера ul.menu указываем фон в виде градиента, делаем уголки скругленными. Как видно из картинки, каждый пункт содержит перегородку или границу справа в виде двух полосок - темной и светлой. Эти границы также можно указать при помощи css, не используя картинки. Сначала для пункта <li> указываем border-right: 1px solid #4f4f4f; эта граница будет светлой. А вторую - темную мы укажем для самой ссылки: border-right: 1px solid #2b2b2b; Также для ссылки мы укажем размер, цвет, семейство шрифтов, уберем подчеркивание, и укажем отступы внутри - padding;

Для выпадающего меню изначально нужно указать свойство display: none;, чтобы его спрятать. При наведении курсора на пункт меню, свойство display будет менять  значение на block, и становиться видимым. Все остальное можно посмотреть в архиве :)

Скачать архив

Источник: http://psd-html-css.ru/css-notes/gorizontalnoe-vypadayushchee-menyu

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

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



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

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