Hej hej Panie i Panowie,
Potrzebuję pomocy bo utknąłem albo raczej nie wiem czy droga którą obrałem aby na pewno przyniesie rezultat jakiego oczekuję, mianowicie sporządziłem (nigdy wczesniej) proste menu i nawet mam udało się uzyskać zamierzony efekt chociaż nie do końca.
Dostarczam dane json'em w którym znajdują się tytuły, linki, id nadrzędnego poziomu menu i wygenerowany kod owszem pokazuje listę w której te które powinny być sub-menu ... są.
teraz .... nie potrafię tego dalej powiązać aby onhover/onmouseover pokazywały się te elementy które są dziećmi (.sub-menu).
a może ten koncept jest całkowicie pozbawiony sensu ?
<http://december.com/html/4/element/ul.html class="list-none ml-0 pl-0 relative font-avenir text-white text-xl uppercase leading-relaxed" > <http://december.com/html/4/element/li.html v-for="(link, key) in menu" :key="key" class="mb-2"> <template v-if="link.menu_item_parent != '0'"> <http://december.com/html/4/element/a.html :href="link.url" class="text-white tracking-widest sub-menu" @mouseenter="hoverLink(link.image, 'enter')" @mouseleave="hoverLink(link.image, 'leave')" > {{ link.name }} </http://december.com/html/4/element/a.html> </template> <template v-else> <http://december.com/html/4/element/a.html :href="link.url" class="text-white tracking-widest" @mouseenter="hoverLink(link.image, 'enter')" @mouseleave="hoverLink(link.image, 'leave')" > {{ link.name }} </http://december.com/html/4/element/a.html> </template> </http://december.com/html/4/element/li.html> </http://december.com/html/4/element/ul.html> <http://december.com/html/4/element/script.html> export default { props: ["menu"], data() { return { show: false, linkImage: 'default', }; }, methods: { toggle() { this.show = !this.show; }, hoverLink(image, state) { this.linkImage = state === "enter" ? image : 'default'; } }, computed: { }, mounted() {} }; </http://december.com/html/4/element/script.html>
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)