Блог Мудрого Кота
Советы и уроки для вебмастера, монетизация сайта и немного о SEO
Главная » Дизайн » Делаем красивое меню для сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

Подпишись и получай новые записи первым!

Подписаться вы можете с помощью или , но самый удобный способ это:

Ещё по теме:
Добавляем в WordPress новые варианты Gravatar’ов, а затем выводим их в комментариях
Эффект прозрачности при наведении на ссылку и наоборот
Изменяем цвет выделения текста с помощью небольшого CSS кода
Навигация на блоге, часть вторая – пагинатор
Навигация на блоге, часть первая – список страниц
Информация о статье:
Опубликовано: 20 августа 2011, в рубрику Дизайн, просмотров: 1002.
Теги: , , .

Поделись статьёй с друзьями:

Оставь коммент, не будь бякой!


:wink: :twisted: :roll: :oops: :lol: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)


Подпишись на обновления блога:

RSS    twitter    e-mail


106 подписчиков

105 фолловеров


Подробно:

Как создать сайт с онлайн фильмами
Как создать сайт с онлайн фильмами
Создание

Раскрутка

Монетизация



Как создать шаблон и дизайн для сайта
Как создать шаблон и дизайн для сайта
Макет

Разметка

Вёрстка


  • Лучшее
  • Советую
  • Новое

Я читаю:

Записки ночного блогера
Blogger.omg-linux