<div class="relative">
<h3 class="text-lg text-black-50 text-center md:text-left mb-4 absolute pin-t pin-l w-full c-dropdown__label">Read about</h3>
<div class="c-dropdown relative m-auto shadow-card hover:shadow-card-on" data-behaviour="DropDown">
<button data-accordion-btn data-target="#dropdown-menu" class="c-dropdown__btn no-apperance bg-white z-20 py-4 px-4 relative w-full flex items-center justify-between">
<span class="c-dropdown__item mr-2 text-xl leading-xl text-black-20 hover:text-black-50" data-dropdown-label>Asta's must haves</span>
<i class="icon icon--ui-down">
<svg>
<use class="no-barba" xlink:href="#ui-down"></use>
</svg>
</i>
</button>
<div class="c-dropdown__menu border-t border-black-20 bg-white z-10 w-full pt-1 z-2" id="dropdown-menu">
<div class="py-4">
<a href="#0" class="c-dropdown__item block text-xl leading-xl py-1 px-6 text-black-20 hover:text-black-50 whitespace-no-wrap no-underline">
Lifestyle
</a>
<a href="#0" class="c-dropdown__item block text-xl leading-xl py-1 px-6 text-black-20 hover:text-black-50 whitespace-no-wrap no-underline">
Gifts
</a>
<a href="#0" class="c-dropdown__item block text-xl leading-xl py-1 px-6 text-black-20 hover:text-black-50 whitespace-no-wrap no-underline">
Fashion
</a>
<a href="#0" class="c-dropdown__item block text-xl leading-xl py-1 px-6 text-black-20 hover:text-black-50 whitespace-no-wrap no-underline">
Press
</a>
</div>
</div>
</div>
</div>
{% import '@helpers' as h %}
<div class="relative">
<h3 class="text-lg text-black-50 text-center md:text-left mb-4 absolute pin-t pin-l w-full c-dropdown__label">Read about</h3>
<div class="c-dropdown relative m-auto shadow-card hover:shadow-card-on" data-behaviour="DropDown">
<button data-accordion-btn data-target="#dropdown-menu" class="c-dropdown__btn no-apperance bg-white z-20 py-4 px-4 relative w-full flex items-center justify-between">
<span class="c-dropdown__item mr-2 text-xl leading-xl text-black-20 hover:text-black-50" data-dropdown-label>{{ label }}</span>
{{ h.symbol('ui-down') }}
</button>
<div class="c-dropdown__menu border-t border-black-20 bg-white z-10 w-full pt-1 z-2" id="dropdown-menu">
<div class="py-4">
{% for item in items %}
<a href="{{ item.slug }}" class="c-dropdown__item block text-xl leading-xl py-1 px-6 text-black-20 hover:text-black-50 whitespace-no-wrap no-underline">
{{ item.text }}
</a>
{% endfor %}
</div>
</div>
</div>
</div>
{
"siteTitle": "Asta Valentaite",
"copyright": "© 2017 Asta Valentaite. All rights reserved.",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"objects": "/02-objects/",
"global": "../03-global/",
"components": "/04-components/",
"pages": "/05-pages/",
"macros": "/macros/",
"wrapper": "/wrapper/"
}
}
}
}
},
"sitemenu": [
{
"title": "About",
"slug": "/components/preview/about"
},
{
"title": "Fashion",
"slug": "/components/preview/press"
},
{
"title": "Beauty",
"slug": "/components/preview/post"
},
{
"title": "Lifestyle",
"slug": "/components/preview/vertical"
},
{
"title": "Collaborations",
"slug": "/components/preview/collaborations"
},
{
"title": "Press",
"slug": "/components/preview/press"
}
],
"label": "Asta's must haves",
"items": [
{
"text": "Lifestyle",
"slug": "#0"
},
{
"text": "Gifts",
"slug": "#0"
},
{
"text": "Fashion",
"slug": "#0"
},
{
"text": "Press",
"slug": "#0"
}
]
}
.c-dropdown {
transform-origin: 0% 0%;
transform: translate3d(0, rem(-35px), 0);
}
.c-dropdown__label {
transform: translate3d(0, rem(-80px), 0);
}
.c-dropdown__item {
transition: color 300ms ease;
}
.c-dropdown__btn {
.icon {
//transform: rotate(-45deg);
transform-origin: center;
}
}
// .c-dropdown__menu {
// top: 100%;
// transform: translate3d(0, rem(-5px), 0);
// transform-origin: 0% 0%;
// transition: transform 300ms ease, opacity 300ms ease, visibility 0ms 300ms;
// opacity: 0;
// &.is-open {
// visibility: visible;
// pointer-events: auto;
// opacity: 1;
// transform: translate3d(0, 0, 0);
// transition-delay: 0ms;
// }
// }
[data-dropdown-button] {
&:focus {
outline: 0;
}
}
There are no notes for this item.