半透明下拉菜单

最新推荐文章于 2024-07-27 01:15:54 发布

前端向朔

最新推荐文章于 2024-07-27 01:15:54 发布

阅读量3.4k

点赞数 1

分类专栏： HTML/CSS 文章标签：下拉菜单 css

本文链接：https://blog.csdn.net/u013778905/article/details/52143736

版权

本文介绍如何实现一个点击后带有动画效果的半透明下拉菜单。菜单标题右侧的箭头在展开时有转动动画，菜单项在鼠标悬停时会显示颜色变化。整个下拉菜单设计为半透明，提升用户体验。

摘要由CSDN通过智能技术生成

1，点击 cart Fredr….菜单title时，
2，弹出菜单菜单，
3，菜单弹出有动画效果，
4，菜单title 右侧箭头默认向上，点击菜单展开时，箭头向下，有转动动画，
5，弹出菜单，鼠标移动时，每栏菜单有颜色变化，
6，整个菜单全部半透明。

HTML

<div class="wrap">
        <div class="nav">
            <div class="carl"><i class="iconfont">&#xe608;</i>Carl Fredrlcksen<i class="iconfont up">&#xe619;</i></div>
            <ul class="sub_nav">
                <li><i class="iconfont">&#xe60e;</i>Account seetings</li>
                <li><i class="iconfont">&#xe66e;</i>User stats</li>
                <li><i class="iconfont">&#xe838;</i>Message<span>5</span></li>
                <li><i class="iconfont">&#xe8f3;</i>Sign out</li>
            </ul>
        </div>
    </