Содержимое
Адаптивная и доступная фиксированная шапка с анимацией и выпадающим меню, которую я использую на своих проектах.
Реализация на нативных веб компонентах в виде custom element. Представлены версии:
- Отдельными файлами
- В одном файле
ВНИМАНИЕ: версия с отдельными файлами работает только, если файлы компонента лежат в той же папке, где и html страница.
Все файлы веб компонента находятся внутри папки web-component.
Файл index.html - это страница для примера.
Чтобы использовать шапку на вашей странице вам нужно подключить index.js как модуль. Вот так:
<script type="module" src="index.js"></script>
index.js в свою очередь подключает js-код компонента из header.js. А также создает сам custom element с shadow dom разметкой из header.html. Вы можете поменять название 'vallek-header' в последней строчке index.js.
Код из header.js выполняется только после того, как кастомный элемент создан с помощью .whenDefined().
В header.html файле помимо разметки подключаются стили из header.css. Классы именованы по БЭМу. Для чистоты можете вынести внешнюю "геометрию" блока (отступы) в микс типа .page__header.
Осталось просто вставить элемент <vallek-header></vallek-header> на вашу страницу и все!
Если хотите можно сделать в один файл по шаблону + JS компонента в script теге.
let template = document.createElement("template");
template.innerHTML = ` CSS in <style> tag & HTML in <html> tag `;
class vallekHeader extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.appendChild(template.content.cloneNode(true));
let script = document.createElement('script');
script.textContent = ` JS without <script> tag `;
this.shadowRoot.appendChild(script);
}
}
customElements.define('vallek-header', vallekHeader);
Вы найдете готовый вариант в файле one-file-header.js.
Не забудьте добавить:
- scroll-margin-top для заголовков c якорными ссылками на вашем сайте такой же или больше высоты, как фикс. шапка.
- Описания в атрибуты alt и aria-label для доступности
Выпадающее меню сделано по методу из этой статьи.
В кастомном элементе для функции задана небольшая задержка (50ms) через setTimeout. Без нее получаемая высота шапки может быть неверной при быстром скролле или первой загрузке/без кэша. При более низких значениях проблема оставалась (пробовал 15ms).
Пожалуйста используйте с указанием авторства (ссылка на этот репозиторий или мой профиль).
Если что-то не работает, пожалуйста, создайте issue. Вопросы и предложения можно задать в дискуссиях. Спасибо!
Responsive and accessible fixed header with animation and drop-down menu, which I use on my projects.
Реализация на нативных веб компонентах в виде custom element. Представлены версии:
Implementation on native web components as a custom element. You'll find two versions here:
- Separate files
- One file
ATTENTION: separate files version only works when component files are in the same folder as html page.
All web component's files are inside web-component folder.
File index.html is an example page.
To use the header on your page, you need to connect index.js as a module. Like this:
<script type="module" src="index.js"></script>
Don't forget to specify the correct relative paths if you have a different structure.
index.js connects the component's js code from header.js. It also creates a custom element itself with shadow dom markup from header.html. You can change the name of 'vallek-header' in the last line index.js.
The code from header.js is executed only after the custom element is created using .whenDefined().
Inside header.html styles from header.css are also connected via <link> element. Classes are named in BEM. For more pure BEM, you can take out the external styles of the block (margins) into a mix like .page__header.
All that remains is just to insert the element <vallek-header></vallek-header> to your page and that's it!
If you want, you can use one file version according to [template] (https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component /) + JS of the component in the script tag.
let template = document.createElement("template");
template.innerHTML = ` CSS in <style> tag & HTML in <html> tag `;
class vallekHeader extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.appendChild(template.content.cloneNode(true));
let script = document.createElement('script');
script.textContent = ` JS without <script> tag `;
this.shadowRoot.appendChild(script);
}
}
customElements.define('vallek-header', vallekHeader);
You will find the one file version in the one-file-header.js.
Don't forget to add:
- scroll-margin-top to headings with anchor links on your page with height same or bigger then fixed header.
- Descriptions for alts and aria-label attributes for accessibility.
The drop-down menu based on approach from this article.
In the custom element, a small delay (50ms) is set for the function via setTimeout. Without it, the computed header height may be incorrect during fast scrolling or first loading/no cache. At lower values, the problem remained (I tried 15ms). There is no such problem in the vanilla code, and therefore there is no timer.
Please use with attribution (link to this repository or my profile).
If something doesn't work, please create an issue. Questions and suggestions can be asked in discussions. Thanks!