jQuery环状圆形菜单_导航菜单_滑动导航_圆形

这是一个基于easing动画插件的圆形气泡菜单插件。当鼠标悬浮圆形菜单上，菜单会变成一个更大的菜单。

淘建站为您提供更多_导航菜单_滑动导航_圆形，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 63 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：导航菜单 > 滑动导航难易程度：中级

圆形菜单html

<div class="navigation" id="nav">
    <div class="item user">
        <img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>
        <a href="#" class="icon"></a>
        <h2>User</h2>
        <ul>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Properties</a></li>
            <li><a href="#">Privacy</a></li>
        </ul>
    </div>
</div>

引入easing动画插件

<script type="text/javascript" src="jquery.easing.1.3.js"></script>

悬浮和离开菜单效果

$(function() {
    $('#nav > div').hover(
            function() {
                var $this = $(this);
                $this.find('img').stop().animate({
                    'width': '199px',
                    'height': '199px',
                    'top': '-25px',
                    'left': '-25px',
                    'opacity': '1.0'
                }, 500, 'easeOutBack', function() {
                    $(this).parent().find('ul').fadeIn(700);
                });

                $this.find('a:first,h2').addClass('active');
            },
            function() {
                var $this = $(this);
                $this.find('ul').fadeOut(500);
                $this.find('img').stop().animate({
                    'width': '52px',
                    'height': '52px',
                    'top': '0px',
                    'left': '0px',
                    'opacity': '0.1'
                }, 5000, 'easeOutBack');

                $this.find('a:first,h2').removeClass('active');
            }
    );
});