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');
  });
});
相关文章
|
22天前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
49 22
|
1月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
31 2
|
1月前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
9天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
7天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
6天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
58 34
|
10天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
61 33
|
1月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
109 24
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
99 7

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等