您现在的位置是：网站首页> 编程资料编程资料

html滑动仿悬浮球菜单效果的实现HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题HTML5单选框、复选框、下拉菜单、文本域的实现代码Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码html5写一个BUI折叠菜单插件的实现方法

2021-08-29 1490人已围观

简介 这篇文章主要介绍了html滑动仿悬浮球菜单效果的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

css样式

 html,body{ width: 100%; height: 100%; margin: 0;padding: 0; } /*导航图标*/ .NMH-g-navicon{ position: fixed; top: 40%; right: 020px; width: 100px; height: 100px; } .NMH-g-navicon.Jnmh-onleft{ right: auto; left: 020px; } /*导航图标logo按钮*/ .NMH-g-navicon .Jnmh-btnlogo{ position: absolute; display: block; width: 100px; height: 100px; top: 50%; right: 0; margin-top: -50px; border: 0; background: url(img/icon_128.png) no-repeat center center; background-size: 95% 95%; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 10px 0px; outline: none; border-radius: 50%; z-index: 1; } .NMH-g-navicon .Jnmh-btnlogohover{ position: absolute; display: block; width: 100px; height: 100px; top: 50%; right: 0; margin: 0;padding: 0; margin-top: -50px; border: 0; overflow: hidden; /*background-color: red;*/ } /*导航图标logo按钮-鼠标经过*/ .NMH-g-navicon.Jnmh-open .Jnmh-btnlogohover{ margin-top: -150px; width: 200px; height: 300px; border-radius: 150px 0 0 150px; } .NMH-g-navicon.Jnmh-onleft .Jnmh-btnlogohover{ left: 0; right: auto; border-radius: 0 150px 150px 0; } /*导航图标菜单子容器*/ .NMH-g-navicon .Jnmh-m-submenu{ position: absolute; background-color: transparent; list-style: none; top: -020px; bottom: -020px; left: -020px; right: -020px; margin: 0; padding: 0; } .NMH-g-navicon .Jnmh-m-submenu .Jnmh-subli{ position: absolute; width: 100%;height: 100%; transform: rotate(0deg); -webkit-transform: rotate(0deg); transition: all 0.8s ease-in-out; } .Jnmh-m-submenu .Jnmh-subdl{ position: absolute; left: 50%; bottom: 100%; width: 0; height: 0; line-height: 1px; margin-left: 0; background: #fff; border-radius: 50%; text-align: center; font-size: 1px; overflow: hidden; cursor: pointer; box-shadow: none; transition: all 0.8s ease-in-out, color 0.1s, background 0.1s; } /*导航图标-展开菜单时*/ .NMH-g-navicon.Jnmh-open .Jnmh-m-submenu .Jnmh-subdl{ width: 80px; height: 80px; line-height: 80px; margin-left: -40px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); font-size: 14px; } /*导航图标-三级菜单容器*/ .NMH-g-navicon.Jnmh-open .Jnmh-m-submenu .Jnmh-subdd{ position: absolute; line-height: normal; }

html代码

  • 电商平台
  • 选品平台
  • 会员升级
  • 产品操作
  • 个人中心

javascript代码

在这里插入图片描述

到此这篇关于html滑动仿悬浮球菜单效果的实现的文章就介绍到这了,更多相关html滑动仿悬浮球菜单内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：详解html-webpack-plugin使用浅析html webpack plugin插件的使用教程使用html-webpack-plugin'入再内存中生成 html 页面插件

下一篇：在HTML里加载摄像头的方法基于HTML代码实现图片碎片化加载功能html5用video标签流式加载的实现HTML5 图片预加载的示例代码传统HTML页面实现模块化加载的方法HTML页面缩小后显示滚动条的示例代码h5页面背景图很长要有滚动条滑动效果的实现HTML5实现直播间评论滚动效果的代码html+css实现滚动到元素位置显示加载动画效果

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网