Меню красивое на css – Готовое решение – Красивое горизонтальное меню для сайтов (16 шт.) — Вебджем.рф

Содержание

30 классных уроков создания CSS меню

CSS сегодня — штука жизненно важная для веб-дизайна. Дежурка периодически публикует переводы интересных статей и уроков по CSS. Однако, хороших материалов много, и чтобы перевести их все, потребуется куча времени. Сегодняшняя подборка — для тех, кто дружит с английским языком или уже достаточно разбирается в вопросе, чтобы понять суть статьи по коду и демо-примерам. Это подборка неплохих туториалов по созданию навигационного меню на CSS. Используя приемы или их элементы, изложенные в этих уроках, вы сможете добавить динамики своему сайту, придать ему современный стильный вид. Некоторые из этих туториалов мы впоследствии переведем и опубликуем в нашем журнале.

Выпадающее меню на CSS

How-to: DropDown CSS Menu
Демо

Выпадающие странички на CSS

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
Демо

Отличное горизонтальное выпадающее меню на CSS

A Great CSS Horizontal Drop-Down Menu
Демо

Создаем раскрывающийся при нажатии header

Designing the Digg Header: How To & Download

Демо

Меню-гармошка с изображениями на Jquery

Image Menu with Jquery
Демо

Горизонтальное меню на чистом CSS

Демо

Создайте выпадающее меню с подпунктами на CSS и немножко JavaScript

Create your own drop down menu with nested submenus using CSS and a little JavaScript
Демо

CSS-спрайты, время для JavaScript

CSS Sprites2 – It’s JavaScript Time
Демо

Как сделать простое выпадающее меню на CSS3

How To Create A Simple Drop Down Menu With CSS3
Демо

Классное меню на CSS

Advanced CSS Menu
Демо

Стильное меню из опускающихся квадратов с изображениями на CSS

Slide Down Box Menu with jQuery and CSS3
Демо

Гранжевое меню с пунктами, выдвигающимися под разными углами

Grungy Random Rotation Menu with jQuery and CSS3, к сожалению, в Опере 11.60 поворот работать не будет.
Демо

Делаем клёвую анимированную навигацию на jQuery и CSS

Create a Cool Animated Navigation with CSS and jQuery
Демо

Горизонтальное меню на CSS

CSS UL LI – Horizontal CSS Menu

Делаем забавное анимированное навигационное меню на чистом CSS

Create a Fun Animated Navigation Menu With Pure CSS
Демо

Как сделать CSS-меню на спрайтах

How to Make a CSS Sprite Powered Menu

Дополнительные CSS-штучки для меню

Advanced CSS Menu Trick

Демо

Анимированные вкладки

Animated horizontal tabs
Демо

Меню в стиле фиш-ай на чистом СSS

Pure CSS Fish Eye Menu
Демо

Красивая навигация табами на CSS

Sweet tabbed navigation using CSS3
Демо

Делаем простую стильную навигацию с помощью CSS Jquery

Creating a Simple yet Stylish CSS Jquery Menu
Демо

Горизонтальные вкладки в два уровня на jQuery

jQuery Drop Line Tabs
Демо

Честное выпадающее меню на CSS без хаков и javascript

CSS dropdown menu without javascripting or hacks
Демо

Горизонтальное меню с иконками на CSS

Horizontal CSS Menu With Icons
Демо

Делаем говорящее меню навигации на чистом CSS

Create A Speaking Block Navigation Menu Using Pure CSS

Делаем анимированное меню на CSS

Making a CSS3 Animated Menu
Демо

Горизонтальный список — меню на CSS

Horizontal CSS List Menu

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

Making a CSS3 Animated Menu
Демо

Как сделать красивую навигационную панель на CSS3

How To Create A Clean CSS3 Navigation Bar
Демо

Подборка stylishwebdesigner.com

Оставить ответ

Случайные статьи

Красивое меню на CSS3 / Habr

Чуть меньше года назад Snickersmix публиковал статью «Меню с плавной инверсией цвета». В данной статье описывается меню, сделанное на JavaScript. Днём ранее он мне показывал сайт, на котором он делал это меню, и я, как поклонник NoScript, возмутился: «Это меню можно сделать на CSS!»

Я, конечно, погорячился, ибо сделать можно похожее меню, а не именно такое. Однако, обычный пользователь, особенно тот, который не в курсе дел, не заметит разницы. В том числе и я сразу не понял фишки этого меню. Хотя я поклонник всяких мелких деталей и нюансов при создании чего-либо, ибо из этих мелких деталей и нюансов строится общее впечатление о проекте.

Итак, предлагаю реализацию похожего меню на CSS3.

Чтобы сразу ты, уважаемый читатель, увидел отличия приведу финальную демку меню на CSS3 и демку меню от Snickersmix на JS

Теперь постараюсь вкратце рассказать про процесс создания

HTML

<nav>
	<ul><li><a href="#">Главная</a></li><li><a href="#">О компании и услугах</a></li><li><a href="#">Контактная информация</a></li><li><a href="#">Вакансии</a></li><li></li></ul>
</nav>

1) У меню display inline-block, поэтому между тегов не должно быть пробелов и переносов строк
2) Последний элемент меню с классом slide будет двигающейся плашкой. Я искал способ сделать через псевдоэлемент before/after, но так и не нашел.

Вариант 1
Данный вариант я написал достаточно быстро — тут фиксированная ширина элементов.

В этом и остальных меню используется CSS3 анимация перехода transition

transition: all 0.5s ease-in-out;

Данную анимацию я назначил на любые (all) действия/изменения над элементами списка (li, a).

Теперь надо было заставить двигаться элемент с классом slide. Для этого я задал этому элементу position: absolute, не забыв его родителю (ul) задать position: relative, чтобы slide позиционировался относительно меню, а не страницы. Таким образом, мы с помощью left или right можем двигать его по меню.

Но как заставить двигаться? В первом варианте я сделал абсолютный просчет каждого элемента в пикселях, т.е. получил размеры и координаты. И с помощью селектора обобщенных родственных элементов заставил slide двигаться при наведении.

.active:nth-child(1) ~ li.slide, /* тут для АКТИВНОГО пункта позиция */
li:hover:nth-child(1) ~ li.slide { /* тут при наведение позиция */
	left: 0;
	width: 147px;
}
.active:nth-child(2) ~ li.slide,
li:hover:nth-child(2) ~ li.slide {
	left: 147px;
	width: 241px;
}
.active:nth-child(3) ~ li.slide,
li:hover:nth-child(3) ~ li.slide {
	left: 388px;
	width: 257px;
}
.active:nth-child(4) ~ li.slide,
li:hover:nth-child(4) ~ li.slide {
	left: 645px;
	width: 156px;
}

Вроде работает, но ужасно неудобно:
— Необходимо постоянно просчитывать элементы, если они меняются
— Имеется баг — если шрифты не проходят, то всё меню рушится

Вариант 2
Вариант с анимацией фона

Меню было сделано и показано Snickersmix. И после мне были «открыты глаза». Оказывается, у него фишка в «плавной инверсии цвета». Тут я начал искать варианты решения, но на данный момент не нашел, зато было сделано само меню.

Вариант 1a
Начались поиски, и родился вариант «один с половиной». Получилось небольшое украшательство

Я надеялся, что можно попробовать как-то реализовать через фильтры svg матриц, но к сожалению ничего не получилось (Вариант 3)

И попытка сделать через псевдоэлементы before/after, вместо дополнительного элемента slide, но тоже не удачно. Ждём CSS4 и возможность обращаться к родителю. (Вариант 4)

Все эти события разворачивались чуть меньше года назад. Тогда были созданы выше озвученные варианты. Но в данных реализациях имеется небольшой косяк: на Linux системах, на которых не стоят виндосовские шрифты, меню ломается. Но править было на тот момент лень, ибо оно всё равно не планировалось нигде использоваться, а для реализации работающего варианта там чуть-чуть правок, поэтому всё это творчество было аккуратно положено на антресоли собирать пыль.

Прошел с тех пор почти год и я решил пофиксить меню, а заодно и написать статью.
И так, встречайте, финальный пятый вариант данного меню

В общем, ничего кардинально нового не появилось. Отличие лишь в том, что размеры указаны в процентах, что избавляет нас от проблемы со шрифтами, а заодно даёт возможно вставить меню в резиновую или адаптивную верстку.

Так же в пятый вариант были добавлены фиксы для IE6-9. Конечно, в них не будет анимации, но меню вполне съедобно.

В общем вот и всё. Всё достаточно легко и просто.
Если кто придумает другой вариант реализации — буду рад увидеть и, думаю, не только я.

Спасибо, что дочитали до конца!

Красивое меню при помощи CSS

Меню сайта всегда что то оригинальное, и помогает осуществить навигацию пользователям по сайту, видел много интересных меню на сайтах, но всегда хочется чего то новенького и стильного, по этому хочу рассказать как сделать простое меню при помощи различных эффектов, которое отлично дополнит ваш сайт, и сделает его более уникальным, это будет полезно для начинающих мастеров так и для более опытных. Идея заключается в том, что меню частично скрыто, а при наведении курсора мышки оно плавно выскальзывает..

1.CSS, для начала нам надо определить свойства для нашего списка:

ul#navigation {

<pre> position: fixed;

margin: 0px;

padding:0px;

top: 0px;

right: 0px;

list-style: none;

z-index:999999;

width:721px;

}

Мы позиционируем список в правом верхнем углу страницы. Навигация должна быть всегда доступна пользователю, даже если он прокручивает страницу вниз. Поэтому мы фиксируем позиционирование. Все отступы и границы мы выставляем на 0.
Теперь давайте взглянем на свойства элементов списка:

ul#navigation li {

width: 103px;

display:inline;

float:left;

}

Если Вы хотите, чтобы список показывался горизонтально, необходимо установить значение display наinline. После этого элементы списка будут отображаться рядом друг с другом, а не под.

Теперь посмотрим на свойства ссылок в элементах списка:

ul#navigation li a {

display: block;

float: left;

margin-top: -2px;

width: 100px;

height: 25px;

background-color: #E7F2F9;

background-repeat: no-repeat;

background-position: 50% 10px;

border: 1px solid #BDDCEF;

text-decoration: none;

text-align: center;

padding-top: 80px;

}

Давайте теперь добавим круглые углы (не будут работать в Internet Explorer) и прозрачность:

ul#navigation li a {

display: block;

float:center;

margin-top: -2px; width: 100px; height: 25px;

background-color:#d8e96d;

background-repeat:no-repeat;

background-position:50% 10px;

border:1px solid #c2d832;

-moz-border-radius:0px 0px 10px 10px;

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-khtml-border-bottom-right-radius: 10px;

-khtml-border-bottom-left-radius: 10px;

text-decoration:none;

text-align:center;

padding-top:80px;

opacity: 0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

Теперь добавим до нашего меню красивые иконки

ul#navigation .home a{

}

ul#navigation .about a {

}

ul#navigation .search a {

}

ul#navigation .podcasts a {

}

ul#navigation .rssfeed a {

}

ul#navigation .photos a {

}

ul#navigation .contact a {

}

При наведении мышки мы хотим, чтобы фоновый цвет менялся:

ul#navigation li a:hover{

background-color:#CAE3F2;

}

Еще добавим немного стиля нашим текстовым блокам:

ul#navigation li a span{

letter-spacing:2px;

font-size:11px;

color:#60ACD8;

text-shadow: 0 -1px 1px #fff;

}

2. 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>

</ul>

3. jQuery последним, но не менее важным этапом, это оживление нашего меню при помощи jQuery:

$(function() {

var d=300;

$(‘#navigation a’).each(function(){

$(this).stop().animate({

‘marginTop’:’-80px’

},d+=150);

});

$(‘#navigation > li’).hover(

function () {

$(‘a’,$(this)).stop().animate({

‘marginTop’:’-2px’

},200);

function () {

$(‘a’,$(this)).stop().animate({

‘marginTop’:’-80px’

},200);

}

);

});

Скрипт устанавливает marginTop на -80 пикселей. Эффект для первого элемента должен продолжаться 300+150 миллисекунд и каждый следующий элемент должен исчезать с задержкой 150 миллисекунд. На этом наше мню готово, иконки для меню выбираем на свое усмотрение)

На главную

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

1. Темно синее CSS меню.

Меню в темно синем стиле 100% ширины.

Демо
Скачать

2. Стильное зеленое меню.

Меню в зеленом стиле подойдет для многих цветов фона.

Демо
Скачать

3. Глянцевое меню.

Чёрное меню с оранжевым эффектом при наведении и зеркальным отблеском, применяется на белом фоне.

Демо
Скачать

4. Стильное коричневое меню.

Меню в коричневом цвете, затемняющееся при наведении кусора.

Демо
Скачать

5. Черное глянцевое меню.

Черное меню с глянцевым эффектом на белом фоне.

Демо
Скачать

6. Округлое синее меню.

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

Демо
Скачать

7. Разноцветное меню

Разноцветное меню с эффектом разгибания уголка при наведении.

Демо
Скачать

8. Шоколадный стиль меню.

Меню в шоколадном стиле с эффектом выпуклости при наведении.

Демо
Скачать

9. Блейзер меню.

Блейзер меню, с интересным эффектом при наведении которое, может быть использовано на любом светлом фоне.

Демо
Скачать

10. Flasy меню.

Черное меню с зеленым эффектом свечения при наведении курсора.

Демо
Скачать

11. Orcom меню.

Меню с удивительным эффектом при наведении курсора, ширина меню установлена в 700 px.

Демо
Скачать

12. Oplaz Css меню.

Css меню с простым эффектом при наведении курсора, шириной 700 px и зеркальным эффектом.

Демо
Скачать

13. Quaza CSS меню.

Темно красное меню, длиной 700 px с простым эффектом при наведении и оранжевым активным пунктом.

Демо
Скачать

14. Flosy CSS меню.

CSS меню с эффектом рамки при наведении на пункт, меню сделано с применением одного изображения.

Демо
Скачать

15. Vonso CSS меню.
CSS меню с красивым фоном.

Демо
Скачать

16. Razer меню.

Простое меню с двумя различными эффектами при наведении и для активного пункта меню.

Демо
Скачать

17. Brány CSS меню.

Простое меню с закругленными углами.

Демо
Скачать

18. Capzl CSS меню.

Глянцевое горизонтальное меню с зеркальным отражением.

Демо
Скачать

19. Skin CSS меню.

Горизонтально меню со скругленными углами и активными пунктами в виде вкладок.

Демо
Скачать

20. Nozml меню.

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

Демо
Скачать

21. Rapak CSS меню.

Горизонтальное меню с красивым фоном и эффектом рамки при наведении курсора на пункт.

Демо
Скачать

22. Czoo CSS меню.

Простое горизонтальное меню 100%, ширины с эффектом при наведении курсора.

Демо
Скачать

23. Sapy CSS меню.

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

Демо
Скачать

24. Голубое CSS меню.

Меню с красивым фоном, имеющим изогнутый вид.

Демо
Скачать

25. Cremy CSS меню.

Меню с затемненными уголками пунктов, может быть использовано на светлых и темных фонах.

Демо
Скачать

26. Sloon CSS меню.

Светлое меню с оранжевыми активными пунктами.

Демо
Скачать

27. Artine CSS меню.

Креативное горизонтальное меню.

Демо
Скачать

28. Woody CSS меню.

Меню с необычным оформлением пунктов.

Демо
Скачать

29. Серебристое меню.

Серебристое меню с удивительным эффектом при наведении курсора, может использоваться на белом фоне.

Демо
Скачать

30. Глянцевое меню.

Черное глянцевое меню с зеркальным отражением и синим эффектом при наведении курсора.

Демо
Скачать

145 техник создания меню для сайта CSS и jQuery

CSS меню для начинающих | Демо версия

Креативное меню от Шевчука Антона. Как пишет сам Антон, меню само по себе не представляет особой сложности но зато очень привлекательно смотрится.

Графическое CSS-меню | Демо версия

Это тот момент когда меню требуется оформить графикой, если требуется использовать не стандартное решение в навигации.

Горизонтальное меню (Solid Block Menu) | Демо версия

Меню с помощью CSS с использованием 2 градиентных картинок. Легко настраивается под любой дизайн.

Создание горизонтального меню | Демо версия

Еще одно похожее на то что выше горизонтальное меню.

Горизонтальное меню | Демо версия

Красивые вертикальные меню – 9 штук скачать | Демо версия

9 красивых вертикальных меню, встроены в одну HTML страницу, для того чтобы узнать код нужного вам меню просто раскройте исходный код. Кстати все эти меню взяты из программы CSS Tab Designer программа бесплатная поэтому смело можно ее скачать. В программе соответственно выбор этих меню больше есть и горизонтальные и вертикальные.

Красивые горизонтальные меню – 11 штук скачать | Демо версия

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

CSS горизонтальное меню | Демо версия

Простое базовое CSS горизонтальное меню.

41 простых но красивых CSS меню | Демо версия

Styled Menus предоставил 41 простых стильных менюшек для ваших сайтов, за что им большое спасибо, не хотите заморачиваться с кодом и дизайном, возьмите идею отсюда.

Для страховки выложил архив и на SHEBEKO.COM вот ссылка

Стильные горизонтальные CSS навигации | Демо версия

Если у вас есть собственный блог. Возможно вам подойдет одно из этих красивых горизонтальных меню.

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

Пример красивого горизонтального меню. Очень стильно даже по-моему.

Анимированное меню | Демо версия

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

Hover метод при наведении курсора | Демо версия

Навигация на CSS & jQuery | Демо версия

Стильное навигационное меню с использованием jQuery | Демо версия

Простое jQuery выпадающее меню | Демо версия

Простое выпадающее меню на jQuery | Демо версия

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

Выпадающее меню версия 2 | Демо версия

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

Выпадающее меню без Javascript | Демо версия

Источником сего примера являеться полезнейший ресурс CSSPlay.

Выпадающее меню без javascript версия 2 | Демо версия

На CSSplay недавно была опубликована новая версия выпадающего меню без использования javascript. В этой версии никаких хаков, условных комментариев и таблиц для IE6.

Простое вертикальное или горизонтальное меню на CSS | Демо версия

Выпадающее горизонтальное меню | Демо версия

Выпадающее меню XHTML+CSS+jQuery | Демо версия

Классный вариант от Dynamic Drive выпадающего меню с использование эффектов jQuery. Это многоуровневое меню, которое оформлено в виде многоуровневого HTML-списка и преобразованное в полноценное выпадающее меню с использованием чистого CSS и с применением эффектов jQuery.

Выпадающее меню на CSS | Демо версия

Недавно сделал сайт для одной строительной компании, использовал как раз данный тип выподающего меню для их сайта. Просто и со вкусом.

Выпадающее меню на CSS | Демо версия

Александр Шабуневич перевел статью про выпадающие меню на CSS – Suckerfish Dropdowns. Данная статья предназначена для новичков в CSS, желающих научиться делать красивые меню без использования JavaScript, сохраняя при этом чистый код HTML-страниц.

Минималистское выпадающее меню | Демо версия

Меню строится с помощью сочетания css + javascript, противников использования javascript’а для таких нужд не мало, но все же это меню имеет право на свое существование.

CSS Экспресс выпадающее горизонтальное меню | Демо версия

CSS Выпадающее горизонтальное меню | Демо версия

Простое выпадающее горизонтальное меню| Демо версия

Бесплатная сборка из 8 выпадающих CSS меню | Демо версия

Очень красивые и интересные техники навигации, причем используемые на популярнейших ресурсах интернета. Можно все скачать на SHEBEKO.COM

Flickr горизонтальное меню | Демо версия

Меню уже есть в сборнике выше. Меню с популярного сайта flikr

Простое jQuery выпадающее меню | Демо версия

jQuery & CSS – выпадающее меню | Демо версия

Интересное выпадающее меню, можно применить в разных областях веб-дизайна.

Выпадающее меню с использованием CSS and jQuery | Демо версия

Еще один пример выпадающего меню, в данном примере может служить как выбор какой-нибудь страны.

Выпадающее меню с анимацией jQuery | Демо версия

Отличный вариант для тех кто хочет выделить мало место под навигацию.

Дропдаун, выпадающее меню с эффектами на jQuery | Демо версия

Очень красивая выпадающая навигация от веб технолога. На данный момент эта версия позволяет добавить эффекты slide и fade, как по отдельности так и вместе, для выпадающего списка горизонтальной навигации. Плагин предназначен для двухуровневой навигации – видимый и вложенный список.

Выпадающее меню на CSS | Демо версия

Выпадающее подменю на CSS и jQuery | Демо версия

Jquery выпадающее меню | Демо версия

Мега горизонтальное выпадающее меню для больших проектов, интернет магазинов и тп. А еще здесь есть перевод урока.

Динамическое 2-х уровневое меню | Демо версия

Оригинальный урок опубликован в статье Pastel color menu with dynamic submenu using CSS. Алексей Ильин немного изменил HTML и CSS код, для того чтобы конечный результат стал более семантически корректным.

Верхняя горизонтальная навигация | Демо версия

Очень стильная горизонтальная система навигации.

2 выпадающих вертикальных CSS меню| Демо версия

Стильные навигации с разными эффектами.

Креативное с движением вертикальное меню | Демо версия

Модное и креативное меню, для ценителей стильных навигаций.

Меню с выпадающими кнопками на Mootools | Демо версия

Меню с выпадающими кнопками, с помощью Mootools. Результат будет выглядеть следующим образом:

Анимированная навигация | Демо версия

Это аналог fancy menu mootools но на jQuery. Навигация с различными эффектами добавляет на ваш сайт немного динамики, что визуально выглядет очень красиво.

Анимированное меню на Mootools | Демо версия

Техника создания анимированного меню, с помощью библиотеки Mootools. По умолчанию внешний вид меню выглядит примерно так:

Перекрывающиеся кнопки в меню | Демо версия

Выглядит просто, но симпатично =)

Jquery горизонтальная слайд навигация | Демо версия

Jquery вертикальное слайд меню | Демо версия

Меню «Гаражные двери» | Демо версия

Очень красивое меню, реализованное при помощи Jquery, сравнимое только с меню реализованными на флеше. Это меню работает за счет изменения background-position наложенных друг на друга слоями изображений.

Динамичное меню | Демо версия

Способ от Bedrich Rios, по созданию приятного и динамичного меню при помощи JavaScript библиотеки jQuery.

Анимация для меню при помощи спрайтов | Демо версия

Интересная реализация анимированного меню с помощью спрайтов.

Красивое выпадающее меню | Демо версия

Очень красивое решение, при нехватки места на сайте очень помогает, по сути на основе этой JavaScript библиотеки, размером в 10 килобайт, можно реализовать множество оригинальных идей.

3-х уровневое горизонтальное меню (+Видео) | Демо версия

Очень красивое 3-х уровневое выпадающее горизонтальное меню, плюс видео на английском как все это делается =)

Меню в стиле ipod | Демо версия

Сам не знаю где его применить … наверно только сайтам посвященым ipod’ам =)

Lava-Lamp стиль горизонтального меню (+Видео) | Демо версия

Великолепное горизонтальное меню навигации Lava-Lamp стиль, для креативных умов человечества =) и видео как это все делается.

Затемнение кнопок в меню навигации с помощью jQuery | Демо версия

Развижное горизонтальное меню | Демо версия

Просто и креативно, нечего сказать тут, надо просто пробывать данное меню на своем сайте.

Анимационная навигация с помощью CSS и jQuery | Демо версия

Анимационное меню из иконок | Демо версия

Выпадающее горизонтальное меню | Демо версия

JankoAtWarpSpeed сделал красивое меню. Которое можно использовать и доставлять себе удовольствие в использовании такой навигации.

Многоуровневое выпадающее меню | Демо версия

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

MooTools выпадающее меню | Демо версия

Меню прекрасно подойдет для туристического сайта =)

Деревовидное меню: dTree | Демо версия

Простое выпадающее меню в окне | Демо версия

Красивое MooTools анимационное меню | Демо версия

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

Верхнее слайд меню с помощью jQuery | Демо версия

Такие меню очень экономят место на сайте.

Раздвижное JavaScript меню | Демо версия

Стикер навигация | Демо версия

Создание меню при помощи CSS и JavaScript | Демо версия

Многоуровневое меню для сайта CSS | Демо версия

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

CSS3 меню | Демо версия

Тут сказать нечего, технология новая =) … пробуйте, экспериментируйте …

Графическое CSS горизонтальное меню | Демо версия

Очень интересная идея подхода в создании данного меню.

CSS горизонтальное меню со спрайтами | Демо версия

Красивое меню отлично подойдет для детского сайта или сайта игрушек.

Горизонтальное меню с описанием | Демо версия

При наведении на ссылку снизу появляется подсказка.

Спрайт горизонтальное меню | Демо версия

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

Горизонтальное меню | Демо версия

Выпадающее меню | Демо версия

Меню которое очень красиво и не броско смотрится.

CSS вертикальная навигация| Демо версия

При наведении на ссылку появляется стильная подсказка.

Меню из изобразений | Демо версия

Горизонтальное меню с прокруткой и сменой изображений.

Меню на Javascript с использование слайдера | Демо версия

2 меню на выбор, которые если включить фантазию могут способствовать улучшению вашего юзабилити, а тут источник.

CSS вертикальное меню Digg | Демо версия

Вам нравиться дизайн сайта Digg.com?Вы можете позаимствовать технику создания ихнего меню.

Раздвижные ссылки | Демо версия

Секси выпадающее меню на jQuery и CSS | Демо версия

Не знаю почему секси, но выглядит очень красиво.

Анимационная горизонтальная навигация на CSS & jQuery | Демо версия

Меню с иконками на CSS и jQuery | Демо версия

Красивое меню для экономящих место на сайте.

Меню с иконками на CSS и jQuery 2 | Демо версия

Тоже самое что и выше тока с другой стороны =)

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

Горизонтальное меню на jQuery | Демо версия

Горизонтальное меню в стиле Apple.

Слайд Jquery меню | Демо версия

Очень стильное выпадающее меню, оцените сами.

Анимационное горизонтальное меню | Демо версия

Меню для не традиционного и креативного подхода.

jQuery плагин: Вид дерева | Демо версия

Скролл jQuery меню | Демо версия

Горизонтальное скролл меню на CSS и jQuery

Анимационное выпадающее меню | Демо версия

Супер jQuery меню на CSS3 | Демо версия

Анимационное графическое меню на новом CSS3

MooTools горизонтальное меню | Демо версия

Горизонтальное меню в стиле Макбука

MooTools выпадающее горизонтальное меню | Демо версия

Многоуровневое горизонтальное выпадающее меню.

Создание меню с пояснениями | Демо версия

Меню «Лава лампа» на jQuery | Демо версия

jQuery версия скрипта, впервые написанного на mootools.

Slashdot меню от Dynamic Drive | Демо версия

Выезжающее меню — плагин к jQuery | Демо версия

Очень необычное меню, мне понравилось.

Меню FastFind | Демо версия

Скрипт позволяет создавать вложенные меню, использую при этом AJAX. К нему так же применимо перетаскивание (благодаря Interface для jQuery).

Выезжающее меню | Демо версия

Доступнен вариант с mootools и script.aculo.us.

Разворачивающееся меню | Демо версия

Меню разворачивается при нажатии на ссылку.

Слайд горизонтальная навигация | Демо версия

При нажатии на ссылку выпадает подменю.

jQueryЛист меню | Демо версия

Отличное меню рубрикатор по алфавиту.

Kwicks на jQuery | Демо версия

Красивое раздвижное меню при наведении курсора мыши.

Фиксированное меню | Демо версия

Если вы желаете чтоб ваша навигация была постоянно у посетителя на виду, то этот вариант для вас.

mb.menu | Демо версия

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

Выпадающее меню | Демо версия

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

Слайд развигающее меню | Демо версия

Увеличениее объекта при наведении | Демо версия

jQuery файловое дерево | Демо версия

Создание фиксированного меню на jQuery и CSS | Демо версия

iPod-стиль меню | Демо версия

jQuery select меню | Демо версия

Красиывй эффект навигации для элемента HTML-select

Красивое слайд меню Mootools | Демо версия

Стильное горизонтальное меню использует jQuery | Демо версия

CSS меню| Демо версия

При наведении курсора выскакивает подменю.

CSS навигация с иконками | Демо версия

Это красивое CSS меню с использование иконок.

CSS Hoverbox | Демо версия

Что то типа меню для сайта комиксов …

Двухуровневое горизонтальное меню на CSS | Демо версия

CSS горизонтальное меню | Демо версия

Outlook навигация | Демо версия

Навигационная панель из Outlooka

Меню на jQuery и CSS3 | Демо версия

CSS3 дизайн меню … пробуйте, экспериментируйте.

Слайд меню на JQuery и CSS | Демо версия

Навигация на CSS и jQuery | Демо версия

Красивый эффект при наведении курсора.

CSS3 и jQuery выпадающее меню | Демо версия

Очень красивое выпадающее горизонтальное меню.

Выезжающее меню с помощью jQuery | Демо версия

Горизонтальное меню | Демо версия

При наведении курсора, ссылка меняется на подменю.

Графическое горизонтальное меню | Демо версия

Красивое анимационное меню, для например сайта по рисованию.

Горизонтальное меню под ваш размер на jQuery | Демо версия

jDiv: jQuery выпадающее меню | Демо версия

Супер меню на jQuery & CSS3 | Демо версия

Очень стильное и красивое меню. Оцените демо:

Fresh вертикальное меню | Демо версия

Стильная и креативная навигация … Фрешшш =)

Спрятанное выпадающее горизонтальное меню на jQuery | Демо версия

Lava Lamp простое меню | Демо версия

Простое но очень красивое меню …

jQuery горизонтальное меню из иконок | Демо версия

Очень красивое горизонтальное меню из иконок, можно использовать на персональных страницах или в профилях.

Вертикальная навигация | Демо версия

Сбоку от ссылки появляется стильная подсказка.

jQuery мега меню| Демо версия

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

Меню на CSS & jQuery | Демо версия

Интересный подход в меню, можно создать с помощью данного плагина небольшой сайт визитку.

Слайд меню на jQuery | Демо версия

Меню с иконками, при наведение меняется иконка и показывается подсказка, красиво смотрится.

Слайд меню | Демо версия

Спрайт горизонтальное меню используется CSS и MooTools | Демо версия

Красивое горизонтальное меню. Подойдет для любого сайта.

Готовое решение – Красивое горизонтальное меню для сайтов (16 шт.)

Всем привет!
Эта статья будет полезна для тех, кто плохо знает основ HTML и CSS, но очень нужно горизонтальное меню для сайта.
В интернете нашел массу готовых вариантов, где вам не нужно будет замарачиватся, так как все готово для использования.
Для удобства, я разместил у себя на блоге готовые решения.
Качайте, ставьте!

Но минус в использовании этих меню заключается в том, что эти менюшки будут стандартные и не уникальны, так как многие уже их используют. Если вы захотите сделать какие-то изменение в файле, вам все равно придётся столкнуться с HTML и CSS.
Если вы хотите что-то оригинальненькое, тогда, пишите мне, сделаю, естественно за оплату :coffe: