Navigation
Navigation002
ナビゲーション用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。breakpoint「md」以下は1カラムで表示されます。
↓
コード
index.astro
---
import DemoLayout from '@/layouts/DemoLayout.astro';
import { Container, Flex, Grid, Icon, LinkBox, Stack, HTML } from 'lism-css/astro';
import './_style.css';
---
<DemoLayout title='Navigation002'>
<Container isWrapper='l' bgc='base' py='50' hasGutter>
<Grid gtc={['auto', null, 'auto 1fr']} g='50 60'>
<Stack ai='flex-s' g='30'>
<HTML.h lv='2' class='u-trim' fz='2xl' fw='bold' ta='center'>製品カテゴリー</HTML.h>
<HTML.p class='u-trim' fz='s' o='-10'>気になるカテゴリーから探せます</HTML.p>
</Stack>
<Stack g='40'>
<Grid layout='fluidCols' cols='16rem' g='0 40' pt='1px'>
<LinkBox href='#' layout='flex' g='30' ai='center' jc='between' p='40 10' mt='-1px' bd-y setHov>
<HTML.p class='u-trim' fz='m' fw='bold' setTransition hov='to:cLink'>キッチン家電</HTML.p>
<Flex ai='center' jc='center' bgc='black' bdrs='99' p='5'>
<Icon icon='caret-right' fz='xs' c='white' />
</Flex>
</LinkBox>
<LinkBox href='#' layout='flex' g='30' ai='center' jc='between' p='40 10' mt='-1px' bd-y setHov>
<HTML.p class='u-trim' fz='m' fw='bold' setTransition hov='to:cLink'>オーディオ</HTML.p>
<Flex ai='center' jc='center' bgc='black' bdrs='99' p='5'>
<Icon icon='caret-right' fz='xs' c='white' />
</Flex>
</LinkBox>
<LinkBox href='#' layout='flex' g='30' ai='center' jc='between' p='40 10' mt='-1px' bd-y setHov>
<HTML.p class='u-trim' fz='m' fw='bold' setTransition hov='to:cLink'>生活家電</HTML.p>
<Flex ai='center' jc='center' bgc='black' bdrs='99' p='5'>
<Icon icon='caret-right' fz='xs' c='white' />
</Flex>
</LinkBox>
<LinkBox href='#' layout='flex' g='30' ai='center' jc='between' p='40 10' mt='-1px' bd-y setHov>
<HTML.p class='u-trim' fz='m' fw='bold' setTransition hov='to:cLink'>冷蔵庫</HTML.p>
<Flex ai='center' jc='center' bgc='black' bdrs='99' p='5'>
<Icon icon='caret-right' fz='xs' c='white' />
</Flex>
</LinkBox>
<LinkBox href='#' layout='flex' g='30' ai='center' jc='between' p='40 10' mt='-1px' bd-y setHov>
<HTML.p class='u-trim' fz='m' fw='bold' setTransition hov='to:cLink'>洗濯機・衣類ケア</HTML.p>
<Flex ai='center' jc='center' bgc='black' bdrs='99' p='5'>
<Icon icon='caret-right' fz='xs' c='white' />
</Flex>
</LinkBox>
<LinkBox href='#' layout='flex' g='30' ai='center' jc='between' p='40 10' mt='-1px' bd-y setHov>
<HTML.p class='u-trim' fz='m' fw='bold' setTransition hov='to:cLink'>美容</HTML.p>
<Flex ai='center' jc='center' bgc='black' bdrs='99' p='5'>
<Icon icon='caret-right' fz='xs' c='white' />
</Flex>
</LinkBox>
<LinkBox href='#' layout='flex' g='30' ai='center' jc='between' p='40 10' mt='-1px' bd-y setHov>
<HTML.p class='u-trim' fz='m' fw='bold' setTransition hov='to:cLink'>照明器具</HTML.p>
<Flex ai='center' jc='center' bgc='black' bdrs='99' p='5'>
<Icon icon='caret-right' fz='xs' c='white' />
</Flex>
</LinkBox>
<LinkBox href='#' layout='flex' g='30' ai='center' jc='between' p='40 10' mt='-1px' bd-y setHov>
<HTML.p class='u-trim' fz='m' fw='bold' setTransition hov='to:cLink'>パソコン・周辺機器</HTML.p>
<Flex ai='center' jc='center' bgc='black' bdrs='99' p='5'>
<Icon icon='caret-right' fz='xs' c='white' />
</Flex>
</LinkBox>
</Grid>
<Flex jc='flex-e'>
<LinkBox href='#' layout='flex' ai='center' g='10' setTransition hov={{ c: 'link' }}>
<HTML.p class='u-trim'>全てのカテゴリーを見る</HTML.p>
<Icon icon='arrow-right' />
</LinkBox>
</Flex>
</Stack>
</Grid>
</Container>
</DemoLayout>
<style>
@media (any-hover: hover) {
.-hov\:to\:cLink {
color: var(--_isHov, var(--link));
}
}
</style> style.css