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' hasGutter 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