android中menu菜单扩增_创意菜单效果

天道好轮回 苍天绕过谁

拖更不是我的一厢情愿，浏览量哗哗下掉，于是我又回来了

---

希望有一天大家都能在借鉴中创新

看一下今天实现的效果：

静态代码分为两部分：静态状态|点击被召唤的

因此构建静态代码：

<div class="container">
    <div class="wrapper">
        <div class="item-simple">首页</div>
        <div class="item-simple">进吧</div>
        <div class="item-simple">
            <div id="menu" class="menu" onclick="addAction()"><span class="add_menu">+</span></div>
        </div>
        <div class="item-simple">消息</div>
        <div class="item-simple">我的</div>
    </div>
</div>

div分割五部分，其中的中间部分用于做特殊的点击中心按钮。实现效果需要：

加背景-》放大+-》旋转+-》上浮位置-》阴影（为了立体效果）

.wrapper {
            margin-top: 20%;
            margin-left: 20%;
            align-items: center;
            background-color: #fff;
            display: flex;
            width: 400px;
            height: 80px;
            position: absolute;
        }
.menu {
            width: 70%;
            height: 70%;
            line-height: 56px;
            transform: rotate(45deg);
            margin: -20% auto;
            background-color: #409EFF;
            border-radius: 15%;
            color: #ffffff;
            font-size: 10px;
            box-shadow: 0 0 5px 0 #9fa2a6;
        }
        .add_menu {
            display: block;
            font-size: 20px;
            transform: rotate(-45deg);
        }

这样的话会有一个粗糙的展示

实现点击实现菜单首先旋转的效果，这里面引入的jquery，绑定了点击事件。

实现的原理很简单，就是点击的时候移除增加新的class样式，新的class样式绑定了新的样式和动作效果，再次点击的时候移除之前的效果使其恢复到之前的状态：

/*点击菜单展现的效果*/
        .menu-operation {
            animation: 1s forwards ease MENU;
            -webkit-animation: 1s forwards ease MENU;;
        }
        @keyframes MENU {
            to {
                transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
            }
        }
        @-webkit-keyframes MENU{
            to {
                transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
            }
        }


function addAction() {
        if ($("#menu").hasClass("menu-operation")) {
            $("#menu").removeClass("menu-operation").addClass("cancle_menu");
        } else {
            $("#menu").removeClass("cancle_menu").addClass('menu-operation');
        }
    }

这个时候可以看到菜单点击的时候的效果展示，菜单回去的效果没有设置，原理都是一样的可以自己模仿写一份，源代码下面我会给出：

回去状态的样式代码：

.cancle_menu {
            animation: 1s forwards ease CANCLEMENU;
            -webkit-animation: 1s forwards ease CANCLEMENU;
        }
        @keyframes CANCLEMENU {
            from {
                transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
            }
            to {
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
            }
        }
        @-webkit-keyframes CANCLEMENU{
            from {
                transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
            }
            to {
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
            }
        }

相同的位置使用绝对定位的方式，在当前菜单的位置背后设置新的菜单版本，这个时候我们只需要分割四部分菜单，因为这个时候我们中间不需要那个菜单的操作按钮了，然后添加新的样式动作：

<div class="wrapper-back">
        <div class="item item-back">首页</div>
        <div class="item item-back">进吧</div>
        <div class="item item-back">消息</div>
        <div class="item item-back">我的</div>
    </div>
.menu_up {
            animation: 1s forwards ease MENUUP;
            -webkit-animation: 1s forwards ease MENUUP;
        }
        @keyframes MENUUP {
            from {
                border-radius: 50%;
            }
            75% {
                transform: rotate(45deg);
                color: #000000;
            }
            to {
                margin: 0 9px 200px 9px;
                border-radius: 30%;
                transform: rotate(0deg);
                color: #000000;
            }
        }
        @-webkit-keyframes MENUUP {
            from {
                border-radius: 50%;
            }
            75% {
                transform: rotate(45deg);
            }
            to {
                margin: 0 9px 200px 9px;
                border-radius: 30%;
                transform: rotate(0deg);
            }
        }
        .menu_down {
            animation: 1s forwards ease MENUDWON;
            -webkit-animation: 1s forwards ease MENUDWON;
        }
        @keyframes MENUDWON {
            from {
                margin: 0 9px 200px 9px;
                border-radius: 30%;
                transform: rotate(0deg);
                color: #000000;
            }
            75% {
                transform: rotate(45deg);
                color: #ffffff;
                border-radius: 50%;
            }
            to {
                transform: rotate(90deg);
                color: #ffffff;
                border-radius: 50%;
            }
        }
        @-webkit-keyframes MENUDWON {
            from {
                margin: 0 9px 200px 9px;
                border-radius: 30%;
                transform: rotate(0deg);
                color: #000000;
            }
            75% {
                transform: rotate(45deg);
                color: #ffffff;
                border-radius: 50%;
            }
            to {
                transform: rotate(90deg);
                color: #ffffff;
                border-radius: 50%;
            }
        }

get 最终效果

---

希望在这个基础之上大家有更好的扩张，记得艾特我

源代码获取（WX代号MENU_007）

如有兴趣欢迎关注：码农的技术分享 获取源代码

备注：源码有延迟 若无回复联系博主