登录
当前位置： 首页 > 编程笔记 >

基于jQuery代码实现圆形菜单展开收缩效果

卫子平
2023-03-14
本文向大家介绍基于jQuery代码实现圆形菜单展开收缩效果，包括了基于jQuery代码实现圆形菜单展开收缩效果的使用技巧和注意事项，需要的朋友参考一下

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<head>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.menu.js"></script>
<style>
body {
  margin:0 auto;
  background:none repeat scroll 0 0 #FCFCFC
}
.outer_container {
  height:200px;
  position:relative
}
.menu_button {
  position:absolute;
  bottom:0;
  left:0;
  border-radius:50%;
  height:36px;
  width:36px;
  border:4px solid #fff;
  box-shadow:rgba(0,0,0,.3) 0 3px 8px 0,rgba(0,0,0,.2) 0 0 0 1px,inset rgba(0,0,0,.3) 0 0 0 1px,inset rgba(255,255,255,.3) 0 1px 0 1px;
  text-indent:-99999px;
  overflow:hidden;
  background-color:#e34f3f;
  background-image:-moz-linear-gradient(top, #f76f54, #c61f1f);
  background-image:-ms-linear-gradient(top, #f76f54, #c61f1f);
  background-image:-webkit-gradient(linear,0 0,0 100%,from( #f76f54),to( #c61f1f));
  background-image:-webkit-linear-gradient(top, #f76f54, #c61f1f);
  background-image:-o-linear-gradient(top, #f76f54, #c61f1f);
  background-image:linear-gradient(top, #f76f54, #c61f1f);
  background-repeat:repeat-x;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f76f54', endColorstr='#c61f1f', GradientType=0);
  z-index:9999;
  outline:0
}
.menu_button span {
  display:block;
  height:36px;
  width:36px;
  background:url("../images/cross.png") no-repeat center center;
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -ms-transition:.4s ease;
  -o-transition:.4s ease;
  transition:.4s ease;
background-size:20px 20px
}
.menu_option {
  bottom:18px;
  left:5px;
  position:absolute
}
.menu_option li {
  position:absolute;
  display:block;
  top:0;
  left:0;
  -webkit-transition:.3s;
  -moz-transition:.3s;
  -ms-transition:.3s;
  -o-transition:.3s;
  transition:.3s
}
.menu_option li a {
  position:relative;
  display:block;
  border-radius:50%;
  width:26px;
  height:26px;
  border:3px solid #fff;
  box-shadow:rgba(0,0,0,.4) 0 0 5px 0,rgba(0,0,0,.2) 0 0 0 1px,inset rgba(0,0,0,.5) 0 0 2px 0;
  text-indent:-99999px;
  overflow:hidden;
  background:#444
}
.menu_option li a span {
  background-attachment:scroll;
  background-clip:border-box;
  background-color:transparent;
  background-image:url("../images/usr.png");
  background-origin:padding-box;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:16px 16px;
  display:block;
  width:26px;
  height:26px;
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -ms-transition:.4s ease;
  -o-transition:.4s ease;
  transition:.4s ease
}
.btn-rotate span {
  -webkit-transform:rotate(-135deg);
  -moz-transform:rotate(-135deg);
  -ms-transform:rotate(-135deg);
  -o-transform:rotate(-135deg);
  transform:rotate(-135deg)
}
</style>
</head>
<body>
<!-- 代码 开始 -->
  <div id="outer_container" class="outer_container" >
    <a class="menu_button" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="Toggle"><span>Menu Toggle</span></a>
    <ul class="menu_option">
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li>
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li>
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li>
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li>
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li>
    </ul>
  </div>
<!-- 代码 结束 -->
<script>
function PieMenuInit(){   
  $('#outer_container').PieMenu({
    'starting_angel':0, //起始角度
    'angel_difference' : 90, //散开角度
    'radius':100, //圆形弧度
  });     
}
$(function() {     
  PieMenuInit();     
});
</script>
</body>

以上所述是小编给大家介绍的基于jQuery代码实现圆形菜单展开收缩效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！

 类似资料：
  • jQuery实现折叠、展开的菜单组效果代码

    本文向大家介绍jQuery实现折叠、展开的菜单组效果代码，包括了jQuery实现折叠、展开的菜单组效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现折叠、展开的菜单组效果代码。分享给大家供大家参考。具体如下： 这是一款jQuery实现的漂亮的竖向折叠菜单组，初次运行的时候请刷新一下页面，让jQ载入，这款菜单应用广泛，可用到后台左侧，网站前台也可以用，发现自腾讯微博开放

  • 基于jquery实现多级菜单效果

    本文向大家介绍基于jquery实现多级菜单效果，包括了基于jquery实现多级菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jquery实现多级菜单效果展示的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

  • jquery简单实现网页层的展开与收缩效果

    本文向大家介绍jquery简单实现网页层的展开与收缩效果，包括了jquery简单实现网页层的展开与收缩效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery简单实现网页层的展开与收缩效果。分享给大家供大家参考。具体如下： 这里演示了jquery网页层展开、层收缩代码，带缓冲动画效果，点击指定的文字或按钮，可展开指定层，再次单击会收起层，类似效果网上已见到许多，请根据自己的需要修改

  • jQuery实现的经典竖向伸缩菜单效果代码

    本文向大家介绍jQuery实现的经典竖向伸缩菜单效果代码，包括了jQuery实现的经典竖向伸缩菜单效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的经典竖向伸缩菜单效果代码。分享给大家供大家参考。具体如下： 这是一款使用jquery1.3.2制作的竖向伸缩菜单，每点击一次主菜单，会拉开出对应的二级菜单，再次点击会合拢，效果非常不错。 运行效果截图如下： 在线演示地址

  • jquery实现的Banner广告收缩效果代码

    本文向大家介绍jquery实现的Banner广告收缩效果代码，包括了jquery实现的Banner广告收缩效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现的Banner广告收缩效果代码。分享给大家供大家参考。具体如下： 这里演示一个Banner广告收缩效果，点开后，网页显示大广告，用鼠标点击“关闭”后，广告会收缩上去，此效果已在各大网站见到过，欢迎借鉴使用。 运行效

  • jquery实现点击向下展开菜单项(伸缩导航)效果

    本文向大家介绍jquery实现点击向下展开菜单项(伸缩导航)效果，包括了jquery实现点击向下展开菜单项(伸缩导航)效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现点击向下展开菜单项(伸缩导航)效果。分享给大家供大家参考。具体如下： 这里演示基于jquery打造的向下展开的多级导航条效果，纵向垂直排列，风格非常的简洁，鼠标点击时候展开菜单的二级项，再次点击的时候又向上

相关阅读

jquery实现的Banner广告收缩效果代码jquery实现点击向下展开菜单项(伸缩导航)效果JS基于Mootools实现的个性菜单效果代码基于jQuery实现简单的折叠菜单效果基于jQuery倾斜打开侧边栏菜单特效代码

相关文章

Spring基于注解实现事务管理JOGL 缩放效果基于订单系统的分库分表实战菜鸟 测开 菜鸟测开

相关问答

如何在libGDX Box2D中实现圆形旋转矩形？css如何实现两个圆形重叠？基于其他短代码的WordPress短代码基于菜单的日历系统[重复]JSF基于selectone菜单显示PanelGrid行/项

相关工具

最简单代码实现九宫格md5和sha加密代码实现模仿ness伸缩效果滚动菜单四格菜单

相关文档

基于 Node.js 的 HTTPS MITM 中间人代理的原理和实现Git 菜单Knative入门 构建基于 Kubernetes 的现代化 Serverless 应用深度学习入门：基于 Python 的理论与实现如何实现自己的 jQuery
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.