>Zina: /* Hamburger / Burger Menu */

2022-11-08T11:07:10Z

Hamburger / Burger Menu

Нова сторінка

== Библиотеки ==

=== Hamburger menu / Гамбургер меню ===

* Vue Tasty Burgers — на основе библиотеки AMBURGERS https://jonsuh.com/hamburgers/
** https://github.com/imfaber/vue-tasty-burgers
** https://imfaber.github.io/vue-tasty-burgers/dist/#/index

=== VueScreen / Vue-Screen ===

* [https://github.com/reegodev/vue-screen GitHub]
* [https://reegodev.github.io/vue-screen/ Documentation]

=== vue-gtm ===

Работа с GTM — Google Tag Manager.

* Для Vue 2: https://www.npmjs.com/package/@gtm-support/vue2-gtm
* [https://krzysztof-kaszanek.medium.com/how-to-track-custom-gtm-events-in-vue-js-application-7d806717a42 How to track custom GTM events in Vue.js application?] | by Krzysztof Kaszanek | Medium

См. также:

* [https://www.youtube.com/watch?v=K7S8Js8GdZY How to Track AJAX forms with Google Tag Manager - YouTube]
* [https://www.analyticsmania.com/wp-content/uploads/2020/06/Analytics-Mania-Form-tracking-with-Google-Tag-Manager-Complete-Guide.pdf Form tracking with Google Tag Manager — Complete Guide]

== Сниппеты ==

=== Hamburger / Burger Menu ===

* Рабочая версия: https://codepen.io/romychvk/pen/PoabdEm

<source lang="html">
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Burger Menu</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
#navbar {
border: 1px solid gray;
}
.burger-button__active {
color: white;
background-color: red;
}
.burger-menu {
display: none;
}
.burger-menu__active {
display: block;
}
</style>
</head>
<body>

<div id="navbar">
<button
@click="isBurgerOpen = !isBurgerOpen"
class="burger-button"
:class="{ 'burger-button__active': isBurgerOpen }"
>
Меню
</button>
<ul
v-if="isBurgerOpen"
class="burger-menu"
>
<li>Первая ссылка</li>
<li>Вторая ссылка</li>
<li>Третья ссылка</li>
</ul>
</div>

<script>
var navbar = new Vue({
el: '#navbar',
data: {
isBurgerOpen: false
},
watch: {
isBurgerOpen: function() {
document.body.style.overflow = this.isBurgerOpen ? 'hidden' : ''
// document.body.style.padding = this.isBurgerOpen ? '0' : ''
},
},
})
</script>

</body>
</html>
</source>

=== Vite ===

Важно: синтаксис <code><nowiki><script setup></nowiki></code> (см. [https://v3.ru.vuejs.org/ru/api/sfc-script-setup.html SFC и синтаксис <script setup>]) отличается от стандартного Vue, поэтому проще всего заменить этот тэг на просто <code><nowiki><script></nowiki></code>.

<source lang="html">
<template>
<div
class="relative flex items-center justify-center h-24 p-8 mx-8 bg-yellow-100"
@click="toggle"
>
Menu
<ul
class="top-24 h-96 absolute w-full p-4"
:class="[isOpen ? 'bg-green-400' : 'hidden']"
>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
isOpen: false
}
},
methods: {
toggle() {
this.isOpen = !this.isOpen
console.log('isOpen: '+this.isOpen)
}
}
}
</script>

<style>
</style>
</source>

Vue - Історія редагувань

>Zina: /* Hamburger / Burger Menu */