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

最新推荐文章于 2023-04-26 11:15:55 发布
最新推荐文章于 2023-04-26 11:15:55 发布
阅读量239 收藏
点赞数
分类专栏： HTML/CSS 文章标签： CSS XHTML XML HTML
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>  
tigerpassion
关注
专栏目录
侧边菜单导航(JS+CSS)
若水弹丸之地
12-10 8838
效果展示：（1） （2）  （3）注：（1）Javascript库文件 jquery-1.8.3.min.js请自行下载引入        （2）注意修改引入的css和JS文件的路径HTML&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;SideBar Nav&lt;/title&gt; &lt;script type=...
css实现导航二级菜单
Ylk_manong的博客
07-10 311
css实现导航二级菜单 *{margin:0; padding:0;} li{list-style: none;} a{text-decoration: none; color: #333;} button{border:none;} input{outline:none;} textarea{resize:none;} em,i{font-style: normal;} .orange{ color: #fa0; } .clearfix::after{ content:""; c
实用js+css多级树形展开效果导航菜单
06-15
js+css制作折叠展开的多级树形导航菜单，带多选框效果，经典实用。已经用在程序里了。资源来自：http://www.zzjs.net/html/2105.html
一个JS+CSS样式的导航
ruiandli的专栏
08-24 526
<br /><!-- Nav_a  Start --><br />#nav_a{<br />height:33px;<br />padding-top:5px;<br />padding-left:5px;<br />}<br />#nav_a span{<br />padding-right:10px;<br />background:url(images/base_images.jpg) no-repeat right top;<br />}<br />#nav_a a:link,#nav_a a:vi
一个精彩的JS+CSS精彩导航实例
继续旅程
04-07 112
?View Code JAVA1 阅读全文——共2378字
js导航css,js+css实现导航效果实例
weixin_32896083的博客
08-03 323
本文实例讲述了js+css实现导航效果的方法。分享给大家供大家参考。具体实现方法如下：1. 程序代码如下：CSS+JS实现兼容性很好的无限级下拉菜单*{ margin:0; padding:0; border:0;}body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}.clear...
div+js+css 导航切换
12-22
导航条，通过js控制切换div,展示不同的块内容
js+css3曲线循环菜单滚动切换特效
06-05
【标题】"js+css3曲线循环菜单滚动切换特效"是一种网页设计技术，结合JavaScript（js）和CSS3的强大功能，创造出引人注目的交互式用户体验。这种特效主要用于网站的导航菜单，使得用户在浏览时能以独特的曲线形状和...
js+css实现导航效果实例.docx
01-19
本文将详细介绍如何使用JavaScript和CSS来实现一个具有兼容性的无限级下拉菜单导航效果。 首先，我们从HTML结构开始。一个基本的导航条通常包含一个`<ul>`列表，其中每个导航项是一个`<li>`元素。为了实现下拉菜单...
js+div+css下拉导航菜单完整代码分享
10-20
本文中提到的js+div+css结合的下拉导航菜单是其中一种较为经典的方式。 在HTML结构中，下拉导航菜单的主体通常是一个带有`ul`和`li`元素的无序列表，每一项`li`代表一个可点击的导航项。当鼠标悬停在导航项上时，...
css+div+js实现简单导航栏菜单栏
04-08
css+div+js实现简单导航栏开发；该页面简单明了，通俗易懂
【JavaScript源代码】js+css实现三级导航菜单.docx
12-30
【JavaScript 源代码】js+css实现三级导航菜单 在网页设计中，导航菜单是不可或缺的部分，尤其在复杂的网站结构中，三级导航菜单能够帮助用户更方便地浏览和访问内容。本文主要介绍如何利用 JavaScript 和 CSS 合作...
JS+CSS简单树形菜单实现方法
10-23
本文将详细讲解如何使用JavaScript和CSS来实现一个简单的树形菜单。 首先，我们来理解JavaScript在此处的作用。JavaScript是客户端脚本语言，用于动态修改HTML和CSS，实现交互效果。在树形菜单的实现中，JavaScript...
一个简单的导航菜单 纯js
weixin_34237596的博客
05-13 113
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;     &amp
html css js 菜单,响应式导航菜单（css+js）
weixin_36024106的博客
07-03 557
1.响应式导航菜单先来看下效果图把：当视口大于640px的时候，导航条会显示在外，当视口小于768px的时候，导航菜单需要隐藏起来！代码如下：响应式首页产品购买服务联系var btn=document.getElementById("btn");var menu=document.getElementById("menu");btn.onclick=function(){if(menu.style...
html 动态导航菜单,导航菜单,css3,javascript,响应式菜单,html,css
weixin_30431923的博客
06-08 1859
最近关于 HTML5 和 CSS3 的内容挺多的，说明这项技术日趋成熟，本文介绍 20 个效果很酷的导航菜单。导航栏是一个网站最常使用的部分之一，用户可以通过它有序地访问网页并返回到主页。这就要求导航栏一定要简单、易用，不要让用户在浏览网站过程中迷失。接下来我们要谈的是其下的导航菜单设计。导航菜单不宜设计成过分花哨，产生令人厌烦的感觉。但也要追求赏心悦目，同导航结构在网站设计中是起到决定性作用的，...
web端导航菜单系列
weixin_43516258的博客
04-26 6856
web内容或层次较多时，常用该导航样式（若导航层级三级或者多于三级可考虑双导航栏布局）；导航菜单属于导航中最常规的一种导航模式，它有2个显而易见的用途：帮助我们找到想要的任何东西和告诉我们现在身在何处。结合自身对于导航设计的理解，并综合当下导航设计，对web端导航设计作如下阐述，顶部导航+左侧导航；顶部导航为一级导航，左侧导航为二级导航；一级导航较少，二级导航多的场景更契合。滚动页面，内容对应到相应的导航，或者点击导航，页面内容滚动到相应的模块。点击对应导航或滚动页面，页面滚动至导航对应模块。
Web前端开发实战4：导航菜单(一)
热门推荐
life is wonderful
01-01 1万+
在前面的博文中我们提到横向一级菜单，这里我们来看看导航菜单。导航菜单种类很多，但是制作原理都是大同 小异的，这里看的比二级下拉式菜单还简单。来看一些网站上的导航菜单：        垂直导航菜单：        水平导航菜单：        一垂直菜单       制作原理：(1)用无序列表构建菜单；(2)标签的设置：ul li a{display:block;}。定义的
c#实现俄罗斯方块，面向对象实现
最新发布
09-15
俄罗斯方块（Tetris）是一款经典的益智游戏，由俄罗斯程序员阿列克谢·帕基特诺夫于1984年开发。游戏的主要目标是通过旋转和移动不同形状的方块（称为“砖块”或“Tetrominoes”），将它们填充到屏幕底部的水平行中。当一行被完全填满时，该行会消失，玩家将获得积分。 游戏特点： 砖块形状：游戏中有七种不同形状的砖块，每种砖块由四个方块组成。 下落机制：砖块从屏幕顶部逐渐下落，玩家需要快速做出决策。 得分系统：消除的行越多，得分越高，连续消除多行会获得额外分数。 难度递增：随着游戏进行，砖块下落的速度会逐渐加快，增加了游戏的挑战性。 文化影响： 俄罗斯方块不仅在游戏界取得了巨大的成功，还成为了流行文化的一部分，影响了许多后续的游戏设计。它的简单性和上瘾性使其成为了历史上最畅销的电子游戏之一。 版本与平台： 自发布以来，俄罗斯方块已经在多个平台上推出，包括家用游戏机、电脑、手机等，形成了众多不同的版本和变种。
js+div+css下拉导航菜单代码实现详解
"分享一个使用js、div和css构建的下拉导航菜单的完整代码示例，适用于网页开发。" 在网页设计中，下拉导航菜单是一个常见且实用的元素，它能够有效地组织和展示网站的多层次结构。这个文档提供了一个使用JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值