仿apple官网顶部菜单

最近闲来无事学习一下前端技术，看见apple官网挺好看，特别是顶部的菜单在鼠标悬停在title上，下方会弹出子菜单，过程很丝滑很有高级感，所以我就试着模仿也做了一个，效果还过得去。框架使用的vue，直接用html也可以，我习惯了使用vue创建项目，废话不多说直接上代码

apple官网菜单

效果

页面布局

<div class="container" @mouseleave="closeBottom">
        <div class="menu-container">
            <div class="top-menu">
                <div class="logo">
                    <img src="../assets/static/svg/appli-logo.svg" alt="">
                </div>
                <div class="items">
                    <div class="item">
                        商店
                    </div>
                    <div class="item" @mouseenter="showBottom">
                        Mac
                    </div>
                    <div class="item">
                        iPad
                    </div>
                    <div class="item">
                        iPhone
                    </div>
                    <div class="item">
                        Watch
                    </div>
                    <div class="item">
                        Vision
                    </div>
                    <div class="item">
                        AirPods
                    </div>
                    <div class="item">
                        家居
                    </div>
                    <div class="item">
                        娱乐
                    </div>
                    <div class="item">
                        配件
                    </div>
                    <div class="item">
                        技术支持
                    </div>
                </div>
                <div class="search">
                    <img src="../assets/static/svg/查询.svg" alt="">
                </div>
                <div class="shop">
                    <img src="../assets/static/svg/shopping.svg" alt="">
                </div>
            </div>
            <div ref="bottomMenu" class="bottom-menu">
                <div class="content">
                    <!-- 详细菜单 -->
                    <div class="item" v-for="item in getDescChildList(2)" :key="item.title">
                        <!-- 标题 -->
                        <div class="title">
                            {{ item.title }}
                        </div>
                        <div ref="largeContainer" class="large-container">
                            <!-- 大字item -->
                            <div class="large" v-for="text in item.largeItems" :key="text">
                                {{ text }}
                            </div>
                        </div>
                        <div class="min-container">
                            <!-- 小字item -->
                            <div class="min" v-for="text in item.minItems" :key="text">
                                {{ text }}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

js

<script setup>
import { ref } from "vue";

const bottomMenu = ref(null);

const largeContainer = ref(null);

const descMenus = ref([
    {
        id: 2,
        content:
            [
                {
                    title: "探索",
                    largeItems: [
                        "探索全部Mac机型",
                        "MacBook Air",
                        "MacBook Pro",
                        "iMac",
                        "Mac mini",
                        "Mac Studio",
                        "Mac Pro",
                        "显示器"
                    ],
                    minItems: [
                        "Mac 机型比较",
                        "有 Mac 都好办"
                    ]
                },
                {
                    title: "选购 Mac",
                    minItems: [
                        "选购 Mac",
                        "Mac 配件",
                        "Apple Trade In 换购计划",
                        "分期付款",
                        "高校学生优惠活动"
                    ]
                },
                {
                    title: "选购 相关",
                    minItems: [
                        "选购 Mac",
                        "Mac 配件",
                        "Apple Trade In 换购计划",
                        "分期付款",
                        "高校学生优惠活动"
                    ]
                }
            ]
    }
])

const getDescChildList = (id) => {
    var childList = descMenus.value.find(menu => menu.id === id)?.content;
    return childList;
}

const showBottom = () => {
    // debugger
    bottomMenu.value.classList.add('open');

    setTimeout(() => {
        debugger

        var items = document.querySelectorAll('.content .item');
        for (let i = 0; i < items.length; i++) {
            const larges = items[i].querySelectorAll('.large-container .large');

            const mins = items[i].querySelectorAll('.min-container .min');

            for (let i = 0; i < larges.length; i++) {
                larges[i].classList.add("show");
                larges[i].style.transitionDelay = `${i / 30}s`;
            }
            const endTime = (larges.length - 1) / 30;
            for (let i = 0; i < mins.length; i++) {
                mins[i].classList.add("show");
                mins[i].style.transitionDelay = `${i / 30 + endTime}s`;
            }

            console.log();

        }
    }, 200)
}

const closeBottom = () => {
    var larges = document.querySelectorAll('.large-container .large')
    var mins = document.querySelectorAll('.min-container .min');
    for (let i = 0; i < larges.length; i++) {
        larges[i].classList.remove("show");
        larges[i].style.transitionDelay = '';
    }

    for (let i = 0; i < mins.length; i++) {
        mins[i].classList.remove("show");
        mins[i].style.transitionDelay = '';
    }

    bottomMenu.value.classList.remove('open');
}

function showDescMenu() {
    var jsonData = JSON.stringify(descMenus.value);
    console.log('数据', descMenus.value)
}

getDescChildList();
showDescMenu();

</script>

代码已上传需要请自取：https://gitee.com/chu-darui/imitate-apple-web