CSS меню без использования скриптов и изображений

Мне хочется предоставить вашему вниманию одноуровневое меню в различных стилевых оформлениях. Легкое, свежее меню без использования скриптов и изображений: только HTML разметка и CSS оформление. Описание пункта меню появляется при наведении мышки. На демонстрационной странице представлено 12 стилевых оформлений одного меню.

HTML разметка представляет из себя следующий список:

<div id="menu1">
	<ul>
		<li><a href="">
				<span class="title">About</span>
				<span class="text">Who we are</span>
			</a>
		</li>
		<li><a href="">
				<span class="title">Portfolio</span>
				<span class="text">What we do</span>
			</a>
		</li>
		<li><a href="">
				<span class="title">Blog</span>
				<span class="text">What we talk about</span>
			</a>
		</li>
		<li><a href="">
				<span class="title">Contact</span>
				<span class="text">How to get in touch</span>
			</a>
		</li>
	</ul>
</div>

Всю работу по созданию внешнего вида меню берут на себя CSS-стили, прописанные для каждого из вариантов меню. На рисунке ниже представлены некоторые из представленных на демонстрационной странице стилей одноуровневого меню.

Одноуровневое CSS меню

Одноуровневое CSS меню

Одноуровневое CSS меню

Одноуровневое CSS меню

Одноуровневое CSS меню

Одноуровневое CSS меню

Одноуровневое CSS меню

Одноуровневое CSS меню

Одноуровневое CSS меню

Скачивайте, разбирайтесь, используйте в своих проектах и наслаждайтесь полученным результатом.

По мотивам: tympanus.net

27.07.2010
top


blog comments powered by Disqus