Lism CSS
検索

Navigation

Navigation001

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

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

import { Container, Flex, Grid, Icon, BoxLink, Stack, Text, Heading } from 'lism-css/astro';
import './_style.css';
---

<DemoLayout title="Navigation001">
  <Container isWrapper="l" bgc="base" py="50" hasGutter>
    <Stack g="50">
      <Heading level="2" class="u--trim" fz="2xl" fw="bold" ta="center">製品カテゴリー</Heading>
      <Grid gtc="repeat(auto-fit, minmax(250px, 1fr))" cg="40" pt="1px">
        <BoxLink href="#" layout="flex" g="30" ai="center" jc="between" py="30" px="10" mt="-1px" bd-y set="var:hov">
          <Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">キッチン家電</Text>
          <Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
            <Icon icon="caret-right" fz="xs" c="white" />
          </Flex>
        </BoxLink>
        <BoxLink href="#" layout="flex" g="30" ai="center" jc="between" py="30" px="10" mt="-1px" bd-y set="var:hov">
          <Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">オーディオ</Text>
          <Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
            <Icon icon="caret-right" fz="xs" c="white" />
          </Flex>
        </BoxLink>
        <BoxLink href="#" layout="flex" g="30" ai="center" jc="between" py="30" px="10" mt="-1px" bd-y set="var:hov">
          <Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">生活家電</Text>
          <Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
            <Icon icon="caret-right" fz="xs" c="white" />
          </Flex>
        </BoxLink>
        <BoxLink href="#" layout="flex" g="30" ai="center" jc="between" py="30" px="10" mt="-1px" bd-y set="var:hov">
          <Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">冷蔵庫</Text>
          <Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
            <Icon icon="caret-right" fz="xs" c="white" />
          </Flex>
        </BoxLink>
        <BoxLink href="#" layout="flex" g="30" ai="center" jc="between" py="30" px="10" mt="-1px" bd-y set="var:hov">
          <Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">洗濯機・衣類ケア</Text>
          <Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
            <Icon icon="caret-right" fz="xs" c="white" />
          </Flex>
        </BoxLink>
        <BoxLink href="#" layout="flex" g="30" ai="center" jc="between" py="30" px="10" mt="-1px" bd-y set="var:hov">
          <Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">美容</Text>
          <Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
            <Icon icon="caret-right" fz="xs" c="white" />
          </Flex>
        </BoxLink>
        <BoxLink href="#" layout="flex" g="30" ai="center" jc="between" py="30" px="10" mt="-1px" bd-y set="var:hov">
          <Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">照明器具</Text>
          <Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
            <Icon icon="caret-right" fz="xs" c="white" />
          </Flex>
        </BoxLink>
        <BoxLink href="#" layout="flex" g="30" ai="center" jc="between" py="30" px="10" mt="-1px" bd-y set="var:hov">
          <Text class="u--trim" fz="m" fw="bold" hasTransition hov="in:cLink">パソコン・周辺機器</Text>
          <Flex ai="center" jc="center" bgc="black" bdrs="99" p="5">
            <Icon icon="caret-right" fz="xs" c="white" />
          </Flex>
        </BoxLink>
      </Grid>
    </Stack>
  </Container>
</DemoLayout>

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