`

不错的js+css实现导航菜单

CSSXHTMLXMLHTML 
阅读更多
css 代码
 
  1. body{  
  2. background-color:white;  
  3. font-size:12px;  
  4. font-family:Arial, Helvetica, sans-serif;  
  5. margin:0px;  
  6. padding:0px;  
  7. color:white;  
  8. }  
  9. ul,li{  
  10. margin:0px;  
  11. padding:0px;  
  12. }  
  13. li{  
  14. display:inline;  
  15. list-style:none;  
  16. list-style-position:outside;  
  17. text-align:center;  
  18. font-weight:bold;  
  19. float:left;  
  20. }  
  21. a:link{  
  22. color:#336601;  
  23. text-decoration:none;  
  24. float:left;  
  25. width:100px;  
  26. padding:3px 5px 0px 5px;  
  27. }  
  28. a:visited{  
  29. color:#336601;  
  30. text-decoration:none;  
  31. float:left;  
  32. padding:3px 5px 0px 5px;  
  33. width:100px;  
  34. }  
  35. a:hover{  
  36. color:white;  
  37. float:left;  
  38. padding:3px 3px 0px 20px;  
  39. width:88px;  
  40. text-decoration:none;  
  41. background-color:#539D26;  
  42. }  
  43. a:active{  
  44. color:white;  
  45. float:left;  
  46. padding:3px 3px 0px 20px;  
  47. width:88px;  
  48. text-decoration:none;  
  49. background-color:#539D26;  
  50. }  
  51. #nav{  
  52.     width:600px;  
  53.     height:30px;  
  54.     border-bottom:0px;  
  55.     padding:0px 5px;  
  56.     position:absolute;  
  57.     z-index:1;  
  58.     left: 198px;  
  59.     top: 25px;  
  60. }  
  61. .list{  
  62. line-height:20px;  
  63. text-align:left;  
  64. padding:4px;  
  65. font-weight:normal;  
  66. }  
  67. .menu1{  
  68. width:120px;  
  69. height:auto;  
  70. margin:6px 4px 0px 0px;  
  71. border:1px solid #9CDD75;  
  72. background-color:#F1FBEC;  
  73. color:#336601;  
  74. padding:6px 0px 0px 0px;  
  75. cursor:hand;  
  76. overflow-y:hidden;  
  77. filter:Alpha(opacity=70);  
  78. -moz-opacity:0.7;  
  79. }  
  80. .menu2{  
  81. width:120px;  
  82. height:18px;  
  83. margin:6px 4px 0px 0px;  
  84. background-color:#F5F5F5;  
  85. color:#999999;  
  86. border:1px solid #EEE8DD;  
  87. padding:6px 0px 0px 0px;  
  88. overflow-y:hidden;  
  89. cursor:hand;  
  90. }  
xml 代码
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312" xml:lang="gb2312">  
  4. <head>  
  5. <title>站酷CSS代码演示-http://www.zcool.com.cn</title>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  7. <link rel="stylesheet" type="text/css" href="css/css.css" />  
  8. </head>  
  9.   
  10. <body>  
  11.   
  12. <div id="nav">  
  13.     <ul>  
  14.     <li class="menu2" onMouseOver="this.className='menu1'" 
  15. onMouseOut="this.className='menu2'">站酷首页   
  16.     <div class="list">  
  17.         <a href="#">我的Png</a><br />  
  18.         <a href="#">我的Gif</a><br />  
  19.         <a href="#">我的酷站</a><br />  
  20.         <a href="#">我的日志</a><br />  
  21.         <a href="#">我的相册</a><br />  
  22.         <a href="#">我的收藏</a><br />  
  23.     </div>  
  24.     </li>  
  25.     <li class="menu2" onMouseOver="this.className='menu1'" 
  26. onMouseOut="this.className='menu2'">社区圈子  
  27.     <div class="list">  
  28.         <a href="#">我的CHINAY</a><br />  
  29.         <a href="#">我的首页</a><br />  
  30.         <a href="#">我的日志</a><br />  
  31.         <a href="#">我的相册</a><br />  
  32.         <a href="#">我的收藏</a><br />  
  33.     </div>  
  34.     </li>  
  35.     <li class="menu2" onMouseOver="this.className='menu1'" 
  36. onMouseOut="this.className='menu2'">我的短信   
  37.     <div class="list">  
  38.         <a href="#">我的CHINAY</a><br />  
  39.         <a href="#">我的相册</a><br />  
  40.         <a href="#">我的收藏</a><br />  
  41.     </div>  
  42.     </li>  
  43.     <li class="menu2" onMouseOver="this.className='menu1'"
  44. onMouseOut="this.className='menu2'">账户管理   
  45.     <div class="list">  
  46.         <a href="#">我的CHINAY</a><br />  
  47.         <a href="#">我的首页</a><br />  
  48.         <a href="#">我的日志</a><br />  
  49.         <a href="#">我的相册</a><br />  
  50.         <a href="#">我的收藏</a><br />  
  51.         <a href="#">我的日志</a><br />  
  52.         <a href="#">我的相册</a><br />  
  53.         <a href="#">我的收藏</a><br />  
  54.     </div>  
  55.     </li>  
  56.     </ul>  
  57. </div>  
  58.   
  59.   
  60.   
  61. </body>  
  62.   
  63. </html>  
分享到：
| windows 宋体 与 vista 雅黑
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Javascript+CSS实现的弧形导航二级菜单

    总结来说，"Javascript+CSS实现的弧形导航二级菜单"是一个融合了前端核心技术的项目，通过CSS实现视觉上的弧形设计，借助JavaScript增加交互性。这个设计不仅可以提升用户体验，也能展示出开发者对于现代Web技术的...

    div+css实现圆角导航菜单的效果

    本文将深入探讨如何使用`div+css`来实现具有圆角效果的导航菜单。 首先，`div`是HTML中的一个块级元素，它可以被用作容器，用于组织页面内容。在创建导航菜单时，`div`可以用来包裹整个菜单或者单独的菜单项。例如...

    js+css3曲线循环菜单滚动切换特效

    【标题】"js+css3曲线循环菜单滚动切换特效"是一种网页设计技术，结合JavaScript（js）和CSS3的强大功能，创造出引人注目的交互式用户体验。这种特效主要用于网站的导航菜单，使得用户在浏览时能以独特的曲线形状和...

    超漂亮JS+CSS动感导航菜单

    在这个案例中，JS被用来实现导航菜单的交互效果，如响应式点击、动画过渡、下拉子菜单等。开发者可能使用了DOM（文档对象模型）来操作HTML元素，以及事件监听器来响应用户的交互。 2. **CSS基础**：CSS是用于定义...

    js+css实现导航效果实例.docx

    本文将详细介绍如何使用JavaScript和CSS来实现一个具有兼容性的无限级下拉菜单导航效果。 首先，我们从HTML结构开始。一个基本的导航条通常包含一个`&lt;ul&gt;`列表，其中每个导航项是一个`&lt;li&gt;`元素。为了实现下拉菜单...

    div+css+js实现菜单的收缩与展开

    div+css+js实现菜单的收缩与展开

    【JavaScript源代码】js+css实现三级导航菜单.docx

    【JavaScript 源代码】js+css实现三级导航菜单 在网页设计中，导航菜单是不可或缺的部分，尤其在复杂的网站结构中，三级导航菜单能够帮助用户更方便地浏览和访问内容。本文主要介绍如何利用 JavaScript 和 CSS 合作...

    css+div+js实现简单导航栏菜单栏

    "CSS+Div+JS实现简单导航栏菜单栏"是一个基础但实用的主题，它涵盖了网页布局、样式设计以及交互功能的实现。接下来，我们将深入探讨这三个关键技术在创建导航栏菜单栏中的应用。 首先，CSS（层叠样式表）是用于...

    HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip

    本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目，分析它们在实际应用中的作用。 首先，HTML（HyperText Markup Language）...

    简洁的html5+css3导航菜单插件

    在这个“简洁的html5+css3导航菜单插件”中，我们可以深入探讨这两个技术如何协同工作，以实现高效且美观的网页导航。 HTML5作为最新的超文本标记语言版本，引入了许多新元素和特性，旨在提高网页结构化和语义化。...

    js+css+div导航菜单

    3. ocscript.js：这是一个JavaScript文件，其中包含了实现导航菜单动态效果的代码。可能包括了事件监听器的设置、DOM操作（如添加、删除、修改元素）、以及动画效果的实现。 综上所述，这个项目涉及的知识点包括：...

    Div+Css的Tab菜单

    - Tab的样式可以多样化，包括扁平化设计、3D效果、圆角、渐变色、图标组合等，这些都是通过CSS实现的。 - Tab可以是水平的，也可以是垂直的，甚至可以设计成不规则形状，满足不同设计需求。 - 注意保持Tab的一致...

    29款DIV+CSS导航菜单源码实例

    标题"29款DIV+CSS导航菜单源码实例"指出这是一个包含多个实际示例的集合，这些示例展示了如何使用HTML的`&lt;div&gt;`元素结合CSS来设计和实现导航菜单。在网页设计中，`DIV`元素通常作为布局容器，而CSS（层叠样式表）...

    html+css+js实现漂亮网页

    1. **交互性**：JavaScript可以实现表单验证、下拉菜单、轮播图、模态框等交互效果。 2. **动画效果**：CSS3动画和JavaScript可以让元素平滑移动、淡入淡出，增强视觉吸引力。 3. **响应式布局**：通过媒体查询，...

    使用html+css+js+jquery实现小米官网.rar

    在本项目中，“使用html+css+js+jquery实现小米官网.rar”是一个压缩包，它包含了一组文件，用于重现小米官网的前端页面。这个项目主要涵盖了四个关键的技术领域：HTML、CSS、JavaScript以及jQuery，这些都是构建...

    js+css3手风琴展开收缩下拉菜单代码

    在网页设计中，交互性和用户体验是至关重要的因素之一，而js+css3手风琴展开收缩下拉菜单正是实现这一目标的有效工具。本资源提供了一种扁平化设计的实现方式，结合JavaScript与CSS3技术，创建了一个带有小图标的...

    js+div+css下拉导航菜单完整代码分享.docx

    ### js+div+css下拉导航菜单完整代码分析与解读 #### 一、知识点概述 在Web开发中，导航菜单是用户体验中不可或缺的一部分。通过合理的设计和技术应用，可以使网站更加美观且易于使用。本篇文章将深入解析一个使用...

    仿CmsEasy网站横向二级JS+CSS导航菜单

    综上所述，“仿CmsEasy网站横向二级JS+CSS导航菜单”是一个结合了CSS样式和JavaScript交互的网页组件，它通过优雅的过渡效果和良好的交互设计，为用户提供了一种高效的导航方式。理解和掌握这种菜单的制作方法，对于...

    Div+Css+js树形菜单

    本项目以“Div+Css+js树形菜单”为主题，利用HTML的Div元素、CSS样式和JavaScript脚本来实现一个功能完备、视觉效果良好的树形菜单。 首先，Div是HTML中的一个布局容器，用于组织和控制页面内容的布局。在树形菜单...

    jQ+CSS3滑块导航菜单 jQuery+CSS3滑块导航菜单网页特效.zip

    "jQ+CSS3滑块导航菜单 jQuery+CSS3滑块导航菜单网页特效" 是一个结合了jQuery和CSS3技术的创新性导航菜单实现，旨在提供更加动态、交互性强的用户体验。这个压缩包文件包含了一个实现这一效果的实例，让我们深入探讨...

Magicbox
Global site tag (gtag.js) - Google Analytics