随笔分类 - 菜单导航特效代码
各类菜单导航特效代码。
摘要：代码简介：JS配合CSS实现，单击文字后，弹出菜单，有点flash的味道。代码内容：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS+CSS实现单击后的弹出菜单代码_网页代码站(
阅读全文
摘要：代码简介：非常适合新手学习，作者有详细的代码注释。代码内容：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>纯CSS打造带注释的下拉菜单_网页代码站(www.webdm.cn)<
阅读全文
摘要：代码简介：貌似是老外写的，非常的流畅。代码内容：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS+CSS动态平滑下拉菜单_网页代码站(www.webdm.cn)</titl
阅读全文
摘要：代码简介：推荐朋友们看看，非常值得，JS类似flash，又有点星空的感觉。代码内容：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>【荐】JS实现类似星球仿flash效果的动态菜单_
阅读全文
摘要：代码简介：JS+CSS组合的精彩漂亮的导航菜单代码代码内容:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS+CSS组合的精彩漂亮的导航菜单代码_网页代码站(www.webdm.
阅读全文
摘要：代码简介：代码内容：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js随鼠标移过动态放大的菜单导航_网页代码站(www.webdm.cn)</title><sty
阅读全文
摘要：代码简介：来自海娃朋友封装好的一个三级联动菜单类，很不错，这里演示了省市县三级联动，产品三级联动等。代码内容：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS打造的三-级关链菜单
阅读全文
摘要：代码简介：非常经典，我觉得算是先驱之一了，以前常用126邮箱，经常看见。代码内容：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>来自126邮箱的经典TAB导航_网页代码站(www.
阅读全文
摘要：代码简介：用JS已经封装好的滑动门，只需调用就可以用。使用方法： 1.把以上代码引进你的页面 2.在页面的""标签前加入以下代码: 其中sd方法中的参数为： 参数一 [菜单id数组]：滑动门菜单的id 参数二 [内容id数组]：显示和隐藏滑动内容层的id 参数三 "菜单触发类"：鼠标经过滑动门菜单的类 参数四 "菜单关闭类"：鼠标滑出滑动门菜单的类 3.页面中有几个滑动门就调用几次sd函数,只需改变sd调用的参数。代码内容：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra
阅读全文
摘要：代码简介：根据以前的一个tab，加上新的结构基础做出来的。兼容IE6-IE8、FireFox、Chrome、Opera和Safari。如果你不介意display:none出现在CSS里的话，可以小改一下，那结构、样式、行为就算是完全分离开了。至于具体的代码我这里就不分析了，大家看看就知，很容易看懂。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>体验、语义、兼容很好的TAB滑动门_网页代码站(www.webdm.cn)</title><style
阅读全文
摘要：代码简介：同一个网页布局滑动门和TAB修正版，其实滑动门和选项卡没有太大的区别，无非是鼠标动作的不同而已，但是有时候在同一个网页中布局两个以上的选项卡，总容易产生混乱，导致JS出错，如果你需要这样做，那么就请参考本实例，帮你解决这个问题。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>JS同一个页面布局滑动门和TAB_网页代码站(www.webdm.cn)</title><style>*{margin:0;padding:0;}body{m
阅读全文
摘要：代码简介：CSS_Tab简洁版，很不错的效果，希望大家喜欢。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS 实现的简洁选项卡Tab_网页代码站(www.webdm.cn)</title><style type="text/css"> body{margin:0; font-size:12px; background:#666;} #box{width:400px; height:300px; margin:100
阅读全文
摘要：代码简介：js实现无限级树形下拉导航菜单，简洁实用，用到一个已封装好的JS类，有用的大家借鉴一下。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>js实现无限级树形导航列表_网页代码站(www.webdm.cn)</title></head><body><style type="text/css"> *{ margin:0; padding:0; list-style:none;} body {
阅读全文
摘要：代码简介：【荐】DIV+CSS仿360buy京东商城导航条 ，很棒的，赶快来试试。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>【荐】DIV+CSS仿360buy京东商城导航条_网页代码站(www.webdm.cn)</title><style type="text/css">.my_left_category{ width:150px; font-size:12px; font-family:arial,sans-s
阅读全文
摘要：代码简介：这是自己写的一个右键菜单类，屏蔽掉了IE固有的右键菜单，一共有四个参数：第一个是出发显示右键菜单的div的id 第二个是右键菜单这个层的id，根据这个id去创建一个新的层，menuList是菜单项的列表，对应了点击一个菜单项后触发的函数，classList是菜单的class名称，以及菜单项对应的class名称，包含了鼠标滑过时的class。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Javascript右键菜单类_网页代码站(www.webdm.cn
阅读全文
摘要：代码简介：左侧竖向滑动菜单，基于JavaScript+CSS，没有过多的修饰，主要想实现菜单的动画效果，想用的朋友，自己美化吧。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>左侧竖向滑动菜单_网页代码站(www.webdm.cn)</title><style type="text/css">body{ margin:10px; padding:10px;}a:link { text-decoration: none;c
阅读全文
摘要：代码简介：级横向滑动，二级竖向下拉综合菜单，这个菜单一共是三级，前两级是滑动切换的方式，第三级主要是下拉菜单的形式，虽然简单的样式简约，但是实现他们其实是很复杂的，希望从事前端开发的朋友一同参考一下吧。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>【荐】JS一级横向滑动，二级竖向下拉的综合菜单_网页代码站(www.webdm.cn)</title><style type="text/css"> <!--body,
阅读全文
摘要：代码简介：纯CSS代码实现比较经典的蓝色风格下拉菜单，最多支持两级，适用于各种企业网站，新闻资讯类网站，效果挺棒的，不是吗？虽然没有用到过多的修饰，但给你的感觉清新、大方、简洁，符合现代网站的特点。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>很漂亮的蓝色CSS下拉菜单_网页代码站(www.webdm.cn)</title><style>*{margin:0;padding:0;border:0;}#div_center { width:
阅读全文
摘要：代码简介：纯CSS下拉菜单，绝对没有用Javascript，虽然简单，但是美观大方，先运行一下看看效果吧，本菜单扩展性很好，你完全可以在此基础上继续完善功能，以满足您的使用要求。代码内容：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
阅读全文
摘要：代码简介：使用jquery1.3.2制作的竖向伸缩菜单，每点击一次主菜单，会拉开出对应的二级菜单，再次点击会合拢，欢迎下载使用。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jQuery1.3.2竖向的伸缩菜单_网页代码站(www.webdm.cn)</title><script type="text/javascript" src="http://www.webdm.cn/themes/script/jquery
阅读全文
浙公网安备 33010602011771号