Lism CSS
検索

Navigation

Navigation001

ナビゲーション用のテンプレートです。アイテムの最小幅が設定されており、コンテナ幅に応じてカラム数が変化します。

大きい画面で見る
↓
コード
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='Navigation001'>
	<Container isWrapper='l' bgc='base' py='50' hasGutter>
		<Stack g='50'>
			<HTML.h lv='2' class='u-trim' fz='2xl' fw='bold' ta='center'>製品カテゴリー</HTML.h>
			<Grid gtc='repeat(auto-fit, minmax(250px, 1fr))' g-x='40' pt='1px'>
				<LinkBox href='#' layout='flex' g='30' ai='center' jc='between' py='30' px='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' py='30' px='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' py='30' px='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' py='30' px='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' py='30' px='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' py='30' px='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' py='30' px='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' py='30' px='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>
		</Stack>
	</Container>
</DemoLayout>

<style>
	@media (any-hover: hover) {
		.-hov\:to\:cLink {
			color: var(--_isHov, var(--link));
		}
	}
</style>
style.css