Ngất ngây mẫu menu trượt icon theo phong cách Apple

Mẫu menu mà mình giới thiệu cho các bạn trong bài viết này được thiết kế theo phong cách mà chúng ta thường thấy trên các ứng dụng của Apple, tuy nhiên nó được cách tân với hiệu ứng trượt icon tương ứng khi người dùng trỏ chuột vào.

Xem Demo | Download

HTML

Menu được thiết kế theo khung chuẩn html như sau :

<div class="navigation">
   <ul class="menu" id="menu">
      <li><span class="ipod"></span><a href="" class="first">Players</a></li>
      <li><span class="video_camera"></span><a href="">Cameras</a></li>
      <li><span class="television"></span><a href="">TVs</a></li>
      <li><span class="monitor"></span><a href="">Screens</a></li>
      <li><span class="toolbox"></span><a href="">Tools</a></li>
      <li><span class="telephone"></span><a href="">Phones</a></li>
      <li><span class="print"></span><a href="" class="last">Printers</a></li>
    </ul>
</div>

CSS

Kế tiếp là chúng ta sẽ làm menu theo phong cách apple với đoạn css bên dưới.

*{
	margin:0;
	padding:0;
}

body{
  margin:0px;
  padding:0px;
  background-color:#f0f0f0;
  font-family:Arial;
}

.navigation{
    position:relative;
    margin:0 auto;
    awidth:915px;
}
ul.menu{
    list-style:none;
    font-family:"Verdana",sans-serif;
    border-top:1px solid #bebebe;
    margin:0px;
    padding:0px;
    float:left;
}
ul.menu li{
    float:left;
}
ul.menu li a{
    text-decoration:none;
    background:#7E7E7E url(images/bgMenu.png) repeat-x top left;
    padding:15px 0px;
    awidth:128px;
    color:#333333;
    float:left;
    text-align:center;
    border-right:1px solid #a1a1a1;
    border-left:1px solid #e8e8e8;
    font-weight:bold;
    font-size:13px;
    -moz-box-shadow: 0 1px 3px #555;
    -webkit-box-shadow: 0 1px 3px #555;
    text-shadow: 0 1px 1px #fff;
}
ul.menu li a.hover{
    background-image:none;
    color:#fff;
    text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
    -moz-border-radius:0px 0px 0px 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-left:none;
}
ul.menu li a.last{
    -moz-border-radius:0px 0px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
    awidth:64px;
    height:64px;
    background-repeat:no-repeat;
    background-color:transparent;
    position:absolute;
    z-index:-1;
    top:80px;
    cursor:pointer;
}
ul.menu li span.ipod{
    background-image:url(icons/ipod.png);
    left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.video_camera{
    background-image:url(icons/video_camera.png);
    left:163px; /* plus 128 + 2px of border*/
}
ul.menu li span.television{
    background-image:url(icons/television.png);
    left:293px;
}
ul.menu li span.monitor{
    background-image:url(icons/monitor.png);
    left:423px;
}
ul.menu li span.toolbox{
    background-image:url(icons/toolbox.png);
    left:553px;
}
ul.menu li span.telephone{
    background-image:url(icons/telephone.png);
    left:683px;
}
ul.menu li span.print{
    background-image:url(icons/print.png);
    left:813px;
}

jQuery 

Và cuối cùng vẫn là đoạn script giúp tạo hiệu ứng trượt icon đơn giản bằng jQuery.

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
            $(function() {
                var d=1000;
                $('#menu span').each(function(){
                    $(this).stop().animate({
                        'top':'-17px'
                    },d+=250);
                });

                $('#menu > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).addClass('hover');
                    $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
                },
                function () {
                    var $this = $(this);
                    $('a',$this).removeClass('hover');
                    $('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
                }
            );
            });
</script>

Chúc các bạn thành công !

Chuyên Mục: Css, Javascript

Bài viết được đăng bởi webmaster