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

Нажми, чтобы посмотреть.

Но для начала история «Почему я решил написать этот урок».
Раньше меню на моём блоге было таким:

Нажми, чтобы посмотреть.

Я показал его моему знакомому, и он сказал, что меню стоило бы переделать.
Что ж я начал искать уроки об этом в Интернете и наткнулся на урок по созданию меню от «Stilia.ru». Урок состоял из двух частей, и сначала он показался мне очень простым.
В первой части рассказывалось о создании меню в Photoshop , а во втором непосредственно о том, как соединить его с HTML.
Создание меню в Photoshop затруднений у меня не вызвало, но вот вёрстка…

Во второй части подробно рассказывалось, как же соединить наше меню, с HTML. Да, рассказывалось подробно, но всё было настолько сложно, что я чуть ли не забил на всё это. Была куча действий, которые просто не нужны, они только усложняли весь процесс.
Поэтому я плюнул на эти уроки и решил сделать вёрстку самостоятельно.
Итак, теперь начнём урок.
Первым делом вам нужно создать меню в Photoshop если вы знаете, как это сделать, то вы молодец.
Если нет, то посмотрите первую часть урока о том, как создать меню от «Stilia.ru».

Создание меню в Photoshop.

После того как вы создали меню, переходим непосредственно к вёрстке.
Для этого я использовал один из самых простых скриптов:

Нажми, чтобы посмотреть скрипт.

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

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

Так, что не ищите сложных путей в создании дизайна.
«Будь проще!», искренне твой «Мудрый кот».