Navigation
Navigation004
ナビゲーション用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。
↓
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Stack, Container, Frame, Flex, Grid, Media, Layer, BoxLink, Icon, Text, Heading } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title="Navigation004">
<Grid gtr="auto" gtc={['auto', null, 'auto 1fr']} pos="relative">
<Layer>
<Frame h="100%">
<Media src="https://cdn.lism-css.com/random/img" alt="" width="960" height="640" />
<Layer bgc="black:30%" />
</Frame>
</Layer>
<Container isWrapper="l" gr="1" gc="1" py="50" hasGutter pos="relative">
<Stack g="40">
<Stack g="30" ai="flex-start" c="white">
<Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">製品カテゴリー</Heading>
<p>
キッチン家電やオーディオ機器など、様々な製品カテゴリーをご用意しています。<br />
お客様のライフスタイルに合わせた商品を見つけてください。
</p>
</Stack>
<Stack g="50">
<Grid gtc="repeat(auto-fit, minmax(250px, 1fr))" g="30">
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="20"
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Stack jc="center" g="15">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">洗濯機・衣類ケア</Text>
<Text class="u--trim" fz="xs" o="pp">LAUNDRY</Text>
</Stack>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="caret-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="20"
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Stack jc="center" g="15">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">掃除機</Text>
<Text class="u--trim" fz="xs" o="pp">CLEANING</Text>
</Stack>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="caret-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="20"
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Stack jc="center" g="15">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">オーディオ</Text>
<Text class="u--trim" fz="xs" o="pp">AUDIO</Text>
</Stack>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="caret-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="20"
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Stack jc="center" g="15">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">美容・健康家電</Text>
<Text class="u--trim" fz="xs" o="pp">BEAUTY & HEALTH</Text>
</Stack>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="caret-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="20"
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Stack jc="center" g="15">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">照明</Text>
<Text class="u--trim" fz="xs" o="pp">LIGHTING</Text>
</Stack>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="caret-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="20"
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Stack jc="center" g="15">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">スマートホーム</Text>
<Text class="u--trim" fz="xs" o="pp">SMART HOME</Text>
</Stack>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="caret-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="20"
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Stack jc="center" g="15">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">キッチン</Text>
<Text class="u--trim" fz="xs" o="pp">KITCHEN</Text>
</Stack>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="caret-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
<BoxLink
href="#"
layout="flex"
g="30"
ai="center"
jc="between"
p="20"
bgc="white"
bdrs="10"
set="var:hov"
hasTransition
hov={{ bxsh: '20' }}
>
<Stack jc="center" g="15">
<Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">空調・生活家電</Text>
<Text class="u--trim" fz="xs" o="pp">LIVING & AIR</Text>
</Stack>
<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
<Icon icon="caret-right" fz="2xs" c="white" />
</Flex>
</BoxLink>
</Grid>
</Stack>
</Stack>
</Container>
</Grid>
</DemoLayout>
<style>
@media (any-hover: hover) {
.-hov\:in\:cLink {
color: var(--_isHov, var(--link));
}
}
</style> style.css