Navigation
Navigation003
ナビゲーション用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。
↓
コード
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='Navigation003'>
<Container isWrapper='l' bgc='base-2' py='50' hasGutter>
<Stack g='50'>
<HTML.h lv='2' class='u-trim' fz='2xl' fw='bold' ta='center'>製品カテゴリー</HTML.h>
<Stack g='50'>
<Grid layout='fluidCols' cols='18rem' g='30'>
<LinkBox
href='#'
layout='flex'
g='30'
ai='center'
jc='between'
p='30'
bd
bgc='white'
bdrs='10'
setTransition
setHov
hov={{ bxsh: '20' }}
>
<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='10'>
<Icon icon='arrow-right' fz='2xs' c='white' />
</Flex>
</LinkBox>
<LinkBox
href='#'
layout='flex'
g='30'
ai='center'
jc='between'
p='30'
bd
bgc='white'
bdrs='10'
setTransition
setHov
hov={{ bxsh: '20' }}
>
<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='10'>
<Icon icon='arrow-right' fz='2xs' c='white' />
</Flex>
</LinkBox>
<LinkBox
href='#'
layout='flex'
g='30'
ai='center'
jc='between'
p='30'
bd
bgc='white'
bdrs='10'
setTransition
setHov
hov={{ bxsh: '20' }}
>
<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='10'>
<Icon icon='arrow-right' fz='2xs' c='white' />
</Flex>
</LinkBox>
<LinkBox
href='#'
layout='flex'
g='30'
ai='center'
jc='between'
p='30'
bd
bgc='white'
bdrs='10'
setTransition
setHov
hov={{ bxsh: '20' }}
>
<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='10'>
<Icon icon='arrow-right' fz='2xs' c='white' />
</Flex>
</LinkBox>
<LinkBox
href='#'
layout='flex'
g='30'
ai='center'
jc='between'
p='30'
bd
bgc='white'
bdrs='10'
setTransition
setHov
hov={{ bxsh: '20' }}
>
<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='10'>
<Icon icon='arrow-right' fz='2xs' c='white' />
</Flex>
</LinkBox>
<LinkBox
href='#'
layout='flex'
g='30'
ai='center'
jc='between'
p='30'
bd
bgc='white'
bdrs='10'
setTransition
setHov
hov={{ bxsh: '20' }}
>
<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='10'>
<Icon icon='arrow-right' fz='2xs' c='white' />
</Flex>
</LinkBox>
<LinkBox
href='#'
layout='flex'
g='30'
ai='center'
jc='between'
p='30'
bd
bgc='white'
bdrs='10'
setTransition
setHov
hov={{ bxsh: '20' }}
>
<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='10'>
<Icon icon='arrow-right' fz='2xs' c='white' />
</Flex>
</LinkBox>
<LinkBox
href='#'
layout='flex'
g='30'
ai='center'
jc='between'
p='30'
bd
bgc='white'
bdrs='10'
setTransition
setHov
hov={{ bxsh: '20' }}
>
<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='10'>
<Icon icon='arrow-right' fz='2xs' 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>
</Stack>
</Container>
</DemoLayout>
<style>
@media (any-hover: hover) {
.-hov\:to\:cLink {
color: var(--_isHov, var(--link));
}
}
</style> style.css