С того момента, как я начал работать в интернете мне приходилось делать уже более 200 сайтов – и корпоративных, и для себя, и сателлитов, и порталов и во всех сайтах, неважно какой он структуры, есть один постоянный элемент – это меню. Сегодня я вам предоставлю огромную коллекцию разнообразных меню и навигаций: меню на css, горизонтальные, вертикальные меню, выпадающие и на скриптах.
Итак, любое нормальное меню обычно имеет семантическую верстку и строится через списки, т.е. конструкцией вида
<ul> <li>пункт меню<li> <ul>
Все остальное — это дело техники и значений стилей.
Чтобы построить быстро красивое меню, можно: сделать его самому с нуля, а можно воспользоваться готовым, изменяя значения стилей/картинки – в итоге получим уникальное меню, быстро и красиво.
1. Некоторые исходники меню
скачать исходники горизонтального меню на css
2. Исходники меню с эффектами
ссылка на загрузку подборки в конце превьюшек
слайдер – красивое выезжающее справа меню
выпадающее сверху меню
красивое меню из картинок –
Lavalamp menu
выпадающее вертикальное меню
mootools меню
меню с выезжающими иконками
выезжающее меню
скачать исходники меню с эффектами
3. Туториалы с исходниками меню
/
\
\
А вот ещё один отличный урок по созданию меню на русском языке – мне очень понравился
и ещё один простой урок по созданию
А здесь урок по созданию
4. Мега сборка ссылок на различные исходники менюшек
- : Exploding Boy
- : Exploding Boy
- : Exploding Boy
- в виде табов : Simplebits
- меню : SolarDreamStudios
- углы :
- : Simplebits
- : CSS Play – выпадающее разноцветное меню
- : CSS Play – выпадающее вертикальное меню
- : CSS Play — выпадающее вертикальное меню
- : CSS Play – выпадающее полупрозрачное меню
- : набор вертикальных менюшек
- : List Apart – гибридное меню в 2 строки
- : CSS Play – выпадающее меню исключительно на css
5. сервис создания меню
Но и это ещё не все – вот вам 100 офигительных (если ссылка сдохнет – скажите, я перезалью)
Мониторинг сети: у вас есть блог, теперь пора заказать его продвижение на фабрика сайтов
Понравилась статья? - Подпишись.
Или поделись полезным с миром
Похожие статьи:
Спасибо! Все написано доступным языком.
не доступна ссылка на «скачать исходники меню с эффектами»
да, точно, почему движок порезал ссылку — сейчас должна быть видна
Во повезло!
Я уже вторую неделю ищу исходники для менюшки.
Огромнейшее тебе спасибо!!!
ETNO, хочу попросить тебя кой о чем:
Мне нужна помощь в создании такого-же меню как у тебя на этом блоге. То есть такие-же категории с иконками. Иконки я уже заказал и мне их нарисовали, осталось сделать их категориями которые выделяются при наведении.
Мне понравилась менюха в этом посте «с выезжающими иконками», но она не подходит для аудитории моего СДЛа.
СДЛ (также как твой и мой блоги) на вордприссе, поэтому я буду очень признателен (и оставлю постовой с блога на тебя) если ты скинешь мне на мыло исходники какого-то подобного меню как на «fleek.org».
Заранее БОЛЬШОЕ спасибо!
дело в том, что это не плагин никакой и не фича ВП — я делаю такие менюшки просто — вбиваю их статически. Сама техника css называется спрайтами. делается так — создается 1 картинка, которая содержит все иконки, далее через css на устанавливается как фон ссылки, у каждой ссылки будет свой дополнительный класс, который смещается фоновое изображение на определенное кол-во пикселей, равной ширине самой ссылки. ЧТоб лучше объяснить — просто посмотрите файл стилей моего блога — там это будет лучше понятно. Если не поймете — спрашивайте
ETNO, сэнк! Я знаю что не плагином это делается (хотя есть и плагины, например Category Icons). Я за эти два дня (после написания предыдущего коммента) нашел очень хорошую инструкцию, как это все делается.
Может кому-то пригодиться:
ETNO, Спасибо, твои исходники дали мне знать, что именно искать, и я нашел.
Отличные менюшки! Буду знать, спасибо — особенно за flash.
Подскажите пожалуйста, как в выпадающем меню сделать текст в две строки. То есть текст длинный и не красиво задавать длину подменю 450 или типа того. Очень нужна помощь
не понятно что вы хотите. если указать фиксированную ширину подменю, то текст будет переноситься на вторую строчку сам.
Возможно ли на чистом CSS выполнить пропорциональный ресайз фоновой картинки, чтобы она всегда закрывала весь фон? Как здесь:
если картинка вертикальная, и меньше, чем размер экрана, то ресайзнуть её не выйдет. Для такого эффекта нужна картинка больше, чем макс ширина экрана — в вашем примере это около 1900 по ширине. Можете глянуть как сделано там
В каких браузерах работает это меню? а то тестить не хочется, мот кто делал?
все менюшки что на css должны работать во всех браузерах нормально. Те, что на скриптах — думаю тоже, но точно сказать не могу
спасибо. очень симпатичные.
Отлично. Добавил в закладки.
Спасибо все хорошо описали, ща буду ставить меню справа, еще раз спасибо автору!