本文实例讲述了JS+CSS实现简单滑动门的方法。分享给大家供大家参考。具体如下： 这是一款超简约设计的滑动门菜单，鼠标放到主菜单上，里面的内容会跟着变化，实际上本演示是一个范例，从代码中的注释你就能感觉到，每一步都有注释，对学习JavaScript和CSS都有帮助，也为你以后写出比这更漂亮、更实用的滑动门做铺垫。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-jdhd-menu-style-codes/ 具体代码如...
本文实例讲述了JS+CSS实现带小三角指引的滑动门效果。分享给大家供大家参考。具体如下： 这是一款JS+CSS带小三角指引的滑动门，有朋友说在IE6下看不到效果，其实能看到，因为那个小三角颜色比较淡，有时候因显示器的原因看不太清，其实这个颜色是自己可以控制的，改一下就行了，带三角指引后，使整个滑动门的结构更清淅，导向性更合理。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-sj-move-menu-s...
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果。分享给大家供大家参考。具体如下： 这是一款鼠标悬停时动态翻滚的导航条，注意这里用了两个背景图，请等待网页加载完成或多刷新几次，这个是使用JavaScript实现的，不过代码好像是从jQuery里摘出来的，有点像。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-mouse-over-nav-scroll-style-codes/ 具体代码如下：动态翻滚的导航条.clear:aft...
本文实例讲述了JS+CSS实现仿支付宝菜单选中效果代码。分享给大家供大家参考。具体如下： 这是一个漂亮的JS+CSS仿支付宝菜单，总体风格和形式与支付宝的菜单没什么两样，细心会发现这是一个CSS爱好者自己手功完成的，自己美化图片，重写CSS代码，为作者给我们奉献这么好的菜单而表示感谢。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-f-alipay-style-menu-codes/ 具体代码如下：CSS仿支付宝菜单* {...
本文实例讲述了JS+CSS实现类似QQ好友及黑名单效果的树型菜单。分享给大家供大家参考。具体如下： 今天介绍的这个菜单堪称极品啊，不过里面的有些图标丢失了，路径还留在那，真想使用的朋友自己制作两个折叠菜单的图标按路径传上去就行了，这个菜单是模仿QQ面板的菜单功能，很多朋友还是很喜欢这种功能的，没想到用这么少的JS代码也可实现 ，值得代签哦。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-cs...
本文实例讲述了JS+CSS实现经典的左侧竖向滑动菜单效果。分享给大家供大家参考。具体如下： 这是一款经过改造的左侧竖向滑动菜单，基于JavaScript+CSS，没有过多的修饰，主要想实现菜单的动画效果，想用的朋友，自己美化吧。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-jd-left-v-hd-menu-style-codes/ 具体代码如下：经过改造的左侧竖向滑动菜单body{margin:10px;padding:10px; } a:link { text-d...
本文实例讲述了JS+CSS实现简易的滑动门效果代码。分享给大家供大家参考。具体如下： 看了很多的滑动门和滑动菜单的资料，总算写出来了一个像样的滑动门，虽然外观不怎么样，但可以兼容火狐，还请老前辈们不要笑话，以后有好多西再请大家批评。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-simple-hdtx-demo-codes/ 具体代码如下：学习练手写下个简易的滑动门*{ margin:0px; padding:0px; font-size...
本文实例讲述了JS+CSS实现六级网站导航主菜单效果。分享给大家供大家参考。具体如下： 这是一款JS+CSS实现支持6级的网站导航主菜单，级级相信够大家用了，外观蓝色风格，也是使用最多的一种菜单颜色，而且菜单的兼容性非常好，支持IE6\IE7\IE8，火狐、GG浏览器等不同内核的主流浏览器。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-6l-web-nav-menu-demo/ 具体代码如下：CSS六级导航菜单.preload1 ...
这篇文章主要介绍了JS+CSS实现的日本门户网站经典选项卡导航效果，涉及JavaScript针对页面元素的动态遍历及样式动态修改技巧，具有一定参考借鉴价值，需要的朋友可以参考下，具体如下：这里介绍的是来自日本门户网站的一款CSS+JavaScript选项卡导航菜单，银灰色风格，看来日本人和中国人的审美是接近的，都喜欢这种风格，如果你要用的话，直接拷贝代码部分到你的网页中，注意你需要修改编码才行，日本的编码和中国可是不一样哦，只...
本文实例讲述了JS+CSS相对定位实现的下拉菜单。分享给大家供大家参考。具体如下： 这里使用的是相对定位，不过效果还可以，用时候再修整一下，这个只是实现了大概功能，还有许多细节没有修饰。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-ab-fix-menu-codes/ 具体代码如下：非定位CSS+Js下拉菜单#menu {position: absolute;font-family: sans-serif;font-size: 9pt; } #menu li {float: left;list...
不管我们对浏览器类型前缀有多么的讨厌，我们都不得不每天面对它，否者有些东西不能正常工作。这些前缀的用法有两种：在CSS里(例如“-moz-”)和在JS里。有一个神奇的 X-Tag 项目里有一段很聪明的JavaScript脚本，可以用来判断当前使用的是什么前缀——让我来展示它是如何工作的！ 比如 CSS 前缀，IE 的是 "-ms-"，旧版 Opera 的是 "-o-"，Firefox 的是 "-moz-"，Safari/Chrome 是 "-webkit-"。JavaScript 有多种方式判断它们。 方法...
本文实例讲述了JS+CSS实现的蓝色table选项卡效果。分享给大家供大家参考。具体如下： 这是一款蓝色的JS+Table类型的选项卡，部分标签内容存储在JS数组，个人感觉本特效不是太合理，因为内容从Js里输出会给读取内容造成很大麻烦，这里你就当学习一种JS编程方法，代码是需要改进的。 先来看看运行效果截图：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-blue-table-style-nav-demo/ 具体代码如下：选项卡td,a,body{font-...
本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果。分享给大家供大家参考。具体如下： 这是一个基于JavaScript的简单选项卡代码，陪新手练习一下Div+CSS排版的技巧，本选项卡可以继续美化修饰完善，选项卡在目前在众多网站上应用广泛，确实是一个很不错的网页布局方法。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下：DIV CSS排版function test_item(n){var ...
本文实例讲述了JS+CSS实现仿雅虎另类滑动门切换效果。分享给大家供大家参考。具体如下： 这是仿照雅虎特色服务的一个Tab滑动切换效果，核心是一个CSS滑动门，经过了改进，有点特别，看下效果吧，估计很多朋友会喜欢的。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-f-yahoo-hdm-menu-demo/ 具体代码如下：仿雅虎另类CSS滑动门切换window.onload = function(){alltabs = document.getElementById('...
本文实例讲述了JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果。分享给大家供大家参考。具体如下： 这里演示JavaScript+CSS仿Mootools竖排黑色动画菜单，并非使用了Mootools，但效果却和使用了Mootools差不多，动画效果平滑，操作舒服，给菜单增色不少。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-css-mootools-style-demo/ 具体代码如下：竖排黑色动画菜单#menu {height: auto;width: 350px;flo...