Блог Александра Башкирова

ИТ и бизнес, компьютеры и ПО, фото, программирование и просто мысли…
Этот сайт в основном посвящен тому, что мне интересно вне работы. Ведется в порядке хобби.
Все изложенное на сайте - мое частное оценочное мнение и не может быть истолковано иначе.
Со всеми вытекающими из этого последствиями.

CSS меню – подборка материалов

Просмотров: 18602Комментарии: 4
Alib.spb.ru

Внимание! Данная информация частично устарела, часть ссылок возможно не рабочая.

Образовалась задачка. Построить с минимальными затратами CSS меню. Вот что нарыл...

  1. Оказывается,в природе есть фреймворк для создания CSS меню. Живет по адресу http://www.lwis.net/free-css-drop-down-menu/, обладает хорошей настраивоемостью... базируется на jQuery. Подробный разбор, как "оно" работает и пример применения - тут (http://vremenno.net/html-css/css-drop-down-menu/).
  2. Можно воспользоваться генератором CSS меню. Простой, бесплатный. Из минусов - имеет 8 тем, если хочется "чего-то еще", то нужно ручками перелопачивать код. Ссылка: http://purecssmenu.com/
  3. Можно написать "с нуля" руками. Статья (на английском), описывающая процесс и рабочий пример тут: http://www.webdesign.org/html-and-css/tutorials/css-pop-up-menu-2-horizontal-menus.12089.html
  4. Еще один генератор меню. Вот: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/generator.htm
  5. Старенькая заметка об обходе проблемы :hover в IE (проблема в том, что IE не хочет видеть :hover ни для чего, кроме ссылки) - тут: http://www.umade.ru/log/2004/07/css-hover-any-element/
  6. Короткий пример красивого меню на Jquery: http://www.master-web.info/dropdownmenu-css-gquery/
  7. Статья, в которой описывается как сделать CSS меню на "голом CSS". Хороша для понимания принципов работы такого рода меню. http://cssor.ru/css/polezno-interesnoe/cssmenu
  8. Еще один бесплатный генератор меню. http://www.izzymenu.com/
  9. Хорошая (подробная) статья про то, как сделать CSS меню. http://beholder-eye.info/2006/03/30/dropdown-menu-css
  10. Неплохая статья о создании css/php/js меню: http://www.roscripts.com/Building_a_dynamic_drop_down_menu-216.html
  11. CSS Play - хороший сайт, где есть CSS шаблоны на все случаи жизни... Есть и пример меню: http://www.cssplay.co.uk/menus/dd_valid.html
  12. По адресу http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started живет плагин для jQuery, с помощью которого (вроде) можно быстро сделать меню. ("Вроде" - потому что сам не пробовал).
  13. Простецкое jQuery меню: http://css-tricks.com/simple-jquery-dropdowns/
  14. Подробная статья о jQuery меню в wordpress: http://www.seoadsensethemes.com/wordpress-multi-level-drop-down-menu-using-jquery/

Комментариев: 4 RSS

1 Стас 01-03-2010 00:57

По поводу jQuery.

У Google есть собственная CDN (Content Delivery Network), которая, в частности, хостит и некоторые AJAX библиотеки, которые можно (и это поощряется гуглом) использовать в своих проектах:

http://code.google.com/apis/ajaxlibs/documentation/

Профит у гугла понятно где - они статистику собирают. А у вебмастера - профит в том, что апдейты библиотеки проводятся регулярно и не надо за трафик платить.

2 Alexander Bashkirov 04-03-2010 11:51

Есть и теневая сторона... она состоит в том, что порой то, что сделано под jq версии 1.2.6 может запросто не заработать под 1.3... например :)

Я с таким "безобразием" сталкивался пару раз, поэтому, пока не придумал, как с этим бороться, веду версии jq врукопашную, предварительно тестируя новую версию на совместимость с уже написанным :)

3 Стас 04-03-2010 11:56

А никто и не заставляет скакать по новым major версиям :)

Смотри:

google.load("jquery", "1.4.2");

Можно указать "1" или "1.4" или "1.4.2" - будет грузиться самая новая, соответствующая шаблону.

Всё как раз продумано: http://code.google.com/apis/ajaxlibs/documentation/#versioning

Ну и, в конце концов, ты можешь указывать URL напрямую:

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

P.S. Сам, правда, не пробовал :)

4 Alexander Bashkirov 04-03-2010 23:41

Ммм.. Надо будет поразбираться. Мне-то казалось, что вся "красота" как раз в постоянном обновлении.

Оставьте комментарий!


Комментарий будет опубликован после проверки

     

  

(обязательно)