随笔分类 - 菜单导航特效代码
各类菜单导航特效代码。
摘要：代码简介：我觉得这个菜单非常漂亮，暖色调，而且 是用纯CSS技术实现，每个菜单项会自动适应其宽度，达到完美无暇，兼容性也很好，至于字体颜色以及链接的颜色等，这些你都可以再加工，不多说了，想看效果的先运行一下吧。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>纯CSS写的超漂亮自适应的导航菜单_网页代码站(www.webdm.cn)</title><style>#top { display: block; text-align: left;
阅读全文
摘要：代码简介：一个基于JavaScript的层手动实例，让网站的菜单可以拖拽移位，记得土豆网的“豆单”有这种功能。本效果还尚未彻底完成，部分地方因没有写入对应内容，因此JS可能会提示有错误。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Js打造层拖动实例：网站菜单拖拽移位效果_网页代码站(www.webdm.cn)</title><style type="text/css">*{ margin:0; padding:0}
阅读全文
摘要：代码简介：这个导航条做的不错，是模仿迅雷视频网站的，完全基于CSS和HTML代码，大气清新，请运行一下看看效果如何。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>摘自迅雷视频网站基于CSS+HTML实现大气清新的蓝色导航_网页代码站(www.webdm.cn)</title><style type="text/css">body{margin:0px;font-size:13px; font-family:Verda
阅读全文
摘要：代码简介：一个纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一个“门”的内容存入JS数组中，这样可以减少代码量，但也带来了一个扩展的问题，扩展性方面有待完善，仅供参考。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>一个纵向布局的CSS+JavaScript滑动门代码_网页代码站(www.webdm.cn)</title><style>td,a,bod
阅读全文
摘要：代码简介：CSS版相当漂亮的滑动门式导航菜单，蓝色系，立体效果，设计的非常精美，希望大家能够喜欢哦。主菜单分为二级，如果想多级，可以看看代码是如何调用的，分级后菜单结构更加明淅，用户体验更好。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>漂亮的CSS蓝色滑动门式的导航菜单_网页代码站(www.webdm.cn)</title><style>#top { display: block; text-align: left; height:1
阅读全文
摘要：代码简介：鼠标悬停时动态翻滚的导航条，注意这里用了两个背景图，请等待网页加载完成或多刷新几次，这个是使用JavaScript实现的，不过代码好像是从jQuery里摘出来的，有点像。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS鼠标悬停时动态翻滚的紫色导航条_网页代码站(www.webdm.cn)</title><style type="text/css">.clear:after{content:".&
阅读全文
摘要：代码简介：CSS伪类实现的鼠标滑动链接，是一个图片导航，在早期的DW中有专一制作本效果的插件，不过随着大家CSS水平的提高，现在做出这种效果好像得心应手了，因为这种果大家应该都挺喜欢的。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS伪类实现的鼠标滑动图片链接_网页代码站(www.webdm.cn)</title><style>body {text-align:center;font-size:12px;color:#777777;f
阅读全文
摘要：代码简介：CSS+JavaScript经典版折叠、合拢的多级菜单，这个菜单还是值得研究一下的，一共可展开三层，最里面一级用滚动条来显示菜单内容，整个菜单竖直风格，放到网页的左侧或当作后台管理菜单的模块貌似还不错。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>JavaScript+CSS折叠、合拢的多级菜单_网页代码站(www.webdm.cn)</title><style>*,body,ul,li,h1,h2{ margin:0; pad
阅读全文
摘要：代码简介：防win桌面右键灰色菜单，很神似。代码内容：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>JS防win桌面右键灰色菜单_网页代码站(www.webdm.cn)</title></head><BODY oncontextmenu=window.event.returnValue=false bgcolor="#ffffff"> <style type="text/css"> &
阅读全文
摘要：代码简介：鼠标划过快速展开的JS下拉菜单，缺点是代码偏多，建议封装在一个文件里。代码内容:<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>鼠标划过快速展开的JS下拉菜单_网页代码站(www.webdm.cn)</title></head><body> <SCRIPT language=jscript>var mmenus = new Array();var misShow = new Boolean(); misShow=fa
阅读全文
摘要：代码简介：【荐】QQ菜单生成器。很不错的代码，需要什么项目直接添加了生成，还带了预览功能！代码内容：<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>【荐】QQ菜单生成器_网页代码站(www.webdm.cn)</title><script language="javascript">//生成代码function createCode(){ totalheight = parseInt(fcreate.bodyheight.valu
阅读全文
摘要：代码简介：常用于后台的JS多级树形目录，代码虽然老，但很实用。代码内容：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>常用于后台的JS多级树形目录_网页代码站(www.webdm.cn)</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><style>td{tex
阅读全文
摘要：代码简介：绿色简单的CSS下拉菜单，拿过去打造成自己的下拉菜单，很不错的。代码内容：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>&qu
阅读全文
摘要：代码简介：很不错的效果，类似动画慢慢的折叠。代码内容：<!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><meta http-equiv="Content-Type" content=&q
阅读全文
摘要：代码简介：纯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><meta http-equiv="Content-Type&quo
阅读全文
摘要：代码简介：防Yahoo的选项卡导航特效，代码有些多，建议封装单独一个JS文件调用。代码内容：<!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><meta http-equiv="Content-Ty
阅读全文
摘要：代码简介：Div+CSS+JS实现的树型下拉菜单导航。刷新页面，导航不变。代码内容：<!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><meta http-equiv="Content-Type&q
阅读全文
摘要：代码简介：CSS打造很漂亮的橘黄垂直导航，简约又好看，直接拿过去用吧。代码内容：<html><head> <title>CSS打造很漂亮的橘黄垂直导航_网页代码站(www.webdm.cn)</title><style type="text/css">#vertmenu {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 100%;width: 160px;padding: 0px;margin: 0px;}#vertmenu h1 {dis
阅读全文
摘要：代码简介：纯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
阅读全文
摘要：代码简介：【荐】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"><head><meta http-equiv="Content-T
阅读全文
浙公网安备 33010602011771号