jQuery和CSS3滑动展开菜单按钮插件

简介: 这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开

这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开,效果非常炫酷。

tx000324.png

在线预览 下载

使用方法

在页面中引入jquery文件。

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

HTML
使用下面的HTML结构来创建滑动展开菜单。

<ul class="menu">
  <li id="push">
    <span>
      Trigger Button
    </span>
  </li>
  <li id="pushed-left-1">
    <span>
      jQuery
    </span>
  </li>
  <li id="pushed-center">
    <span>
      Script
    </span>
  </li>
  <li id="pushed-right-1">
    <span>
      Net
    </span>
  </li>
  <li id="pushed-right-2">
    <span>
      Menu
    </span>
  </li>
</ul>

CSS样式
然后添加下面的CSS样式。

ul.menu li, ul.menu li .sub-menu {
   
  border-radius: 100%;
  height: 100px;
  width: 100px;
}

ul.menu {
   
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.menu li {
   
  margin: 0;
  padding: 0;
  position: absolute;
  background-color: #5408FF;
  cursor: pointer;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul.menu li span {
   
  color: #11111C;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.1px;
}

ul.menu li .sub-menu {
   
  height: 100px;
  width: 100px;
  position: absolute;
  top: 100px;
  background-color: white;
}

ul.menu li:hover {
   
  background-color: #FF08FF;
}

ul.menu li#push {
   
  z-index: 50;
  background-color: #FF08FF;
}

ul.menu li#push span {
   
  font-size: 2rem;
}

ul.menu li#push.move {
   
  left: -200px;
}

ul.menu li#push.rotate {
   
  transform: rotate(-315deg);
}

ul.menu li#pushed-center {
   
  z-index: 10;
}

ul.menu li#pushed-left-1 {
   
  z-index: 20;
}

ul.menu li#pushed-left-1.move {
   
  left: -100px;
}

ul.menu li#pushed-right-1 {
   
  z-index: 30;
}

ul.menu li#pushed-right-1.move {
   
  left: 100px;
}

ul.menu li#pushed-right-2 {
   
  z-index: 40;
}

ul.menu li#pushed-right-2.move {
   
  left: 200px;
}

Javascript
最后通过下面的js代码来触发按钮的点击展开动画。

$(document).ready(function() {
   
  $('#push').on('click',function(){
   
    $('#push, #pushed-center, #pushed-left-1, #pushed-right-1, #pushed-right-2').toggleClass('move');
    $('#push').toggleClass('rotate');
  });
});
相关文章
|
2月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
60 22
|
2月前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
45 14
|
3月前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
80 9
|
3月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
36 2
|
23天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
40 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
138 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
61 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
67 34
|
2月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
95 33

热门文章

最新文章