исходники меню и навигации на css, выпадающие меню, красивые меню с эффектами - Авторские материалы о продвижении вконтакте, wordpress фишках и плагинах, SMO, SEO, дизайне
Отборная информация, которая вставляет!

Исходники меню и навигаций

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

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

<ul>
 <li>пункт меню<li>
<ul>



Все остальное — это дело техники и значений стилей.

Чтобы построить быстро красивое меню, можно: сделать его самому с нуля, а можно воспользоваться готовым, изменяя значения стилей/картинки – в итоге получим уникальное меню, быстро и красиво.

1. Некоторые исходники меню


9643e5d7

скачать исходники горизонтального меню на css

2. Исходники меню с эффектами

ссылка на загрузку подборки в конце превьюшек

слайдер – красивое выезжающее справа меню

выпадающее сверху меню

красивое меню из картинок –

Lavalamp menu

выпадающее вертикальное меню

mootools меню

меню с выезжающими иконками

выезжающее меню

скачать исходники меню с эффектами

3. Туториалы с исходниками меню

А вот ещё один отличный урок по созданию меню на русском языке – мне очень понравился

и ещё один простой урок по созданию

А здесь урок по созданию

4. Мега сборка ссылок на различные исходники менюшек

  1. :  Exploding Boy
  2. :  Exploding Boy
  3. :  Exploding Boy
  4. в виде табов :  Simplebits
  5. меню : SolarDreamStudios
  6. углы :
  7. : Simplebits
  8. : CSS Play – выпадающее разноцветное меню
  9. : CSS Play – выпадающее вертикальное меню
  10. : CSS Play — выпадающее вертикальное меню
  11. :  CSS Play – выпадающее полупрозрачное меню
  12. : набор вертикальных менюшек
  13. :  List Apart – гибридное меню в 2 строки
  14. :  CSS Play – выпадающее меню исключительно на css

5. сервис создания меню

Но и это ещё не все – вот вам 100 офигительных (если ссылка сдохнет – скажите, я перезалью)

Мониторинг сети: у вас есть блог, теперь пора заказать его продвижение на фабрика сайтов


 

Похожие статьи:



17 комментариев к “Исходники меню и навигаций”

  1. :

    Спасибо! Все написано доступным языком.

  2. :

    не доступна ссылка на «скачать исходники меню с эффектами»

  3. :

    Во повезло! :) Я уже вторую неделю ищу исходники для менюшки.
    Огромнейшее тебе спасибо!!!

  4. :

    ETNO, хочу попросить тебя кой о чем:
    Мне нужна помощь в создании такого-же меню как у тебя на этом блоге. То есть такие-же категории с иконками. Иконки я уже заказал и мне их нарисовали, осталось сделать их категориями которые выделяются при наведении.
    Мне понравилась менюха в этом посте «с выезжающими иконками», но она не подходит для аудитории моего СДЛа.
    СДЛ (также как твой и мой блоги) на вордприссе, поэтому я буду очень признателен (и оставлю постовой с блога на тебя) если ты скинешь мне на мыло исходники какого-то подобного меню как на «trend-bag.ru».
    Заранее БОЛЬШОЕ спасибо!

    • ETNO:

      дело в том, что это не плагин никакой и не фича ВП — я делаю такие менюшки просто — вбиваю их статически. Сама техника css называется спрайтами. делается так — создается 1 картинка, которая содержит все иконки, далее через css на устанавливается как фон ссылки, у каждой ссылки будет свой дополнительный класс, который смещается фоновое изображение на определенное кол-во пикселей, равной ширине самой ссылки. ЧТоб лучше объяснить — просто посмотрите файл стилей моего блога — там это будет лучше понятно. Если не поймете — спрашивайте

  5. :

    ETNO, сэнк! Я знаю что не плагином это делается (хотя есть и плагины, например Category Icons). Я за эти два дня (после написания предыдущего коммента) нашел очень хорошую инструкцию, как это все делается.
    Может кому-то пригодиться:
    ETNO, Спасибо, твои исходники дали мне знать, что именно искать, и я нашел.

  6. :

    Отличные менюшки! Буду знать, спасибо — особенно за flash.

  7. Евгений:

    Подскажите пожалуйста, как в выпадающем меню сделать текст в две строки. То есть текст длинный и не красиво задавать длину подменю 450 или типа того. Очень нужна помощь

    • ETNO:

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

  8. john9:

    Возможно ли на чистом CSS выполнить пропорциональный ресайз фоновой картинки, чтобы она всегда закрывала весь фон? Как здесь:

    • ETNO:

      если картинка вертикальная, и меньше, чем размер экрана, то ресайзнуть её не выйдет. Для такого эффекта нужна картинка больше, чем макс ширина экрана — в вашем примере это около 1900 по ширине. Можете глянуть как сделано там

  9. :

    В каких браузерах работает это меню? а то тестить не хочется, мот кто делал?

    • ETNO:

      все менюшки что на css должны работать во всех браузерах нормально. Те, что на скриптах — думаю тоже, но точно сказать не могу

  10. :

    спасибо. очень симпатичные.

  11. :

    Отлично. Добавил в закладки.

  12. :

    Спасибо все хорошо описали, ща буду ставить меню справа, еще раз спасибо автору!