当前位置:主页 > 网页特效 > 菜单导航 >

jQuery超酷圆形气泡导航菜单特效

发布时间:2018/07/03 来源:互联网 浏览: 关键词:jquery 菜单导航 
jQuery超酷圆形气泡导航菜单特效 jQuery超酷圆形气泡导航菜单特效
阿里云

简要教程

这是一款jQuery超酷圆形气泡导航菜单特效插件。在插件中我们使用了 jQuery Easing Plugin 来制作一些非常好看的缓动效果。

HTML结构

html使用一个div .navigation作为wrapper,并给它一个id nav 。:

<divclass="navigation"id="nav">
    <divclass="item user">
        <imgsrc="images/bg_user.png"alt=""width="199"height="199"class="circle"/>
        <ahref="#"class="icon"></a>
        <h2>User</h2>
        <ul>
            <li><ahref="#">Profile</a></li>
            <li><ahref="#">Properties</a></li>
            <li><ahref="#">Privacy</a></li>
        </ul>
    </div>
    <divclass="item home">
        <imgsrc="images/bg_home.png"alt=""width="199"height="199"class="circle"/>
        <ahref="#"class="icon"></a>
        <h2>Home</h2>
        <ul>
            <li><ahref="#">Portfolio</a></li>
            <li><ahref="#">Services</a></li>
            <li><ahref="#">Contact</a></li>
        </ul>
    </div>
    ...
</div>

上面的代码中只列举了两个菜单项。你可以发现,每个菜单项都有两个class:item和一个特定的导航名称,如”home“或”user“。通过这个方法,我们可以很好的控制各个菜单项。

CSS样式

首先来看一下通用css样式:

.navigation{
    margin:0pxauto;
    font-family:"Trebuchet MS",sans-serif;
    font-size:24px;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1.4px;
}

为每个菜单项设置绝对定位:

.navigation .item{
    position:absolute;
}

由于我们已经给div设置两个class,现在我们给每个菜单项设置各自不同的位置:

.user{
    top:125px;
    left:110px;
}
.home{
   top:50px;
   left:360px;
}
.shop{
   top:90px;
   left:625px;
}
.camera{
   top:230px;
   left:835px;
}
.fav{
   top:420px;
   left:950px;
}

超链接元素上的图标的样式如下:

a.icon{
    width:52px;
    height:52px;
    position:absolute;
    top:0px;
    left:0px;
    cursor:pointer;
}

为每个图标定义它们各自的元素:

.user a.icon{
    background:transparenturl(../images/user.png)no-repeat0px0px;
}
.home a.icon{
    background:transparenturl(../images/home.png)no-repeat0px0px;
}
.shop a.icon{
    background:transparenturl(../images/shop.png)no-repeat0px0px;
}
.camera a.icon{
    background:transparenturl(../images/camera.png)no-repeat0px0px;
}
.fav a.icon{
    background:transparenturl(../images/fav.png)no-repeat0px0px;
}

以为图标我们使用了sprite 技术,所以我们能简单的定义”hover“class:

.navigation .item a.active{
    background-position:0px-52px;
}

圆形图像的样式如下:

.item img.circle{
    position:absolute;
    top:0px;
    left:0px;
    width:52px;
    height:52px;
    opacity:0.1;
}

JAVASCRIPT

在页面中加入jquery和jquery.easing文件:

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<scripttype="text/javascript"src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
    $(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');
        }
    );
    });
</script>

共有人阅读,期待你的评论!评论
Top