天天看点
返回

很炫的个人主页 做一个略调皮的个人主页--菜单篇

做一个略调皮的个人主页--菜单篇

  • 很炫的个人主页 做一个略调皮的个人主页--菜单篇
    #原创
  • 很炫的个人主页 做一个略调皮的个人主页--菜单篇
    CSS3
  • 很炫的个人主页 做一个略调皮的个人主页--菜单篇
    单页面网站模板
很炫的个人主页 做一个略调皮的个人主页--菜单篇

申请达人，去除赞助商链接

由于要重新找工作，所以做了一个自己的个人主页，觉得还好，所以分享出来，也算是自己的一些记录。

具体演示可以查看我的个人主页。

大体都是一些css3的应用，干货实在很少，做来玩乐罢了。

第一次写这方面的文章，行散神也散，望海涵。

首先，先列出less文件的公共部分以及常量。

公共类：

     
  1.  /*居中*/       
    2.       
  2.  .getCenter (@x, @y) {left:50%; right:50%; top:50%; bottom:50%; margin-left:- @x/2; margin-top: - @y/2;}       
    3.       
  3.  /*圆角*/       
    4.       
  4.  .getBorderRadius (@m) {       
    5.       
  5.  border-radius:@m;       
    6.       
  6.  -webkit-border-radius:@m;       
    7.       
  7.  -moz-border-radius:@m;       
    8.       
  8.  -ms-border-radius:@m;       
    9.       
  9.  }       
    10.       
  10.  /*过渡*/       
    11.       
  11.  .geTtransition  (@transition) {       
    12.       
  12.  -webkit-transition:@transition;       
    13.       
  13.  -moz-transition:@transition;       
    14.       
  14.  -o-transition:@transition;       
    15.       
  15.  -ms-transition:@transition;       
    16.       
  16.  transition:@transition;       
    17.       
  17.  }       
    18.           
  18.  /*形变*/       
    19.       
  19.  .getTransform (@transform) {       
    20.       
  20.  -webkit-transform:@transform;       
    21.       
  21.  -moz-transform:@transform;       
    22.       
  22.  -o-transform:@transform;       
    23.       
  23.  -ms-transform:@transform;       
    24.       
  24.  transform:@transform;       
    25.       
  25.  }       
    26.       
  26.  /* 阴影 */       
    27.       
  27.  .getBoxShdow (@boxshdow){       
    28.       
  28.  -webkit-box-shadow:@boxshdow;       
    29.       
  29.  -moz-box-shadow:@boxshdow;       
    30.       
  30.  -o-box-shadow:@boxshdow;       
    31.       
  31.  -ms-box-shadow:@boxshdow;       
    32.       
  32.  box-shadow:@boxshdow;       
    33.       
  33.  }       
    34.       
  34.  /*动画*/       
    35.       
  35.  .getAnimate (@animate) {       
    36.       
  36.  animation: @animate;       
    37.       
  37.  -moz-animation: @animate;       
    38.       
  38.  -webkit-animation: @animate;       
    39.       
  39.  -ms-animation: @animate;       
    40.       
  40.  -o-animation: @animate;       
    41.       
  41.  }       
    42.       
  42.  .getTransform (@transform) {       
    43.       
  43.  -webkit-transform:@transform;       
    44.       
  44.  -moz-transform:@transform;       
    45.       
  45.  -o-transform:@transform;       
    46.       
  46.  -ms-transform:@transform;       
    47.       
  47.  transform:@transform;       
    48.       
  48.  }       
    49.           
  49.  /*形变*/       
    50.       
  50.  .getTransformOrgin (@transform) {       
    51.       
  51.  -webkit-transform-origin:@transform;       
    52.       
  52.  -moz-transform-origin:@transform;       
    53.       
  53.  -o-transform-origin:@transform;       
    54.       
  54.  -ms-transform-origin:@transform;       
    55.       
  55.  transform-origin:@transform;       
    56.       
  56.  }       
    57.       
  57.  /* 梯度渐变 */       
    58.       
  58.  .getGradient(@type, @color1, @color2) {       
    59.       
  59.  background:-moz-linear-gradient(@type, @color1, @color2);/*Mozilla*/       
    60.       
  60.  background:-webkit-linear-gradient(@type, @color1, @color2);/*new gradient for Webkit*/       
    61.       
  61.  background:-o-linear-gradient(@type, @color1, @color2); /*Opera11*/       
    62.       
  62.  background:-ms-linear-gradient(@type, @color1, @color2); /*Ie 11+*/       
    63.       
  63.  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr= @color1,endcolorstr= @color2,gradientType=0); /*Ie 10-*/       
    64.       
  64.  }       
    65.

常量：

     
  1.  @color1:#E8B118; //菜单颜色       
    2.       
  2.  @color2:#DC7913; //菜单颜色       
    3.       
  3.  @color3:#CE1131; //菜单颜色       
    4.       
  4.  @color4:#A71955; //菜单颜色       
    5.       
  5.  @color5:#33619F; //菜单颜色       
    6.       
  6.  @color6:#149B70; //菜单颜色       
    7.       
  7.  @color7:#79B053; //菜单颜色       
    8.       
  8.  @animateTime : 300ms; //动画时间       
    9.       
  9.  @delay : 50ms; //延时时间       
    10.

 然后先把html的代码写出来，总共是7个菜单的标签，以及5个区域的标签。

整个页面的展现形式最终会有五种，分别为 normal left right left right。

     
  1.  <ul class="indexMenu">       
    2.       
  2.  <li data-type="normal"><span class="glyphicon glyphicon-home" ></span><em class=" rel">我的主页</em></li>       
    3.       
  3.  <li data-type="left"><span class="glyphicon glyphicon-user " ></span><em class=" rel">我的信息</em></li>       
    4.       
  4.  <li data-type="top"><span class="glyphicon glyphicon-picture "></span><em class=" rel">我的相册</em></li>       
    5.       
  5.  <li data-type="right"><span class="glyphicon glyphicon-pencil "></span><em class=" rel">我的随笔</em></li>       
    6.       
  6.  <li data-type="bottom"><span class="glyphicon glyphicon-film "></span><em class=" rel">我的临摹网站</em></li>       
    7.       
  7.  <li data-type="left"><span class="glyphicon glyphicon-folder-open "></span><em class=" rel">我的工作经历</em></li>       
    8.       
  8.  <li data-type="right"><span class="glyphicon glyphicon-send "></span><em class=" rel">我的游戏</em></li>       
    9.       
  9.  </ul>       
    10.       
  10.  <section class="area_main abs ovh"></section>       
    11.       
  11.  <section class="area_right abs"></section>       
    12.       
  12.  <section class="area_left abs"></section>       
    13.       
  13.  <section class="area_top abs"></section>       
    14.       
  14.  <section class="area_bottom abs"></section>       
    15.

 用到了一些boot的glyphicon标签。大体的结构差不多就是这些代码就够了，下面我们来构建第一个页面。

很炫的个人主页 做一个略调皮的个人主页--菜单篇

首先是7个标签的css样式：

     
  1.  .indexMenu{       
    2.       
  2.  display:block; width:100%;height:100%; z-index:5;position:absolute;top:0px;left:0px;       
    3.       
  3.  .geTtransition(all @animateTime ease);       
    4.       
  4.  li {       
    5.       
  5.  width:100%;height:14.285%;color:#FFF; cursor:pointer;position:relative;left:0px;top:0px;       
    6.       
  6.  em{       
    7.       
  7.  line-height:36px;font-size:18px;top:50%;margin-top:-18px;float:right;       
    8.       
  8.  .geTtransition(all @animateTime ease );       
    9.       
  9.  }       
    10.       
  10.  span {       
    11.       
  11.  font-size:36px;top:50%;margin-top:-18px;display:block;width:90px !important;text-align:center; float:right;       
    12.       
  12.  .geTtransition(all @animateTime ease );       
    13.       
  13.  }       
    14.       
  14.  }       
    15.       
  15.  li:hover{padding-right:40px;}       
    16.       
  16.  li:nth-child(1){background:@color1; }       
    17.       
  17.  li:nth-child(1):hover{background:lighten(@color1,10%)}       
    18.       
  18.  li:nth-child(2){background:@color2;}       
    19.       
  19.  li:nth-child(2):hover{background:lighten(@color2,10%);}       
    20.       
  20.  li:nth-child(3){background:@color3;}       
    21.       
  21.  li:nth-child(3):hover{background:lighten(@color3,10%);}       
    22.       
  22.  li:nth-child(4){background:@color4;}       
    23.       
  23.  li:nth-child(4):hover{background:lighten(@color4,10%);}       
    24.       
  24.  li:nth-child(5){background:@color5;}       
    25.       
  25.  li:nth-child(5):hover{background:lighten(@color5,10%);}       
    26.       
  26.  li:nth-child(6){background:@color6;}       
    27.       
  27.  li:nth-child(6):hover{background:lighten(@color6,10%);}       
    28.       
  28.  li:nth-child(7){background:@color7;}       
    29.       
  29.  li:nth-child(7):hover{background:lighten(@color7,10%);}       
    30.       
  30.  }       
    31.

然后是所有详细区域的样式：

     
  1.  section{       
    2.       
  2.  width:100%;height:100%; background:#FFF; overflow:hidden;.geTtransition(all @animateTime ease);       
    3.       
  3.  }       
    4.

 area_main的样式：

     
  1.  .	top:0px;left:-100%;padding-left:400px;z-index:6;       
    2.       
  2.  .getBorderRadius(350px);       
    3.       
  3.  .geTtransition(all @animateTime ease @animateTime);       
    4.       
  4.  }           area_main           {       
    5.

 注意现在的main_area 区域是隐藏在左侧的，由于是有五种形态，但是操作的都是这些标签，所以我把形态的标识放在了body上，比如normal就是 <body class="type_normal"></body>

所以css的样式还有这么一句：

     
  1.  .type_normal{       
    2.       
  2.  .main_area{left:-400px;}       
    3.       
  3.  }       
    4.

 这样整个第一种形态就差不多了。之后我们需要做的就是切换形态。我把形态的信息用data-type的形式写在了li标签里，这样如果想改的话也很方便。每次切换形态简单说来就是改变body的class。这样就会改变css样式，我们加了过渡和形变的样式就会呈现动画效果。这里我们应用js控制：

     
  1.  /* 主页菜单点击后跳转效果 */       
    2.       
  2.  var menuClickType = {       
    3.      
    
     
  1.  'normal' : function () {}       
    2.      
    
     
  1.  ,           'left' : function () {}       
    2.      
    
     
  1.  ,           'top' : function () {}       
    2.      
    
     
  1.  ,           'right' : function () {}       
    2.      
    
     
  1.  ,           'bottom' : function () {}       
    2.      
    
     
  1.  }       
    2.      
    
     
  1.  var $menus = $('.indexMenu li');       
    2.      
    
     
  1.  $menus       
    2.       
  2.  /* 主页菜单点击动作 */       
    3.       
  3.  .click(function () {       
    4.       
  4.  var $this = $(this), type = $this.data('type');//获取type 展现形态标识       
    5.       
  5.  menuClickType[type](); //调取相应的方法       
    6.       
  6.  });       
    7.

这样基本的框架就搭好啦，开始做left的方法，首先我们先看一下left形态的效果：

很炫的个人主页 做一个略调皮的个人主页--菜单篇

然后是left形态的跳转效果方法：

css样式：

     
  1.  .type_left{       
    2.       
  2.  .indexMenu{       
    3.       
  3.  li:hover{       
    4.       
  4.  padding-right:0px;       
    5.       
  5.  margin-left:150px;       
    6.       
  6.  }       
    7.       
  7.  }       
    8.       
  8.  .area_main{       
    9.       
  9.  .geTtransition(all @animateTime ease);       
    10.       
  10.  }       
    11.       
  11.  .area_left{opacity:1;z-index:auto;}       
    12.       
  12.  }       
    13.

 js代码：

     
  1.  $body.removeClass().addClass('type_left');       
    2.       
  2.  $menus.css({       
    3.       
  3.  'left':'-'+ (bodyWidth - 90) +'px'       
    4.       
  4.  ,'top' : '0px'       
    5.       
  5.  ,'height' : bodyHeight/7 + 'px'       
    6.       
  6.  });       
    7.

 这里解释一下，由于有很多东西不能单凭css去控制，也需要js辅助区控制。控制的主要属性为top，left 以及 height，top的控制是以后要用，这里的从normal 转换到left 形态，只是改变了left的值，至于height属性，是由于以后展现的要求，我把菜单的ul的高设成了0。这样它才不会阻挡住屏幕，而其中li的高度自然就需要手动的去加上去。

然后在type_left的css中，加入菜单的hover效果（和normal下是不一样的）。以及main和left区域的效果，这里我们需要把area_left区域展现出来，并且把.area_main区域收起，由于已经去掉了body上 type_normal 的样式，所以area_main区域就自动的缩回左边去了。

最后在加上菜单有顺序的向左移动，好像波浪一样的效果，主要是css3的过渡代码：

     
  1.  li:nth-child(1){background:@color1; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 1)}       
    2.       
  2.  li:nth-child(1):hover{background:lighten(@color1,10%)}       
    3.       
  3.  li:nth-child(2){background:@color2; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 2)}       
    4.       
  4.  li:nth-child(2):hover{background:lighten(@color2,10%);}       
    5.       
  5.  li:nth-child(3){background:@color3; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 3)}       
    6.       
  6.  li:nth-child(3):hover{background:lighten(@color3,10%);}       
    7.       
  7.  li:nth-child(4){background:@color4; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 4)}       
    8.       
  8.  li:nth-child(4):hover{background:lighten(@color4,10%);}       
    9.       
  9.  li:nth-child(5){background:@color5; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 5)}       
    10.       
  10.  li:nth-child(5):hover{background:lighten(@color5,10%);}       
    11.       
  11.  li:nth-child(6){background:@color6; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 6)}       
    12.       
  12.  li:nth-child(6):hover{background:lighten(@color6,10%);}       
    13.       
  13.  li:nth-child(7){background:@color7; .geTtransition2(all @animateTime ease, left @animateTime ease @delay * 7)}       
    14.       
  14.  li:nth-child(7):hover{background:lighten(@color7,10%);}       
    15.

 把之前的li标签的css样式增加一些东西，这里就是增加了过渡，给left属性的过渡增加延时，标签index越大，延时就越多，这样就可以做出主页中的动画效果啦。

animateTime 和 delay 都是上面设置的常量。

当然我们还要从left能回到 normal 形态上。所以 normal的js代码是：

     
  1.  $body.removeClass().addClass('type_normal');       
    2.       
  2.  $menus.css({       
    3.       
  3.  'left':'0px'       
    4.       
  4.  ,'top' : '0px'       
    5.       
  5.  ,'height' : bodyHeight/7 + 'px'       
    6.       
  6.  });       
    7.

这样，从normal 形态 到left 形态的效果就做好了。就是演示中第一个按钮我的主页以及第二个按钮我的信息的点击效果。

 之后来看第三个形态——right形态的效果：

很炫的个人主页 做一个略调皮的个人主页--菜单篇

这个菜单是没有动的，只是相对应的区域（section）从左侧滑了出来，所以这个是很好做的。

css样式：

     
  1.  .area_right{       
    2.       
  2.  z-index:6;overflow:hidden;top:0px;left:-100%;padding-left:90px;       
    3.       
  3.  }       
    4.       
  4.  .type_right{       
    5.       
  5.  .indexMenu{       
    6.       
  6.  li{left:0px;}       
    7.       
  7.  }       
    8.       
  8.  .area_main{       
    9.       
  9.  .geTtransition(all @animateTime ease);       
    10.       
  10.  }       
    11.       
  11.  .area_right{       
    12.       
  12.  left:-90px;       
    13.       
  13.  .geTtransition(all @animateTime ease @animateTime);       
    14.       
  14.  }       
    15.       
  15.  .indexMenu{       
    16.       
  16.  li:hover{       
    17.       
  17.  padding-right:0px;       
    18.       
  18.  span{       
    19.       
  19.  .getAnimate(animate_menu @animateTime ease);       
    20.       
  20.  }       
    21.       
  21.  }       
    22.       
  22.  }       
    23.       
  23.  }       
    24.

 js代码：

     
  1.  $body.removeClass().addClass('type_right' );       
    2.       
  2.  $menus.css({       
    3.       
  3.  'left':'0px'       
    4.       
  4.  ,'top' : '0px'       
    5.       
  5.  ,'height' : bodyHeight/7 + 'px'       
    6.       
  6.  });       
    7.

 值得注意的一点事，这三种形态的css代码中，都有area_main的样式，但是只有一句过渡的，不同的地方时有的有延时，有的没有，这个是考虑normal形态和right形态切换的时候，其实就area_main向左收回，area_right向右展开，如果同时进行，很不友好，所以呢，就加了这个延时。具体的逻辑大家试一下就知道啦。

 然后是top和bottom。这两个其实是一回事，只不过一个在上一个在下，只挑一个top说一下即可。

top形态：

很炫的个人主页 做一个略调皮的个人主页--菜单篇

bottom形态：

很炫的个人主页 做一个略调皮的个人主页--菜单篇

这个是把整个菜单标签的结构都给换了，以前是 width:100%; height:100%/7。 现在是 反过来了，所以每次做变化之前，都需要把标签全部移动到上方（或者下方）的屏幕外，然后做变化，再显示出来。具体动画效果请参考演示。

具体的cssy样式：

     
  1.  .type_top_end{       
    2.       
  2.  .indexMenu{       
    3.       
  3.  height:100%;       
    4.       
  4.  top:-100%;       
    5.       
  5.  }       
    6.       
  6.  .main_area{       
    7.       
  7.  .geTtransition(all @animateTime ease);       
    8.       
  8.  }       
    9.       
  9.  }       
    10.       
  10.  .type_top{       
    11.       
  11.  .indexMenu{       
    12.       
  12.  height:100%;       
    13.       
  13.  top:-100%;       
    14.       
  14.  li {       
    15.       
  15.  height:100% !important;width:14.285%;float:left;left:0px;overflow:hidden;       
    16.       
  16.  .geTtransition3(all 0s ease, top @animateTime ease, background @animateTime ease);       
    17.       
  17.  em{       
    18.       
  18.  position:absolute;bottom:5px;top:auto;width:100%;text-align:center;opacity:0;       
    19.       
  19.  .getTransform(scale(2));       
    20.       
  20.  }       
    21.       
  21.  span {       
    22.       
  22.  top:100%;margin-top:-40px;float:none;left:50%;margin-left:-45px;.getTransform(scale(1));       
    23.       
  23.  }       
    24.       
  24.  }       
    25.       
  25.  li:hover{       
    26.       
  26.  padding-right:0px;       
    27.       
  27.  span{       
    28.       
  28.  opacity:0;       
    29.       
  29.  .getTransform(scale(2));       
    30.       
  30.  }       
    31.       
  31.  em{       
    32.       
  32.  opacity:1;       
    33.       
  33.  .getTransform(scale(1));       
    34.       
  34.  }       
    35.       
  35.  }       
    36.       
  36.  }       
    37.       
  37.  .area_top{opacity:1;z-index:auto;}       
    38.       
  38.  }       
    39.

 这里有两个css样式，type_top_end是最终的显示结果，type_top可以当做是变形的过程，这个设计有一些蹩脚，当时没有设计好。

js代码：

     
  1.  $body.removeClass().addClass('type_top_end' );       
    2.       
  2.  $menus.css({       
    3.       
  3.  'left':'0px'       
    4.       
  4.  ,'top' : '0px'       
    5.       
  5.  });       
    6.       
  6.  setTimeout(function () {       
    7.       
  7.  $body.addClass('type_top' );       
    8.       
  8.  $menus.css({       
    9.       
  9.  'left':'0px'       
    10.       
  10.  ,'top' : '43px'       
    11.       
  11.  });       
    12.       
  12.  } , animateTime);       
    13.

 先收到最上面去，然后setTImeout中 改变top的值，让其在下来一部分。组成所见的标签。

这样，基本的效果就出现了，不过还是有一点的欠缺，具体说来：

第一，从top或者bottom效果便到别的效果时，动画显的很混乱；

第二，从top效果换到bottom效果时，也很乱；

第三，由于只有五种展现形式，不过内容却有七个，所以left和right是重复的两个，那么当从一个left跳转到另一个left（如演示中第二个标签——我的信息跳转到第六个标签——我的工作经历）时，也需要重新设定动画。

为了解决这三个问题，我们先做一个限定，再次点击同一个标签，是要屏蔽掉的。代码如下：

     
  1.  $menus       
    2.       
  2.  /* 主页菜单点击动作 */       
    3.       
  3.  .click(function () {       
    4.       
  4.  var $this = $(this), type = $this.data('type'), target = $this.data('target')       
    5.       
  5.  , $area = $('.area_'+ type),flag = $area.data('flag') ? $area.data('flag') : '';       
    6.      
    
     
  1.  if($body.hasClass('type_'+ type) && flag == target) return;       
    2.       
  2.  menuClickType[type](); //调取相应的方法       
    3.       
  3.  });       
    4.

这个屏蔽有两个判断，第二个判断是加内容时候需要的，我们现在只看第一个即可。

其次是解决第一个问题，即对top以及bottom形态的修正。我们写一个方法：

     
  1.  /* type_top type_bottom 修正 */       
    2.       
  2.  function amend_top_bottom () {       
    3.       
  3.  if($body.hasClass('type_top') ||            $body.hasClass('type_bottom')           ){       
    4.      
    
     
  1.  $menus.css({       
    2.       
  2.  'left':'0px'       
    3.       
  3.  ,'top' : '0px'       
    4.       
  4.  });       
    5.       
  5.  return animateTime;       
    6.       
  6.  }       
    7.       
  7.  return 0;       
    8.       
  8.  }       
    9.

 然后在别的click点击事件中，调用这个方法，获取一个数值，即延时，然后把之后的执行放到一个setTimeOut里，延时即这个数值。当点击时当前的形态不是top或bottom时，返回0，即马上运行，当是这两种形态时，即先把露出的菜单缩会，然后给一个animateTime的延时，这段延时后在走点击事件的方法，即可。

第二个问题。只要在top 和bottom 的点击事件中 加一下是否当前形态为彼此的另一个即可，代码为：

     
  1.  if($body.hasClass('type_bottom')){       
    2.       
  2.  $body.addClass('type_top' ).addClass('type_top_end').removeClass('type_bottom').removeClass('type_bottom_end');       
    3.       
  3.  $menus.css({       
    4.       
  4.  'left':'0px'       
    5.       
  5.  ,'top' : '43px'       
    6.       
  6.  });       
    7.       
  7.  else {       
    8.      
    
     
  1.  /*之前点击事件的代码*/       
    2.       
  2.  }       
    3.

 效果可参考从第三个菜单——我的相册点击到第五个菜单——我的临摹网站的效果。

最后一个问题。就需要在left和right的方法中加入本身的判断啦。具体代码为：

     
  1.  var time = amend_top_bottom();       
    2.       
  2.  if($body.hasClass('type_right')){       
    3.       
  3.  time = animateTime;       
    4.       
  4.  $body.removeClass();       
    5.       
  5.  }       
    6.       
  6.  setTimeout (function () {       
    7.       
  7.  $body.removeClass().addClass('type_right' );       
    8.       
  8.  $menus.css({       
    9.       
  9.  'left':'0px'       
    10.       
  10.  ,'top' : '0px'       
    11.       
  11.  ,'height' : bodyHeight/7 + 'px'       
    12.       
  12.  });       
    13.       
  13.  }, time);       
    14.

 简单说，就是在removeClass 和addClass之间加一个延时，即可。

这样就达到了大体的效果。不过由于我的特定需求，让代码写的有些随意，不是很好。如果规范一点，每次点击事件都需要判断这样几件事，即：

1：是否是重复点击。

2：如果是重复点击，内容是否变动（5个形态，7个内容）,如果改变，则需要添加从本身变本身的动画。

3：特殊前提（如是否是从top或bottom下变换过来等）。

html/css 创意 应用 个人主页 #原创 css3 单页面网站模板
上一篇: 漂亮的个人主页
下一篇: 表格做的个人主页

继续阅读