30 классных уроков создания CSS меню
3 января 2012 | Опубликовано в css | 17 Комментариев »
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
Горизонтальное меню на чистом 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
Стильное меню из опускающихся квадратов с изображениями на 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-штучки для меню
Анимированные вкладки
Меню в стиле фиш-ай на чистом СSS
Красивая навигация табами на CSS
Sweet tabbed navigation using CSS3
Демо
Делаем простую стильную навигацию с помощью CSS Jquery
Creating a Simple yet Stylish CSS Jquery Menu
Демо
Горизонтальные вкладки в два уровня на jQuery
Честное выпадающее меню на 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
Как сделать анимированное меню на CSS
Making a CSS3 Animated Menu
Демо
Как сделать красивую навигационную панель на CSS3
How To Create A Clean CSS3 Navigation Bar
Демо
Подборка stylishwebdesigner.com
549
3 января 2012 в 9:38
эх, когда же мир наконец вникнет в css3...
января 3, 2012 at 12:19 пп
думаю, очень скоро и быстрыми скачками
Выбора не остается, однако
января 5, 2012 at 3:29 пп
К сожалению, до сих пор многие не используют новые технологии, бормоча о их неподдержке старыми браузерами %)
января 5, 2012 at 3:37 пп
ну, аккуратно — но используют. Наши, правда, действительно, неактивно как-то. Все пытаюсь собрать материал на статью об отечественных дизайнерах, использующий технологии responsive web design и вообще работающих с html5 и css3, да что-то их раз-два и обчелся. Вы, кстати, не из их числа, часом?
января 7, 2012 at 8:28 пп
Я пользуюсь, аккуратно :)
января 23, 2012 at 2:54 дп
Тоже аккуратно, но пользуюсь постоянно :)
апреля 5, 2012 at 1:03 пп
Так и есть, старые браузеры их не поддерживают. Например всеми любимый ie6 и ie7
Знаете ли когда это ваша работа и всё время заказчики требуют чтобы сайт был кроссбраузерный приходится подстраиваться под них.
Я хоть и знаю HTML5 и CSS3 но приходится чаще выкручиваться XHTML и jQuery
апреля 17, 2012 at 5:41 дп
Достаточно показать заказчику сводку использования данных браузеров в процентном соотношении, и вопрос отпадет сам собой.
При этом можно предусмотреть запасной вариант CSS реализации меню, если уж так дороги эти динозавры.
Мое мнение — 7, и особенно 6 ИЕ давно пора отправить на свалку истории. Я не горю желанием поддерживать пользователей, которые настолько некомпетентны, что до сих пор пользуются подобными анахронизмами. Да и заказчику не посоветую иметь с подобными пользователями дела. Проблем больше, чем пользы.
мая 26, 2012 at 3:29 дп
Я специально смотрел по квартально статистику использования браузеров. В 2012 году народ еще использует ИЕ 4))) А вы говорите что ИЕ 6 на свалку)
Кстати ИЕ 6 показал около 4000 посетителей (за квартал), и заказчик не хочет жервовать ими во имя новых технологий. Вот такие пироги...
июля 29, 2013 at 7:51 пп
Инфа пипец полезная статистика сила только в каком направлении работает ваш сайт это конечно самый важный вопрос, важнее что люди ещё работают на таком программном обеспечении и так что нам ещё пыхтеть и пыхтеть с IE а 4000 посетителей цифра внушительная, так что Павел ни куда не денется и будет ещё долго нудно заниматься большой и страстной любовью с IE (простите за пошлость)
29 января 2012 в 11:35
Спасибо. один из примеров внедрил =)
24 сентября 2012 в 19:46
Респект и Уважение админу сайта. Нашёл меню нужное. А главное что «ОСЁЛ 6» его отображает адекватно.
7 июня 2013 в 11:44
Как сделать «палец вверх — палец вниз» как у тебя на сайте?
Дай пожалуста ссылочку. у мя сайт на чистом html но и в других технологиях готов попробыывать разобратси)))
23 июня 2013 в 4:07
С учетом того, что у нас в моде бесплатный win xp, то ie6 будет еще очень долго!
14 августа 2013 в 9:52
День добрый. Не подскажите код скрипта на Slide Down Box Menu with jQuery and CSS3 меню!!! :-D :-D
апреля 9, 2014 at 4:45 дп
Нет, не подскажем
29 октября 2013 в 8:07
Спасибо за уроки, применил подобные на своем сайте developer.dn.ua *THUMBS UP*