Я доработал шаблон для сайта о котором тут писал.

Суть доработки сводилась к тому, чтобы поработать с header'ом. Теперь для мобильной версии сайта "подсвывается" свой header, в который копируется содержание текущего + меню не остается на экране, а прячется под кнопку. Реализацию сделал с использованием jquery (версии 1.7 или выше). Выбор этой библиотеки очевиден: у меня все проекты используют её, и смысла "заморачиваться" на трюки с CSS лично я не видел. Соответственно, появился блок JavaScript кода. Да и возможностей у jQuery побольше (в плане простоты реализации, всё тоже самое можно и на чистом JS сделать).

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

• Меню в мобильной версии сворачивается под кнопку
• Header в мобильной версии становится полосой с меню
• Также в мобильной версии можно прятать и сайдбары (ничего сложного)

Да, если необходимо прятать сайдбар для мобильной версии, то добавляем следующий CSS код:

@media screen and (max-width: 599px) {
 .aside-1 {display: none;}
}

Соответственно, для того, чтобы спрятать первый или второй сайдбар, используем имена классов .aside-1 и .aside-2. Аналогично можно прятать footer (класс .footer).

Ссылка для скачивания шаблона: flex-univ-mnu.zip

Скриншоты:

Полный вид:

Мобильный вид:

Что такое jQuery? Любой веб-раработчик скажет, что это JavaScript библиотека, очень сильно облегчающая жижнь веб-разработчику - и будет прав. jQuery (http://jquery.com/) - это именно библиотека, с фокусом на создание абстрактного слоя к HTML и предоставлении простого интерфейса для JavaScript. К библиотеке написаны сотни плагинов (http://plugins.jquery.com/), да и сама библиотека имеет неплохое развитие в виде набора визуальных User Interface компонент (http://jqueryui.com/). Но, кроме этого, у нее есть воистину прекрасное продолжение - jQuery mobile. Это фрйемворк, позволяющий быстро создать мобильный сайт. При этом внутри фреймворка доступен сам jQuery (с некоторыми ограничениями). А фреймворк позволяет очень быстро создать каркас веб-странички. Живет это чудо по адресу http://jquerymobile.com/

Про ограничения. jQmobile не поддерживает обработку события click, вместо него поддерживает событие tap:

<script type="text/javascript">
$('#header').live('tap', function(event){
  alert('Вы дотронулись до заголовка второй страницы');
});
</script>

Про особенности. jQmobile использует концепцию "одна страница на всё и лишнее прячем", это достигается за счет того, что div-м назначаются роли. Например:

<div data-role="page" id="main" data-theme="a">
	<div data-role="header">
		<h1>Заголовок страницы</h1>
	</div>
	<div data-role="content">	
		Содержимое страницы
		<a href="#second">Вторая страница</a>
	</div>
	<div data-role="footer">
		<h4>Подвал страницы</h4>
	</div>
</div>

Переходы между страницами осуществляются по ID - то есть href="#second" - говорит о том, что переход будет на div с ID=second, имеющий роль page. Всё просто :)

Также на сайте есть масса примеров. Достаточно легко решаются разные типовые задачи. Например, меню можно сделать так:

<a href="#popupMenu" data-rel="popup" data-transition="slideup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a">Actions...</a>
<div data-role="popup" id="popupMenu" data-theme="b">
        <ul data-role="listview" data-inset="true" style="min-width:210px;">
            <li data-role="list-divider">Choose an action</li>
            <li><a href="#">View details</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">Disable</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
</div>

Потом его, естественно, надо "прицепить" на кнопку, но ... в общем и целом "ничего такого". Потому что "прицепить" - это прописать ссылку вида #popupMenu. Всё.

В общем, по беглому знакомству - фреймворк оказался прекрасным и восхитительно простым. Кстати, для настройки внешнего вида - на сайте есть theme maker - то есть css'ку с собственной темой можно получить вообще не думая о том, "куда и что прописать". Всё очень визуально.

Ну и напоследок - фреймворк заявлен как кроссбраузерный. И похоже, что это действительно так: во всех доступных мне браузерах (на телефоне, планшете, компьюетрах под Windows и Linux) - тестовый пример отобразился без ошибок.

Я писал про ScriptJava - библиотеку, аналогичную jQuery.

Собственно, комментарий к тому посту и заставил меня "снова взяться за перо". В частности, рассмотреть эту библиотеку более подробно. Рассматривать я решил с позиции практической применимости.

Итак, что у нас в основном делается на jQuery? Если "без особых наворотов", то простенькие визуальные эффекты - меню, слайдеры, ротаторы и т.д. Также на jQuery реализуются такие вещи, как Ajax. Оговорюсь - все то же самое можно сделать и на "чистом" JavaScript. Только дольше, потому что кода писать больше. Очевидно, что JS frameworks, типа jQuery и ScriptJava берут на себя часть работы, скрывая некоторые вещи JavaScript за определенным уровнем абстракции.

Сразу же оговорюсь: лично я не считаю размер фреймворка решающим фактором, при современных каналах и вычислительных мощностях что 20, что 200 Кб практически незаметны. Это я к тому, что размер ScriptJava по отношению к jQuery для меня не является преимуществом.

Итак, к делу.

Что умеет ScriptJava по сравнению с JQuery? Попробуем свести "типовые" задчи в таблицу и разобраться - работает или нет.

Какие выводы? При помощи задач №2,3 и №4 можно "слепить" простые (но работоспособные) менюшки; на сайте ScriptJava есть пример кода ротатора изображений. То есть "первые задачи" (те, что встречаются "в лоб" - сделать меню, сделать ротатор изображений, подгрузить Ajax'ом результат работы скрипта) ScriptJava решает.

Тогда вопрос - почему разработчики повально не используют ScriptJava? Как мне кажется, причин две. Первая - в том, что проект развивается достаточно медленно (я об этом уже писал; среднее время выхода новой версии - полгода), это же следствие того, что проект, судя по всему, поддерживается одним человеком (комьюнити вокруг него я не заметил). Вторая причина - в том, что ScriptJava "в лоб" не поддерживает плагины, то есть вокруг него нет пула решений, которые бы позволили "взять-и-работать". Например, на jQuery есть масса плагинов, которые могут, например, из списка сделать меню (причем - разные: от "аккордеона" до "классического"), могут реализовать ротатор (несколькими способами с эффектами на выбор), могут "закрепить" элемент при прокрутке и т.д.

Лично я, сознаюсь честно - особенно в силу первой причины (отсутствие поддержки сообщества) плотно "сижу" на jQuery. То есть, везде, где необходимо использую именно эту библиотеку. Но, тем не менее, искренне желаю автору ScriptJava "обрасти" сообществом и пройти "точку эффекта снежного кома", что позволит дать независимым разработчикам уверенность в том, что они, в случае чего, не останутся "один на один" с исходным кодом...

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

Образовалась задачка. Построить с минимальными затратами 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/