Optimizator Field – блог веб разработчика » разработка

Непростое CSS меню с использованием спрайтов

YoYurec — Fri, 26 Feb 2010 00:02:49 +0000

Всем привет! Снова с вами я, а значит настало время очередной заметки. Ударимся немного в трудовые будни создания сайтов, а точнее горизонтального меню. Но не простого, а… нет, не золотого :) Просто немного нестандартного.

Все вы, надеюсь, вдоволь начитались и наделали css меню с использованием спрайтов (объяснять не вижу смысла, есть много материла на данную тематику – «CSS Sprites: все, что вы знали, но боялись спросить»).

Техника до ужаса проста – делаем список, на фон ссылки стилями вешаем картинку, по :hover смещаем фон…

Создавал десятки простых меню (с прямыми границами) и я…
К примеру такое:

Но однажды попалось с диагональными:

При создании такого меню придётся немного заморочиться. Первым делом нужно создать спрайт-матрицу для каждого состояния кнопок. Пример:

Не пинайте за код (хотя всё в нём ОК) – главное идея! ))

Начнём с xhtml кода меню. Обычный список, у каждой ссылки уникальный id, т.к. меню полностью графическое:

<ul id="menu">
	<li><a href="#" id="menu-home" class="hide">Home</a></li>
	<li><a href="#" id="menu-incentives" class="hide">Federal Incentives</a></li>
	<li><a href="#" id="menu-approach" class="hide">Personal Approach</a></li>
	<li><a href="#" id="menu-solutions" class="hide current">Custom Solutions</a></li>
	<li><a href="#" id="menu-opportunities" class="hide">Partnership Opportunities</a></li>
	<li><a href="#" id="menu-contacts" class="hide">Contact Us</a></li>
</ul>

Создадим также css спрайт:

И стили для данного меню:

.hide {text-indent:-9999px; overflow:hidden; zoom:1; display:block;}
 
#menu {width:990px; margin:0; padding:0;overflow:hidden; zoom:1;}
 
	#menu li {list-style-type:none; display:inline; margin:0; padding:0;}
 
		#menu li a {float:left;height:30px;background: #145395 url(../img/menu.png) no-repeat 0 0;}
 
		#menu a#menu-home {width:97px;background-position:0 0;}
		#menu a#menu-home:hover, #menu .prev a#menu-home:hover, #menu a#menu-home.current {background-position:0 -30px;}
		#menu .prev a#menu-home {background-position:0 -60px;}
 
		#menu a#menu-incentives {width:174px;background-position:-97px 0;}
		#menu a#menu-incentives:hover, #menu .prev a#menu-incentives:hover, #menu a#menu-incentives.current {background-position:-97px -60px;}
		#menu .prev a#menu-incentives {background-position:-97px -90px;}
 
		#menu a#menu-approach {width:174px;background-position:-271px 0;}
		#menu a#menu-approach:hover, #menu .prev a#menu-approach:hover, #menu a#menu-approach.current {background-position:-271px -90px;}
		#menu .prev a#menu-approach {background-position:-271px -120px;}
 
		#menu a#menu-solutions {width:186px;background-position:-445px 0;}
		#menu a#menu-solutions:hover, #menu .prev a#menu-solutions:hover, #menu a#menu-solutions.current {background-position:-445px -120px;}
		#menu .prev a#menu-solutions {background-position:-445px -150px;}
 
		#menu a#menu-opportunities {width:220px;background-position:-631px 0;}
		#menu a#menu-opportunities:hover, #menu .prev a#menu-opportunitie:hover, #menu a#menu-opportunities.current {background-position:-631px -150px;}
		#menu .prev a#menu-opportunities {background-position:-631px -180px;}
 
		#menu a#menu-contacts {width:139px;background-position:-851px 0;}
		#menu a#menu-contacts:hover, #menu .prev a#menu-contacts:hover, #menu a#menu-contacts.current {background-position:-851px -180px;}

Но у автора вышеупомянутой статьи была ситуация проще – только один край кнопки скошен. У нас же – оба. Получается, что кроме указания фона активному пункту (он жёстко прописан у текущей страницы – класс «current»), нужно ещё позаботиться и о предыдущем (класс «prev» – навесим на li, т.к. IE6 не любит много классов на одном элементе):

Далее задача наша сводится нескольким пунктам (js код ниже):

запомнить текущий активный пункт (2)
при наведении курсора на пункт меню (4) убрать все классы (6)
на предыдущий пункт навесить класс «prev» (7)
при убирании курсора (9) убрать клас «prev» (10)
вернуть активный пункт меню к первоначальному состоянию (11)

Обратимся за помощью к javascript, а точнее к jquery – благо, данную библиотеку использую почти на всех проектах:

$(document).ready(function() {
	var $current = $('#menu .current');
	$current.parent().prev().addClass('prev');
	$('#menu a').hover(
		function() {
			$(this).parent().parent().find('li').removeClass('prev').find('a').removeClass('current');
			$(this).parent().prev().addClass('prev');
		},
		function() {
			$(this).parent().prev().removeClass('prev');
			$($current).addClass('current').parent().prev().addClass('prev');
		}
	);
});

В итоге всё заработает, можете посмотреть демо1.

Можно даже немного пошаманить со картинкой-спрайтом, упростив её!

Смотрим демо2.

PS: и без js тоже вполне приемлимо… и без… Но об этом в следующий раз. Удачи!

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

Snipplr – сервис для хранения вашего кода (сниппетов)

YoYurec — Thu, 29 Oct 2009 16:48:23 +0000

Где вы обычно храните мелкие куски кода (они же «сниппеты»)?
В памяти? Ненадёжно ))
В текстовых файлах? Немного лучше, но не идеально.
В закладках? А если на той страничке нужно всего пару строк или они вообще были предложены комментатором и находятся чёрт знает где? Рыскать по статье не вариант для нас.

Для большей пользы лучше найти себе специализированное хранилище в сети. Желательно бесплатное, функциональное и удобное. Таким местом является Snipplr.

Неброский дизайн. Наличие таких социальных полезных фишек как «популярные», «последние» сниппеты, популярные теги, возможность добавлять чужие сниппеты в избранное, поиск (куда ж без него), возможность комментирования и поддержка RSS.

Немаловажным плюсом является и открытый API, с помощью которого (через плагины) можно получать сниппеты с сайта в вашей любимой IDE!
Что ещё нужно для счастья? Конечно же, базовый функционал ))

Поддержка большого количества языков программирования:

Раскрашивание кода:

При добавлении сниппета можно:
* кроме названия и выбора языка вбить теги;
* указать URL странички откуда вы почерпнули столь нужный код;
* добавить поясняющий комментарий;
* сделать сниппет приватным;

Ну а добавлять можно как на сайте, так и с помощью bookmarklets – выделите код и нажмите на bookmarklet.

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

PS: ведутся работы над плагином для WebIDE… stay tuned!

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

Цветовая схема Monokai для JetBrains WebIDE

YoYurec — Tue, 13 Oct 2009 12:49:43 +0000

Вот на досуге сделал для WebIDE порт с цветового оформления Monokai из Textamate. Захотелось тёмненького…
PHP:

CSS:

Качаем Monokai _YoYurec_.xml и ложим в \WebIDE\.WebIde10\config\colors\, далее выбираем тему в настройках «Editor -> Color & Fonts».

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

Как сделать Web IDE портабельной?

YoYurec — Thu, 13 Aug 2009 10:23:58 +0000

Для начала качаем, устанавливаем, НО не запускаем WebIDE.
Либо просто распаковываем инсталл (например, хорошей и бесплатной [и естественно портабельной B-) ] UniExtract)

Далее нужно поменять пути к настройкам(config) и плагинам(/config/plugins)
Системную папку (system) не трогать, т.к. она содержит индексы проектов и разрастается неимоверно – пусть так и лежит в папке юзера ОС.

А конкретнее, в папке «\WebIDE\bin\» правим файл idea.properties (строки 12-19):

idea.config.path=${idea.home}/.WebIde10/config
idea.system.path=${user.home}/.WebIde10/system
idea.plugins.path=${idea.home}/.WebIde10/config/plugins

Т.е просто поменяли ${user.home} на ${idea.home} и теперь все настройки будут в папке IDE!

Кстати, в плане портабельности Web IDE гораздо вкуснее MAIA – она весит на 150мб меньше :)

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

JetBrains Web IDE

YoYurec — Wed, 12 Aug 2009 15:36:16 +0000

Для осознания что это за зверь советую почитать замечательную статью от Вадима Макишвили – «Вёрстка в IntelliJIDEA». Часть №1 и Часть №2.

Но самое главное в моей заметке не это. Главное – новость о том, что…

JetBrains открыла программу EAP (Early Access Program) для JetBrains Web IDE. JetBrains Web IDE это IDE для веб программирования. Она построена на основе платформы JetBrains IDE Framework.
Web IDE доступна в двух вариантах: в стандартный вариант включена поддержка HTML, CSS, Javascript. В PHP Developer edition добавляется поддержка PHP и SQL.

Т.е. имеем на выходе:

всё лишнее (связанное с Java) убрано;
работа с проектами стала удобнее (нет модулей и пр.);
дополнительно конфигурировать ничего не нужно;
запускается и бегает шустрее;
добавлена синхронизашия с FTP и SFTP!!!

Плюс из того что уже было:

удобнейшая навигация по файлам проекта и коду;
анализ и подсветка ошибок в коде на лету;
встроенная поддержка Subversion, Perforce, Git, и CVS;
и конечно же кроссплатформенность (Windows, Mac OS X и Linux)

Качаем и кодим с удовольствием!
Ребятам из JetBrains огромное СПАСИБО!

UPD: Чтобы добавить LiveTempalte для CSS нужно скачать архив и распаковать файл в папку «%user%\.WebIde10\config\templates\»!

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

Яндекс.Субботник в Киеве — вёрстка, API и другое…

YoYurec — Wed, 15 Apr 2009 10:01:00 +0000

Яндекс приглашает в гости всех, кому интересно поговорить о HTML-вёрстке, CSS, API и обсудить эти темы за чашкой кофе. Пройдёт субботник 25 апреля.

Субботники ориентированы на разработчиков и проходят в комфортной, неформальной обстановке офиса Яндекса. Участие в Cубботниках бесплатное. Первое мероприятие из цикла Я.Субботник — «Верстка, API и другое…» прошло 31 января 2009 года.

Отличная идея делиться таким уникальным опытом веб-разработок! К сожалению, все места уже заняты, так что остаётся только читать отзывы и статьи, листать презентации и смотреть видео о прошедшем московском:

PS: уже подсел на IntelliJIDEA!
Вёрстка в IntelliJIDEA. Часть №1
Вёрстка в IntelliJIDEA. Часть №2

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

Выбираем софт для редактирования кода

YoYurec — Fri, 20 Jun 2008 14:34:58 +0000

Известное интернет-издание для вебдизайнеров Smashingmagazine.com на днях разродилось отличнейшей статьёй про обзор CSS редакторов переводить смысла не вижу, так что просто линк. Для полной картины можете ещё почитать обзор 35 редакторов кода месячной давности. Удачи!

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

Меняем рабочую папку в Symfony

YoYurec — Tue, 15 Apr 2008 15:10:07 +0000

Довелось работать с симфонией… мутная вещь, однако!
Есть такая нехорошая в ней фишка, как использование папки «web» для приложения :(. На «денвере» запарился с виртуальными хостами, но всё поднял кое как…

Другая проблема появилась, когда я захотел выложить проект – на хостинге ведь «public_html» папка у апача! Хорошо, если это ваш личный сервер и можно подправить конфиг апача или через админпанель что-то поколдовать (кстати так и не нашёл как это сделать в direcadmin). А что если нет доступа?

Решение было найдено на блоге Digital Base и заключается в добавлении кода в конец конфигурационного файла вашего приложения (config.php):

      $sf_root_dir = sfConfig::get('sf_root_dir');
      sfConfig::add(array(
        'sf_web_dir_name' => $sf_web_dir_name = 'public_html',
        'sf_web_dir'      => $sf_root_dir.DIRECTORY_SEPARATOR.$sf_web_dir_name,
        'sf_upload_dir'   => $sf_root_dir.DIRECTORY_SEPARATOR.$sf_web_dir_name.DIRECTORY_SEPARATOR.sfConfig::get('sf_upload_dir_name'),
      ));

Естественно остальные папки фреймворка должны лежать вне папки «public_html» !

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

Snipplr – сервис для хранения вашего кода (сниппетов)

SVN. Версии под контролем

YoYurec — Mon, 28 Jan 2008 11:16:36 +0000

Пришлось по работе разбираться с SVN. А так как я ничего не знаю о Subversion и использовании TortoiseSVN, то отправился гуглить. Наткнулся на полезную статью «Версии под контролем«, которую написал Лобач Олег.

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

Автору респект и уважуха, а статью в закладки, однозначно! Собственно как и остальные заметки по теме от автора блога: «Как и Зачем делать ветки?«, «Как слить изменения между ветками. Часть 1«, «Как слить изменения между ветками. Часть 2«.

Возможно полезной для кого-то (я юзаю SciTe) будет статья «Совместное использование Notepad ++ и TortoiseSVN«.

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

CSS-debug

YoYurec — Tue, 25 Dec 2007 16:50:29 +0000

Вот и настало время выплеснуть из себя заметку по CSS :)
Что-то из инструментария хочется описать. Упрощаем и делаем свою работу удобнее! Зачем? И ребёнку ясно – возможность в рабочее время иметь законные минутки, чтобы написать в блог или порубиться в КС с коворкерами :)

Сегодня я расскажу о КСС-дэбаге и диагностике :)

В былые времена, когда я ещё верстал таблицами было очень удобно использовать для поиска глюков вёрстки:

 border="1">....>

Сейчас же, верстая дивами я использую CSS стили для нужных блоков. Мало ли, какой баг закрался и без FireBugWebDeveloper не узнать почему блоки поплыли…а мы ему ррраааззз:
div.bug {background: red;}
…или…

div.bug {border: 1px solid red;}

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

«Уууууу! Мы это всё знаеееем!», – закричите Вы и будете правы. Поэтому я приведу ещё пару интересных решений:

Eric Meyer предложил использовать опредленные CSS правила для выявления ошибок на странице в ходе проектирования. Цель правил визуально показывать ошибки на странице. Например если у ссылки не проставлен адрес она выделяется определенным цветом и сразу обращает на себя внимание.
Почитайте на Life Style перевод статьи.

И ещё:

Есть картинка, размером 1200х800 пикселей, на которой расчерчена каркасная решетка разметки квадратами со стороной 50 пикселей. Картинка вставляется как фоновое изображение в body и упрощает визуальное размещение блоков во время верстки.
Забираем «тулзу» с Webmakers Lounge

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