Теперь, когда мы сделали фотошопы, чего мы надеемся достичь с помощью области поиска, мы приступили к ее созданию с помощью HTML и CSS. У нас уже загружен наш иконочный шрифт, поэтому мы размещаем его на странице. Font Explorer X помогает нам показать правильный HTML-символ для использования в увеличительном стекле.
Мы добавляем разметку в наш включаемый файл заголовка и запускаем новый файл Sass (_search.scss), чтобы написать CSS для этой новой области. Мы уверены, что CodeKit знает об этом новом файле. К сожалению, в этих ранних скринкастах CodeKit иногда требует времени для обновления, что, как я позже обнаружил, объясняется тем, что у меня есть один конкретный проект, в котором слишком много файлов. Вы можете исправить это, просто сузив каталог, в котором у вас есть часы CodeKit.
Мы абсолютно позиционируем область поиска в заголовке так, чтобы она располагалась справа и вверху от области основного содержимого. Мы настраиваем размер и расположение увеличительного стекла, выбирая конкретный значок. Мы позиционируем вещи в процентах так, чтобы они точно соответствовали нашему адаптивному дизайну. Мы также добавляем :hoverи :focusсостояния, чтобы было очевидно, что вы можете щелкнуть по нему.
Мы заканчиваем написанием кода JavaScript, который будет открывать и закрывать область поиска. Мы могли бы иметь анимацию прямо в JavaScript (поскольку мы используем jQuery), но вместо этого все, что мы делаем, это меняем имена классов в CSS. Это то, что мне нравится называть «CSS на основе состояний», где JavaScript просто управляет именами классов, которые объявляют, в каком состоянии находится страница (или область), а CSS контролирует, как страница выглядит в этом состоянии (и как она туда попадает. ). Это означает, что мы делаем такие вещи, как переходы в CSS, что, на мой взгляд, принадлежит им и будет намного лучше в долгосрочной перспективе (т.е. переходы CSS ускоряются аппаратно, а переходы JavaScript - нет, они просто быстрые итерации встроенных стилей).