Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

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




Комментарии

  1. Андрей Гурылёв
    Thumb up Thumb down +5

    эх, когда же мир наконец вникнет в css3...

    Ответить

    Olga Ответ:

    Thumb up Thumb down 0

    думаю, очень скоро и быстрыми скачками ;) Выбора не остается, однако

    Ответить

    Андрей Гурылёв Ответ:

    Thumb up Thumb down +7

    К сожалению, до сих пор многие не используют новые технологии, бормоча о их неподдержке старыми браузерами %)

    Ответить

    Olga Ответ:

    Thumb up Thumb down +3

    ну, аккуратно — но используют. Наши, правда, действительно, неактивно как-то. Все пытаюсь собрать материал на статью об отечественных дизайнерах, использующий технологии responsive web design и вообще работающих с html5 и css3, да что-то их раз-два и обчелся. Вы, кстати, не из их числа, часом?

    Ответить

    RAMe0 Ответ:

    Thumb up Thumb down 0

    Я пользуюсь, аккуратно :)

    Ответить

    Desir Ответ:

    Thumb up Thumb down +1

    Тоже аккуратно, но пользуюсь постоянно :)

    Ответить

    Илья Ответ:

    Thumb up Thumb down 0

    Так и есть, старые браузеры их не поддерживают. Например всеми любимый ie6 и ie7

    Знаете ли когда это ваша работа и всё время заказчики требуют чтобы сайт был кроссбраузерный приходится подстраиваться под них.

    Я хоть и знаю HTML5 и CSS3 но приходится чаще выкручиваться XHTML и jQuery

    Ответить

    Павел Ответ:

    Thumb up Thumb down +2

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

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

    Мое мнение — 7, и особенно 6 ИЕ давно пора отправить на свалку истории. Я не горю желанием поддерживать пользователей, которые настолько некомпетентны, что до сих пор пользуются подобными анахронизмами. Да и заказчику не посоветую иметь с подобными пользователями дела. Проблем больше, чем пользы.

    Ответить

    Евгений Ответ:

    Thumb up Thumb down +1

    Я специально смотрел по квартально статистику использования браузеров. В 2012 году народ еще использует ИЕ 4))) А вы говорите что ИЕ 6 на свалку)

    Кстати ИЕ 6 показал около 4000 посетителей (за квартал), и заказчик не хочет жервовать ими во имя новых технологий. Вот такие пироги...

    Ответить

    Сергей Ответ:

    Thumb up Thumb down 0

    Инфа пипец полезная статистика сила только в каком направлении работает ваш сайт это конечно самый важный вопрос, важнее что люди ещё работают на таком программном обеспечении и так что нам ещё пыхтеть и пыхтеть с IE а 4000 посетителей цифра внушительная, так что Павел ни куда не денется и будет ещё долго нудно заниматься большой и страстной любовью с IE (простите за пошлость)

  2. SAM
    Thumb up Thumb down -1

    Спасибо. один из примеров внедрил =)

    Ответить

  3. Андрей
    Thumb up Thumb down +2

    Респект и Уважение админу сайта. Нашёл меню нужное. А главное что «ОСЁЛ 6» его отображает адекватно.

    Ответить

  4. anton
    Thumb up Thumb down -2

    Как сделать «палец вверх — палец вниз» как у тебя на сайте?

    Дай пожалуста ссылочку. у мя сайт на чистом html но и в других технологиях готов попробыывать разобратси)))

    Ответить

  5. Вячеслав
    Thumb up Thumb down 0

    С учетом того, что у нас в моде бесплатный win xp, то ie6 будет еще очень долго!

    Ответить

  6. Denis
    Thumb up Thumb down -2

    День добрый. Не подскажите код скрипта на Slide Down Box Menu with jQuery and CSS3 меню!!! :-D :-D

    Ответить

    Никитка Ответ:

    Thumb up Thumb down 0

    Нет, не подскажем ah-ty-zh_28196466_orig_.png

    Ответить

  7. Vasiliy
    Thumb up Thumb down 0

    Спасибо за уроки, применил подобные на своем сайте developer.dn.ua *THUMBS UP*

    Ответить

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


семь − = 0

Вставить изображение