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" setGutter>
		<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