随笔分类 - 菜单导航特效代码
各类菜单导航特效代码。
摘要：代码简介：仿新浪网的滑动门，黄色经典，操作舒适度确实很舒服，不亏是门户哦，长度和宽度这个就要自己修改啦，布局紧凑合理，本人喜欢的风格。代码内容：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charse
阅读全文
摘要：代码简介：横向、竖向人两个选项卡，其卡片内容是一样的，只不过多了一个操作途径，当点击一个选项卡的时候，另一个选项卡同样会指示出当的选项卡位置，也就是两者的功能是相同的，很巧妙的布局方法。代码内容：<!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"
阅读全文
摘要：代码简介：折叠菜单，竖向展开，点击时缓慢展开，展开后可以作为菜单的栏目介绍等，还算不错。代码内容：<!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
阅读全文
摘要：代码简介：配色很舒服的纯CSS二级下拉菜单，没有用到JS，全部是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/xhtm
阅读全文
摘要：代码简介：从页面左侧滑出的导航菜单，响应鼠标运作，鼠标放上从左侧缓慢移出，鼠标移走则菜单自动隐藏。代码内容：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>出现在页面左侧鼠标指向滑出的导航菜单代码_网页代码站(www.webdm.cn)</title><style><!--#ssm2 A { color:black; text-decoration:no
阅读全文
摘要：代码简介：蓝色经典简洁的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"><he
阅读全文
摘要：代码简介：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"><
阅读全文
摘要：代码简介：兼容性很好的TAB选项卡，兼容目前常用的IE,FF,Opera,Safari,Chrome等各种浏览器，它的扩展也非常好，可以无限制在同一页面上添加任意个选项卡，而并不需要增加过多的代码。代码内容：<!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
阅读全文
摘要：代码简介：纯CSS下拉式导航菜单，支持IE6、IE7、Firefox，没有用到任何JavaScript，修改方便，而且效果也不错。代码内容：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=&quo
阅读全文
摘要：代码简介：用CSS实现圆角效果，竖向排列，可折叠、可展开，自动响应鼠标运作，内容定制方便，希望你喜欢。代码内容：<html><head><title>用CSS实现竖向圆角效果的折叠菜单代码_网页代码站(www.webdm.cn)</title><style type="text/css"><!--#menu { font-size:12px; height:380px; margin:0; padding:0; width:180px; overflow:hidden; background:#f0f0f0;
阅读全文
摘要：代码简介：代码内容：<html><head><title>用JS+CSS写左侧可隐藏的展开、折叠菜单代码_网页代码站(www.webdm.cn)</title> <script language="JavaScript1.2" type="text/javascript"> var maxmnus = 5 function opTab(){ var mnu = document.getElementById("menubar") var arrdiv = document.g
阅读全文
摘要：代码简介：用CSS代码实现的Vista风格样式的菜单，是不是很清爽，美感十足，看了就很喜欢，圆角的菜单。代码内容：<!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" xml:lang="en" lang="en&qu
阅读全文
摘要：代码简介：非常棒的一款代码，鼠标指向文字后显示对应的内容，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>【荐】鼠标放上弹出下拉菜单的代码_网页代码站(w
阅读全文
摘要：代码简介：DIV+CSS+JavaScript二者结合实现一个独特的展开/收缩菜单，实际上是用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"&
阅读全文
摘要：代码简介：配色极舒服的CSS菜单条，背景色采用红色、菜单链接采用白色边框相配合，看上去清新自然，而且是用纯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><m
阅读全文
摘要：代码简介：弹性十足的个性化导航菜单，鼠标点击后像弹簧一样弹开，缓慢稳定结束，菜单里可以放上图片和文字，或者是列表内容，基于CSS+JS实现，比较实用。代码内容：<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>五颜六色的弹性下拉导航菜单代码_网页代码站(www.webdm.cn)</title> <style type="text/css"
阅读全文
摘要：代码简介：一个通用型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"><head><meta http-equiv=&qu
阅读全文
摘要：代码简介：CSS+JS个性菜单，还会抖动哦，蓝色风格，代码有点复杂，不是很实用，只为研究一个JS技术吧。代码内容：<html><head><title>蓝色风格的JS+CSS个性菜单代码_网页代码站(www.webdm.cn)</title><style type="text/css"><!--.t { filter: Alpha(Opacity=50)}td { font-size: 12px; line-height: 22px}a:link { color: #FFF; text-decoration:
阅读全文
摘要：代码简介：隐藏在顶部的菜单，类似QQ最小化时的窗口一样，浮动在屏幕的最上方，鼠标放上去会自动展开，这是基本的实现步骤，如果喜欢的话，颜色什么的你自己改一下。代码内容：<html><head><title>网页顶部隐藏css菜单代码_网页代码站(www.webdm.cn)</title><style>#D1 { BACKGROUND-COLOR: skyblue; BORDER: white 2px outset; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden;
阅读全文
摘要：代码简介：DIV+JS类QQ菜单，可展开折叠，小巧灵活，代码修改方便，菜单采用LI列表，用CSS可以统一去控制，有兴趣的可以再完善一下。代码内容：<html><head><title>DIV+JS实现可展开、折叠的菜单代码_网页代码站(www.webdm.cn)</title><style>td { cursor: hand; font-family: Tahoma; background-color: #0066cc; color: #fff; font-size: 9pt; }li { color: #FF0000; font-f
阅读全文
浙公网安备 33010602011771号