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

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

html

Flex шаблон сайта с меню

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

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

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

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

  • Меню в мобильной версии сворачивается под кнопку
  • Header в мобильной версии становится полосой с меню
  • Также в мобильной версии можно прятать и сайдбары (ничего сложного)
Что добавилось из настроек: классы CSS в "настроченой" части позволяют настроить всё, что угодно.

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

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

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

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

Скриншоты:

Полный вид:

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

Flex шаблон сайта

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

На досуге запилил некий универсальный шаблон для сайта... Точнее, даже не так. Я тут писал что познакомился с flex css - современным расширением css, которое позволяет буквально творить чудеса. :) Решил поискать, что на эту тему есть в сети - с точки зрения готовых шаблонов сайтов на flex. Ожидаемо, их оказалось немного. В итоге взял один из и "немного допилил". Что вылилось в итоге универсальный шаблон, из которого легко можно сделать:

  • сайт шапка + подвал + 2 сайдбара + основной текст
  • сайт может быть как "резиновым", так и фиксированной ширины
  • легко и изящно может быть исключен любой компонент, то есть шаблон можно использовать для создания сайта типа шапка + подвал + сайдбар и основной текст, или, например, шапка + 2 сайдбара + основной текст...
  • сайдбары могут иметь фиксированную ширину
  • сайдбары могут иметь произвольный порядок
  • и всё это с минимумом кода
Немного про настройку. Я постарался документировать код так хорошо, как это только возможно, поэтому, после настройки но перед исползованием - комментарии лучше порезать. Собственно, правки состоят из 2х частей: правки html и css.

Что касается правок html, то там всё просто: если нужно что-то удалить, то удаляется именно там. Например, надо удалить левый сайдбар - удаляем в части html Aside 1. Ну и т.д. Теги там современные, "говорящие", так что вероятность "пролететь" - невысока.

Сложнее с настройкой CSS. Весь CSS код разделён на 3 части:

  • Неизменная часть для верстки - её менять не надо.
  • Настроечная часть для кастомизации сортировки - это часть, которая описывает последовательность расположения блоков на экране. Меняя параметр order для блоков, можно добиться того, что сайдбары будут справа. Или слева. Иные параметры (вон, высота-ширина-шрифты-и т.д.) в этой части менять не стоит!
  • Настроечная часть для кастомизации - вот тут можно и нужно менять фоны-шрифты и т.д.
Отдельно обращу внимание на параметр width: 1200px для класса wrapper-style. Если его удалить, то макет становится "резиновым". Если изменить - то это и будет искомая ширина вашего будущего сайта.

Да, для работы с шаблоном потребуется знание html + css.

Ссылка на архив с шаблоном: flex-univ.zip

CSS генератор шаблона 1 – 3 колонки

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

Случайно наткнулся. Вот: http://xhtml.ru/instr/3col_creator/index.html

Совершенно замечательная штука: генерирует html + css шаблон для сайта от 1 до 3х колонок (разумеется, с "шапкой" и "подвалом") для разных doctype, разных пропорций... Вещь!

Я проверил пару шаблонов - в моем зоопарке браузеров (opera linux, opera windows на wine, firefox linux, firefox windows на wine, IE 7 и 8 на wine) все работало вполне себе корректно. Так что - пользуйтесь на здоровье.

CSS Menu, поле ввода с иконкой и многое другое…

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

Нашел классную ссылку, где приведены примеры практически всех наиболее часто встречающихся при верстке сайта CSS решений. Ссылка вот: http://www.shtogrin.com/design/, а находится по ней приемы того, как сделать с использованием CSS:

  • поле ввода с иконкой
  • иерархический список в select
  • горизонтальное одноуровневое CSS меню
  • рамки с уголком и с тенью, а также с круглыми краями
  • оформление формы ввода при помощи CSS
  • CSS галерея
  • заголовок в виде линии

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

Просмотров: 16806Комментарии: 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/