本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果。分享给大家供大家参考。具体如下： 这是一款JS+CSS实现的多级折叠菜单，可折叠展开/合拢，没有引用任何的外部文件，也没有用到图片，虽然简单，而且还有些粗糙，但核心的东西已经展示给大家了，正在研究折叠菜单的朋友们，这一个小例子可能正是你需要的，好好研究一下吧。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-simple-zdzk-menu-style-c...
本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码。分享给大家供大家参考。具体如下： 这是一个很简洁的CSS+JavaScript二级菜单，没有使用过多的修饰素材，尽量不调用外部图片，简洁大方，而且便于二级开发完善，最初是一个政府网站上的菜单。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans...
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果。分享给大家供大家参考。具体如下： 这是一个JS+CSS技术实现的Select控件效果，模拟出来的，比默认的Select更漂亮，有了这个模板，你修改Select就更方便了，由此你也可以将其制作成CSS下拉菜单，在兼容性方面暂未测试，在IE8下没问题。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下： <!DOCTYPE ht...
本文实例讲述了jquery+CSS3实现淘宝移动网页菜单效果。分享给大家供大家参考。具体如下： 这是一款基于jquery+CSS3实现的淘宝移动网页菜单，其实这个菜单动画并不复杂，只有缩放和位移。难点是用了扇形结构，而且还要实现扇形的链接区域，这个就费脑筋了，最后采用了传统的图片map来做热区，效果还不错。相信肯定有更好的解决方法。 先来看看运行效果截图：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-css3-taobao-ph...
本文实例讲述了jquery+CSS3模拟Path2.0动画菜单效果代码。分享给大家供大家参考。具体如下： CSS3实现的仿手机软件菜单，动画菜单，注意的地方，小按钮位移后有个缓冲，每个小按钮缓冲的距离不一样，每个小按钮位移的时间有间隔，处理好这些细节才能体现出灵动的效果。 CSS3代码：(请用非IE标准浏览器访问)由于代码运行框缺陷，请先刷新一下页面动画运行更流畅。Path菜单的小按钮本来应该也可以旋转的，但CSS3动画的位移和旋转同时...
本文实例讲述了jQuery实现可高亮显示的二级CSS菜单效果。分享给大家供大家参考。具体如下： 这里实现鼠标放在二级菜单上，一级菜单可高亮显示，以指示当前菜单所在的位置，引入了jQuery插件使其在做对简洁度方面优化的非常好，用较少的代码实现想要的功能，分享给大家。 先来看看运行效果截图：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-color-show-2level-css-menu-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "...
本文实例讲述了jQuery+CSS实现的网页二级下滑菜单效果。分享给大家供大家参考。具体如下： 这是一款简洁型的 jQuery+CSS网页二级下滑菜单，练手写的，有需要的自己拿去美化吧，基本的动画效果和菜单下滑效果和渐变效果已经做出来了，在IE下表现不错，在火狐下发现菜单有闪烁现象，有空会继续修正，感谢大家捧场哦。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-css-web-2level-menu-style-codes/ 具...
本文实例讲述了JavaScript+CSS实现仿天猫侧边网页菜单效果。分享给大家供大家参考。具体如下： 这是一款自己写的仿天猫的菜单效果，二级分类的功能已经实现，但没有美化，留着用的朋友自己完善吧，JS功能已经实现，鼠标移在主分类上，二级分类向右伸出展开，目前淘宝网、天猫购物、京东都在用的导航菜单特效，测试时候请先点击一下菜单，主菜单就显示出来了。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/...
这里仅是用CSS技术来演示这样的一个场景，可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果，将使用到HAML和Sass。 案例效果查看演示 源码下载 看到上面的效果是不是有点像人站室内看窗外雨中的夜景，窗户上雨滴的效果是那么的真实，窗外的夜景却又是那么的模糊。咱们不在诗意化了，我想大家更为关注的是用什么样的技术来实现这样的一个效...
本文实例讲述了JS+CSS实现滑动切换tab菜单效果。分享给大家供大家参考。具体如下： 这是风格简单的一款JS+CSS滑动门特效代码，当鼠标滑过菜单的时候，二级菜单自动切换，鼠标不需要点击，滑动门效果是个比较流行的网页菜单效果，在网上经常可看到这种菜单的身影。本菜单在火狐、IE8、Chrome下测试通过，代码兼容性还可以，自己用的化再美化一下风格。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-m...
效果展示图如下，兼容chrome，firefox，windows，360，搜狗等主流浏览器点击这里下载源码 米扑代理，是由百度，小米出来的工程师创建，做得非常棒，功能很全很贴心。JS + CSS 经典实现 <!DOCTYPE HTML> <html lang="en-US"> <head> <title>悬浮固定菜单</title> <style type="text/css">.wrapper {width:1000px;height:2000px;margin-left:auto;margin-right:auto;text-align: center;}.header {height:150px;}#nav {padding: 10p...
本文实例讲述了jquery+CSS实现的多级竖向展开树形TRee菜单效果。分享给大家供大家参考。具体如下： 这里演示垂直的树形菜单，应用CSS和jquery技术来实现，显示在网页左侧比较合适，考虑到简洁，没有使用图片之类的作修饰。本效果兼容IE、火狐等主流浏览器。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-css-nlevel-vshow-tree-codes/ 具体代码如下： <!DOCTYPE html> <head> <meta http-equiv="Con...
本文实例讲述了jquery+css实现的红色线条横向二级菜单效果。分享给大家供大家参考。具体如下： 这是一款带导航的菜单，当前是哪一项菜单，会很个性的显示出来，鼠标放上后会显示菜单缺口，挺有意思的吧，希望大家喜欢。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-css-red-color-2row-nav-style-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w...
本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果。分享给大家供大家参考。具体如下： JS+DIV+CSS实现仿表单下拉列表效果，是完全用CSS技术再配合JS实现的效果，用来代替传统的Select下拉框，虽然目前来说，此代码还有些粗糙，但对于美化列表的样式来说，可能以后会更方便，要比Select方便的多。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-div-css-fselect-codes/ 具体代码如下： <!DOCTYPE html PUB...
废话不多说了，炫下效果图并附上演示和源码下载。 实现效果如下：查看演示 源码下载 HTML结构代码： CSS代码：/*表单开关样式*/ .ui-switch { position: absolute; font-size: .16rem; right:0.07rem; top: 50%; margin-top: -0.16rem; width: .7rem; height: .3rem; line-height: .3rem; } .ui-switch input { width: .7rem; height: .3rem; position: absolute; top: 0;left: 0; z-index: 2; border: 0; background: 0 0; ...