Lism CSS
検索

Navigation

Navigation004

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

大きい画面で見る
↓
コード
index.astro 
---
import DemoLayout from '@/layouts/DemoLayout.astro';

import { Stack, Container, Frame, Flex, Grid, Media, HTML, Layer, LinkBox, Icon } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title="Navigation004">
	<Grid gtr="auto" gtc={['auto', null, 'auto 1fr']} pos="rel">
		<Layer>
			<Frame h="100%">
				<Media src="https://cdn.lism-css.com/img/random-2510" alt="" width="960" height="640" />
				<Layer bgc="black:30%" />
			</Frame>
		</Layer>
		<Container isWrapper="l" gr="1" gc="1" py="50" setGutter pos="rel">
			<Stack g="40">
				<Stack g="30" ai="flex-s" c="white">
					<HTML.h lv="2" class="u--trim" fz="2xl" fw="bold" ta="center">製品カテゴリー</HTML.h>
					<p>
						キッチン家電やオーディオ機器など、様々な製品カテゴリーをご用意しています。<br />
						お客様のライフスタイルに合わせた商品を見つけてください。
					</p>
				</Stack>
				<Stack g="50">
					<Grid gtc="repeat(auto-fit, minmax(250px, 1fr))" g="30">
						<LinkBox
							href="#"
							layout="flex"
							g="30"
							ai="center"
							jc="between"
							p="20"
							bgc="white"
							bdrs="10"
							setTransition
							setHov
							hov={{ bxsh: '20' }}
						>
							<Stack jc="center" g="15">
								<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">洗濯機・衣類ケア</HTML.p>
								<HTML.p class="u--trim" fz="xs" o="-20">LAUNDRY</HTML.p>
							</Stack>
							<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
								<Icon icon="caret-right" fz="2xs" c="white" />
							</Flex>
						</LinkBox>
						<LinkBox
							href="#"
							layout="flex"
							g="30"
							ai="center"
							jc="between"
							p="20"
							bgc="white"
							bdrs="10"
							setTransition
							setHov
							hov={{ bxsh: '20' }}
						>
							<Stack jc="center" g="15">
								<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">掃除機</HTML.p>
								<HTML.p class="u--trim" fz="xs" o="-20">CLEANING</HTML.p>
							</Stack>
							<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
								<Icon icon="caret-right" fz="2xs" c="white" />
							</Flex>
						</LinkBox>
						<LinkBox
							href="#"
							layout="flex"
							g="30"
							ai="center"
							jc="between"
							p="20"
							bgc="white"
							bdrs="10"
							setTransition
							setHov
							hov={{ bxsh: '20' }}
						>
							<Stack jc="center" g="15">
								<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">オーディオ</HTML.p>
								<HTML.p class="u--trim" fz="xs" o="-20">AUDIO</HTML.p>
							</Stack>
							<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
								<Icon icon="caret-right" fz="2xs" c="white" />
							</Flex>
						</LinkBox>
						<LinkBox
							href="#"
							layout="flex"
							g="30"
							ai="center"
							jc="between"
							p="20"
							bgc="white"
							bdrs="10"
							setTransition
							setHov
							hov={{ bxsh: '20' }}
						>
							<Stack jc="center" g="15">
								<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">美容・健康家電</HTML.p>
								<HTML.p class="u--trim" fz="xs" o="-20">BEAUTY & HEALTH</HTML.p>
							</Stack>
							<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
								<Icon icon="caret-right" fz="2xs" c="white" />
							</Flex>
						</LinkBox>
						<LinkBox
							href="#"
							layout="flex"
							g="30"
							ai="center"
							jc="between"
							p="20"
							bgc="white"
							bdrs="10"
							setTransition
							setHov
							hov={{ bxsh: '20' }}
						>
							<Stack jc="center" g="15">
								<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">照明</HTML.p>
								<HTML.p class="u--trim" fz="xs" o="-20">LIGHTING</HTML.p>
							</Stack>
							<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
								<Icon icon="caret-right" fz="2xs" c="white" />
							</Flex>
						</LinkBox>
						<LinkBox
							href="#"
							layout="flex"
							g="30"
							ai="center"
							jc="between"
							p="20"
							bgc="white"
							bdrs="10"
							setTransition
							setHov
							hov={{ bxsh: '20' }}
						>
							<Stack jc="center" g="15">
								<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">スマートホーム</HTML.p>
								<HTML.p class="u--trim" fz="xs" o="-20">SMART HOME</HTML.p>
							</Stack>
							<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
								<Icon icon="caret-right" fz="2xs" c="white" />
							</Flex>
						</LinkBox>
						<LinkBox
							href="#"
							layout="flex"
							g="30"
							ai="center"
							jc="between"
							p="20"
							bgc="white"
							bdrs="10"
							setTransition
							setHov
							hov={{ bxsh: '20' }}
						>
							<Stack jc="center" g="15">
								<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">キッチン</HTML.p>
								<HTML.p class="u--trim" fz="xs" o="-20">KITCHEN</HTML.p>
							</Stack>
							<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
								<Icon icon="caret-right" fz="2xs" c="white" />
							</Flex>
						</LinkBox>
						<LinkBox
							href="#"
							layout="flex"
							g="30"
							ai="center"
							jc="between"
							p="20"
							bgc="white"
							bdrs="10"
							setTransition
							setHov
							hov={{ bxsh: '20' }}
						>
							<Stack jc="center" g="15">
								<HTML.p class="u--trim" fz="m" fw="bold" setTransition hov="to:cLink">空調・生活家電</HTML.p>
								<HTML.p class="u--trim" fz="xs" o="-20">LIVING & AIR</HTML.p>
							</Stack>
							<Flex ai="center" jc="center" bgc="black" bdrs="99" p="10">
								<Icon icon="caret-right" fz="2xs" c="white" />
							</Flex>
						</LinkBox>
					</Grid>
				</Stack>
			</Stack>
		</Container>
	</Grid>
</DemoLayout>

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