jQuery和CSS3点击圆形按钮伸缩导航菜单

jQuery和CSS3点击圆形按钮伸缩导航菜单2740
一款非常实用的jQuery和CSS3圆形弹性伸缩导航菜单按钮特效。该导航菜单初始状态是一个圆形的按钮,当用户用鼠标点击或移动手机上用手触摸了按钮之后,该圆形按钮平滑的伸缩变形为圆角导航菜单,效果非常酷。该弹性伸缩导航菜单按钮有3种特效:固定导航菜单,添加内容按钮和编辑内容按钮。HTML结构非常简单:nav.cd-stretchy-nav用于包裹导航菜单列表的无序列表。a.cd-nav-trigger是主菜单按钮。span.stretchy-nav-bg元素用于创建可伸缩的菜单背景。
<nav class="cd-stretchy-nav">  <a class="cd-nav-trigger" href="#0">    Menu    <span aria-hidden="true"></span>  </a>    <ul>    <li><a href="#0" class="active"><span>Home</span></a></li>    <li><a href="#0"><span>Portfolio</span></a></li>    <!-- other list items here -->  </ul>    <span aria-hidden="true" class="stretchy-nav-bg"></span></nav>  
在CSS样式中,.cd-stretchy-nav class是伸缩菜单的主样式。另外两个附加样式.add-content和.edit-content分别用于定制添加内容和编辑内容两种菜单的样式。菜单动画的基本原理是:设置span.stretchy-nav-bg一个固定的高度和宽度(和a.cd-nav-trigger大小一样),当导航菜单被打开的时候,使用.nav-is-visible class来制作菜单的高度动画(或者宽度动画),以创建菜单的拉伸效果。
.cd-stretchy-nav {  position: fixed;  z-index: 2;  top: 40px;  right: 5%;}.cd-stretchy-nav .stretchy-nav-bg {  /* this is the stretching navigation background */  position: absolute;  z-index: 1;  top: 0;  right: 0;  width: 60px;  height: 60px;  border-radius: 30px;  background: #9acd91;  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);  transition: height 0.2s, box-shadow 0.2s;}.cd-stretchy-nav.nav-is-visible .stretchy-nav-bg {  height: 100%;  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);}                
对于导航菜单项,特效中定制了2种不同的CSS动画:scaleIn动画将作用域菜单项的图标,slideIn动画将作用于菜单项的标签。然后为每一个菜单项添加一些不同的动画延迟时间。
.cd-stretchy-nav ul {  position: relative;  z-index: 2;  visibility: hidden;  transition: visibility 0.3s;}.cd-stretchy-nav ul a {  position: relative;}.cd-stretchy-nav ul a::after {  /* navigation item icons */  content: '';  position: absolute;  height: 16px;  width: 16px;  transform: translateY(-50%) scale(0);  opacity: .6;  background: url(../img/cd-sprite-1.svg) no-repeat 0 0;}.cd-stretchy-nav ul span {  /* navigation item labels */  display: block;  opacity: 0;  transform: translateX(-25px);}  .cd-stretchy-nav.nav-is-visible ul {  visibility: visible;}.cd-stretchy-nav.nav-is-visible ul a::after {  /* navigation item icons */  transform: translateY(-50%) scale(1);  animation: scaleIn 0.15s backwards;}.cd-stretchy-nav.nav-is-visible ul span {  opacity: 1;  transform: translateX(0);  animation: slideIn 0.15s backwards;}  .cd-stretchy-nav.nav-is-visible ul li:first-of-type a::after,.cd-stretchy-nav.nav-is-visible ul li:first-of-type span {  animation-delay: 0.05s;}/* animation delay for other children here ...*/  @keyframes scaleIn {  from {    transform: translateY(-50%) scale(0);  }  to {    transform: translateY(-50%) scale(1);  }}  @keyframes slideIn {  from {    opacity: 0;    transform: translateX(-25px);  }  to {    opacity: 1;    transform: translateX(0);  }}               
对于后面两种工具条效果,当导航菜单打开的时候仅会显示图标(使用scaleIn动画),而菜单项的文本会在鼠标滑过菜单项时才显示出来。
.cd-stretchy-nav.edit-content ul span {  position: absolute;  top: 0;  right: 35px;  height: 30px;  line-height: 30px;  opacity: 0;  visibility: hidden;  background-color: rgba(0, 0, 0, 0.55);  transition: opacity 0.2s, visibility 0.2s;}.cd-stretchy-nav.edit-content ul span::after {  /* triangle below the tooltip */  content: '';  position: absolute;  left: 100%;  top: 50%;  bottom: auto;  transform: translateY(-50%);  height: 0;  width: 0;  border: 4px solid transparent;  border-left-color: rgba(0, 0, 0, 0.55);}  .no-touch .cd-stretchy-nav.edit-content.nav-is-visible ul a:hover span {  opacity: 1;  visibility: visible;}                
使用jQuery代码来监听a.cd-nav-trigger元素上的点击事件,为nav.cd-stretchy-nav元素相应的添加和移除.nav-is-visible class。

也许你还喜欢