Полоса следуйте вдоль навигации

Демо можно найти здесь.

Чему я научился на этом мини-проекте.

CSS > селектор

Это используется, когда вы хотите сопоставить прямые элементы-потомки.

Таким образом, в этом случае будет выбран первый тег li элементов с классом cool.

Использование нескольких классов для прогрессивных эффектов

В этом проекте элемент должен отображаться и постепенно исчезать. Для начала элементу дается следующий CSS… display: none, печальным следствием этого является то, что переходы не могут быть применены к элементам которые не отображаются.

Используя несколько классов и последовательно добавляя CSS, вы можете сначала добавить элемент на страницу через класс с display: block, а затем добавить второй класс с нужными свойствами преобразования.

Следующий код демонстрирует это.

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

модификация getBoundingClientRect

Этот объект по умолчанию будет давать позиционные значения на основе точки top-left текущего окна просмотра (что соответствует (0, 0)).

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

Для этого вы должны получить позиционные значения этого элемента через getBoundingClientRect и вычесть их из позиционных значений целевого элемента.

Пример показан ниже, где dropdown позиционируется на основе «навигации».

Первоначально опубликовано на gist.github.com.