- 浏览: 135981 次
- 性别:
- 来自: 济南
文章分类
最新评论
-
ysw909:
你好 请问一下 能画大卫三角形么
感觉不太好画,坐标点不好找 ...
Raphael学习笔记(1)--简介 -
damoqiongqiu:
还缺了一个步骤,需要在spring.xml里面配置一个bean ...
Spring容器启动后自动执行Servlet进行预处理 -
moment52:
moment52 写道ServletContextAware是 ...
spring启动后,立即执行需要的操作 -
moment52:
ServletContextAware是spring的还是st ...
spring启动后,立即执行需要的操作 -
nikoloss:
请问这么为这个raphael_4.text这个字上面设置事件? ...
Raphael学习笔记(5)--绘图(路径【椭圆曲线】)
最近公司要对已有的产品进行升级,希望改变一下导航菜单的展现方式。于是,在网上搜索了一下,感觉带箭头的导航菜单方式不错,于是就模仿着写了一个,其实很简单。不废话了,看代码。
<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery.js"></script> <title>Menu</title> <style type="text/css"> ul, li { list-style-type:none; padding:0; margin:0; } #menu { border:1px solid #dedede; height:35px; background:url(bg_out.gif) repeat-x; } #menu li { float:left; line-height:35px; padding-left: 10px; padding-right: 15px; } #menu li div { height: 100%; width: 100%; } .li_out { background:url(arrow_out.gif) no-repeat right center; } .li_over { cursor:hand; background:url(arrow_over.gif) no-repeat right center; color:white; } .div_over { background: url(bg_over.gif) repeat-x; margin-left: -10px; padding-left: 10px; } </style> <script type="text/javascript"> $(document).ready(function(){ $("#menu").children("li").hover( function(){ $(this).addClass("li_over"); $(this).children("div").addClass("div_over"); }, function(){ $(this).removeClass("li_over"); $(this).children("div").removeClass("div_over"); } ); }); </script> </head> <body> <ul id="menu"> <li class="li_out"><div>Home</div></li> <li class="li_out"><div>Equipment File</div></li> <li class="li_out"><div>Sparepart Account</div></li> <li class="li_out"><div>Maintenance Management</div></li> <li class="li_out"><div>System</div></li> </ul> </body> </html>
效果显示如下:
附件中是整个实现的代码。
2011-01-08修改:
今天和同事交流了一下,发现了更好的实现效果。感谢同事marker提出的建议和改进的帮助。
箭头样式导航菜单2.rar是marker提供的实现效果(注意,菜单栏在浏览器中是右对齐的),如图
箭头样式导航菜单3.rar是我改进后的另一种实现效果(注意,菜单栏在浏览器中是左对齐的),如图
大家给看看,是否还有bug没有测试到?欢迎指出,在此先谢谢!
- 箭头样式的导航菜单.rar (24.7 KB)
- 下载次数: 590
- 箭头样式导航菜单2.rar (25.9 KB)
- 下载次数: 564
- 箭头样式导航菜单3.rar (25.7 KB)
- 下载次数: 834
评论
18 楼
mr_sunq
2011-02-22
firemmet 写道
仔细看下效果,通过现象看本质,问题并没有上边的那么复杂,箭头的方向是一致的,鼠标经过的样式也比较固定,背景为纯色。在现在的前提下没必要搬出大车轮子来用,无非是一些末端的遮盖,简单的css即可实现以上的需求。如下:
这是第一种效果的实现,第二种的效果也不难,html结构同第一种的,仅需要稍微调整下css即可了,如下:
上传下背景图片,
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>meun</title> <style type="text/css"> html, body, div{ margin: 0; padding: 0; } .menu{ float: left; padding: 0 20px 0 0; _padding: 0 29px 0 0; background: #D2D2D2; font-size: 0; } .menu a{ display: inline-block; height: 32px; padding: 0 9px 0 0; background: url(bg.png) no-repeat right 0; color: #333; font-size: 12px; line-height: 32px; text-decoration: none; } .menu a span{ display: block; padding: 0 10px 0 15px; } .menu a:hover{ background: url(bg.png) no-repeat right -35px; color: #FFF; } .menu a:hover span{ background: #888; } </style> </head> <body> <div class="menu"> <a class="home" href="#"><span>HOME</span></a> <a href="#"><span>NEWS1</span></a> <a href="#"><span>NEWS2</span></a> <a href="#"><span>NEWS3</span></a> <a href="#"><span>NEWS4</span></a> <a href="#"><span>NEWS5</span></a> </div> </body> </html>
这是第一种效果的实现,第二种的效果也不难,html结构同第一种的,仅需要稍微调整下css即可了,如下:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>menu</title> <style type="text/css"> html, body, div{ margin: 0; padding: 0; } .menu{ float: left; padding: 0 20px 0 0; _padding: 0 29px 0 0; background: #D2D2D2; font-size: 0; } .menu a{ display: inline-block; height: 32px; margin: 0 -9px 0 0; padding: 0 9px 0 0; background: url(bg.png) no-repeat right 0; color: #333; font-size: 12px; line-height: 32px; text-decoration: none; } .menu a span{ display: block; padding: 0 10px 0 20px; } .menu a:hover{ background: url(bg.png) no-repeat right -35px; color: #FFF; } .menu a:hover span{ background: #888 url(bg.png) no-repeat left 0; } .menu a.home:hover span{ background: #888; } </style> </head> <body> <div class="menu"> <a class="home" href="#"><span>HOME</span></a> <a href="#"><span>NEWS1</span></a> <a href="#"><span>NEWS2</span></a> <a href="#"><span>NEWS3</span></a> <a href="#"><span>NEWS4</span></a> <a href="#"><span>NEWS5</span></a> </div> </body> </html>
上传下背景图片,
span里面放上中文以后,菜单显示就会乱码,在firefox、ie浏览器上均如此
17 楼
lib
2011-01-17
<div class="quote_title">binlaniua 写道</div>
<div class="quote_div">直接用边框对压不就可以了吗....</div>
<p> </p>
<p>能否共享一下代码?</p>
<div class="quote_div">直接用边框对压不就可以了吗....</div>
<p> </p>
<p>能否共享一下代码?</p>
16 楼
binlaniua
2011-01-15
直接用边框对压不就可以了吗....
15 楼
lxs647
2011-01-13
都是高手啊O(∩_∩)O~
14 楼
jorneyR
2011-01-12
<div class="quote_title">lib 写道</div>
<div class="quote_div">
<div class="quote_title">jorneyR 写道</div>
<div class="quote_div">不知道你在没有在Opera上测试过,Opera中对padding的处理总是常出问题</div>
<p> </p>
<p>在Opera上测试过,确实还有一点bug。当第一次将鼠标移动到一个题目上时,没有任何效果,并且左右两侧的箭头消失了。</p>
<p> </p>
<p>哎!头疼,费了半天劲没有解决!<img src="/images/smiles/icon_redface.gif" alt=""></p>
</div>
<p>嘿嘿,IE蛋疼,Opera也好不到哪去,Opera最大的优势是在老爷机上速度超级快。</p>
<div class="quote_div">
<div class="quote_title">jorneyR 写道</div>
<div class="quote_div">不知道你在没有在Opera上测试过,Opera中对padding的处理总是常出问题</div>
<p> </p>
<p>在Opera上测试过,确实还有一点bug。当第一次将鼠标移动到一个题目上时,没有任何效果,并且左右两侧的箭头消失了。</p>
<p> </p>
<p>哎!头疼,费了半天劲没有解决!<img src="/images/smiles/icon_redface.gif" alt=""></p>
</div>
<p>嘿嘿,IE蛋疼,Opera也好不到哪去,Opera最大的优势是在老爷机上速度超级快。</p>
13 楼
spsmysp
2011-01-12
好及时啊~项目当中正好要用到~
谢谢
谢谢
12 楼
Sehoney
2011-01-12
<p><span style="font-size: small;">我想做到的效果是点击后的效果(附件)<br>现在这个是移动上去的效果</span></p>
<p><span style="font-size: small;">高手看下吧(对你们来说肯定再简单不过了)<img src="/images/smiles/icon_biggrin.gif" alt=""></span></p>
<p> </p>
<p><span style="font-size: small;">高手看下吧(对你们来说肯定再简单不过了)<img src="/images/smiles/icon_biggrin.gif" alt=""></span></p>
<p> </p>
11 楼
interjc
2011-01-11
firemmet 写道
仔细看下效果,通过现象看本质,问题并没有上边的那么复杂,箭头的方向是一致的,鼠标经过的样式也比较固定,背景为纯色。在现在的前提下没必要搬出大车轮子来用,无非是一些末端的遮盖,简单的css即可实现以上的需求。如下:
......
......
down下来看了下确实不错,不过jquery是现在做web的标配吧,有得用就用嘛,也不损失什么,呵呵~
10 楼
keete
2011-01-11
学习了。。以后有机会一定要用上
9 楼
firemmet
2011-01-11
仔细看下效果,通过现象看本质,问题并没有上边的那么复杂,箭头的方向是一致的,鼠标经过的样式也比较固定,背景为纯色。在现在的前提下没必要搬出大车轮子来用,无非是一些末端的遮盖,简单的css即可实现以上的需求。如下:
这是第一种效果的实现,第二种的效果也不难,html结构同第一种的,仅需要稍微调整下css即可了,如下:
上传下背景图片,
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>meun</title> <style type="text/css"> html, body, div{ margin: 0; padding: 0; } .menu{ float: left; padding: 0 20px 0 0; _padding: 0 29px 0 0; background: #D2D2D2; font-size: 0; } .menu a{ display: inline-block; height: 32px; padding: 0 9px 0 0; background: url(bg.png) no-repeat right 0; color: #333; font-size: 12px; line-height: 32px; text-decoration: none; } .menu a span{ display: block; padding: 0 10px 0 15px; } .menu a:hover{ background: url(bg.png) no-repeat right -35px; color: #FFF; } .menu a:hover span{ background: #888; } </style> </head> <body> <div class="menu"> <a class="home" href="#"><span>HOME</span></a> <a href="#"><span>NEWS1</span></a> <a href="#"><span>NEWS2</span></a> <a href="#"><span>NEWS3</span></a> <a href="#"><span>NEWS4</span></a> <a href="#"><span>NEWS5</span></a> </div> </body> </html>
这是第一种效果的实现,第二种的效果也不难,html结构同第一种的,仅需要稍微调整下css即可了,如下:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>menu</title> <style type="text/css"> html, body, div{ margin: 0; padding: 0; } .menu{ float: left; padding: 0 20px 0 0; _padding: 0 29px 0 0; background: #D2D2D2; font-size: 0; } .menu a{ display: inline-block; height: 32px; margin: 0 -9px 0 0; padding: 0 9px 0 0; background: url(bg.png) no-repeat right 0; color: #333; font-size: 12px; line-height: 32px; text-decoration: none; } .menu a span{ display: block; padding: 0 10px 0 20px; } .menu a:hover{ background: url(bg.png) no-repeat right -35px; color: #FFF; } .menu a:hover span{ background: #888 url(bg.png) no-repeat left 0; } .menu a.home:hover span{ background: #888; } </style> </head> <body> <div class="menu"> <a class="home" href="#"><span>HOME</span></a> <a href="#"><span>NEWS1</span></a> <a href="#"><span>NEWS2</span></a> <a href="#"><span>NEWS3</span></a> <a href="#"><span>NEWS4</span></a> <a href="#"><span>NEWS5</span></a> </div> </body> </html>
上传下背景图片,
8 楼
interjc
2011-01-11
把LZ的代码改了一下,图片也换了一下,呵呵~
确实是挺好玩的~
确实是挺好玩的~
<!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="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery.js"></script> <title>Menu</title> <style type="text/css"> *{ margin:0; padding:0;} #menu{ clear:both; height:1%; overflow:hidden; margin:50px; list-style:none; background:#d2d2d2; } #menu li { float:left; line-height:30px; overflow:hidden; display:inline; } #menu li a{ text-decoration:none; float:left; display:inline; padding:0 5px; } #menu li a:hover{ background:url(bg_over.gif) repeat-x left center; } #menu li.separator{ width:8px; height:30px; padding:0; } #menu li.separator a, #menu li.separator a:hover{ background:url(arrow_out.gif) no-repeat right center; height:30px; width:8px; padding:0; } #menu li.hover-before a, #menu li.hover-before a:hover{ background-image:url(arrow_next_over.gif); } #menu li.hover-after a, #menu li.hover-after a:hover{ background-image:url(arrow_over.gif); } </style> <script type="text/javascript"> jQuery(function($){ var objMenu = $('#menu'); $('li', objMenu) .after('<li class="separator"><a href="#"> </a></li>') .hover(function(){ var self = $(this); $('.separator').removeClass('hover-before hover-after'); self.prev('.separator').addClass('hover-before'); self.next('.separator').addClass('hover-after'); },function(){ var self = $(this); self.prev('.separator').removeClass('hover-before'); self.next('.separator').removeClass('hover-after'); }); }); </script> </head> <body> <div> <div id="menu-content"> <ul id="menu"> <li><a href="#">System</a></li> <li><a href="#">Maintenance Management</a></li> <li><a href="#">Sparepart Account</a></li> <li><a href="#">Equipment File</a></li> <li><a href="#">Home</a></li> </ul> </div> </div> </body> </html>
7 楼
lib
2011-01-11
<div class="quote_title">jorneyR 写道</div>
<div class="quote_div">不知道你在没有在Opera上测试过,Opera中对padding的处理总是常出问题</div>
<p> </p>
<p>在Opera上测试过,确实还有一点bug。当第一次将鼠标移动到一个题目上时,没有任何效果,并且左右两侧的箭头消失了。</p>
<p> </p>
<p>哎!头疼,费了半天劲没有解决!<img src="/images/smiles/icon_redface.gif" alt=""></p>
<div class="quote_div">不知道你在没有在Opera上测试过,Opera中对padding的处理总是常出问题</div>
<p> </p>
<p>在Opera上测试过,确实还有一点bug。当第一次将鼠标移动到一个题目上时,没有任何效果,并且左右两侧的箭头消失了。</p>
<p> </p>
<p>哎!头疼,费了半天劲没有解决!<img src="/images/smiles/icon_redface.gif" alt=""></p>
6 楼
lib
2011-01-11
<div class="quote_title">rainsilence 写道</div>
<div class="quote_div">mouseover,一共改变三张图片,很简单的思路啊</div>
<p> </p>
<p>实现起来确实很简单,重点不是mouseover,而是padding和margin与background的组合使用。</p>
<div class="quote_div">mouseover,一共改变三张图片,很简单的思路啊</div>
<p> </p>
<p>实现起来确实很简单,重点不是mouseover,而是padding和margin与background的组合使用。</p>
5 楼
rainsilence
2011-01-11
mouseover,一共改变三张图片,很简单的思路啊
4 楼
jorneyR
2011-01-10
不知道你在没有在Opera上测试过,Opera中对padding的处理总是常出问题
3 楼
blackbirdcc
2011-01-10
很实用,与传统别具一格
2 楼
ligg5034
2011-01-10
不错 很好的效果 谢谢分享!
1 楼
Javakeith
2011-01-08
我找样的东西好久了!
发表评论
-
使用CSS绘制基本图形
2012-03-31 15:12 2610你懂得,不解释,直接上代码。 <!DOC ... -
JavaScript的作用域(学习笔记三)
2011-04-08 14:22 996还是先上一段代码,思考一下执行的结果。 <scr ... -
JavaScript的作用域(学习笔记二)
2011-04-08 13:45 1012看看下面代码的执行结果: <script> ... -
JavaScript的作用域(学习笔记一)
2011-04-08 10:36 895<script> var ... -
CheckBox级联选择
2009-07-17 08:06 4695最近做项目时,需要用到CheckBox的级联选择,于是自己动手 ...
相关推荐
【CSS3箭头菜单效果详解】 在Web开发中,菜单导航是网站布局的重要组成部分,它为用户提供直观的交互路径。随着CSS3技术的发展,我们能够创建更多动态且富有视觉吸引力的菜单效果,其中箭头菜单就是一种常见的设计...
这个压缩包“css3箭头菜单效果.zip”显然包含了一个利用CSS3实现的箭头菜单效果示例。箭头菜单在网站设计中非常常见,它可以提供清晰的导航结构,帮助用户更直观地理解页面层次。下面我们将详细探讨如何使用CSS3来...
### 纯CSS箭头效果实现方法 在Web开发中,使用CSS来创建美观且功能性的用户界面是一项基本技能。本文将详细介绍如何仅通过CSS来实现一个带有箭头的菜单效果,无需借助任何图片资源或JavaScript代码。这种方法不仅...
1. **网站导航菜单**:为下拉菜单添加箭头指示符。 2. **提示框**:用于提示用户注意特定信息或操作时,增强交互性和美观性。 3. **内容区域划分**:为页面的不同部分划分边界,同时增加视觉效果。 4. **装饰元素**...
在这个名为“CSS树形菜单”的项目中,我们主要关注的是如何使用CSS来构建和美化这种交互式的菜单。 首先,要创建一个基础的树形菜单,通常我们需要HTML结构来表示菜单的层级关系。每个菜单项可能包含一个或多个子...
【标题】"js+css3曲线循环菜单滚动切换特效"是一种网页设计技术,结合JavaScript(js)和CSS3的强大功能,创造出引人注目的交互式用户体验。这种特效主要用于网站的导航菜单,使得用户在浏览时能以独特的曲线形状和...
CSS jQuery共同实现的一款带动画效果的菜单,菜单上的箭头会翻转的动画二级下拉菜单,风格十分简洁,几乎没有使用图片美化。菜单颜色若要修改,可直接修改CSs代码即可。菜单动画效果的实现主要是引入了jquery插件来...
在本示例中,"css3箭头菜单效果特效代码"着重于使用CSS3来创建具有动态箭头效果的下拉菜单。这种菜单效果能够提升用户界面的交互性和吸引力,尤其适用于网站导航。 首先,我们来了解一下CSS3中的箭头制作方法。通常...
3. **Transition过渡**:当菜单展开和收起时,CSS3的`transition`属性可以添加平滑的过渡效果,使得菜单的展开和收缩过程更加自然。`transition`可以设置一个或多个CSS属性,如`width`, `opacity`等,并指定过渡时间...
2. `1121.jpg`:可能是一个用于美化菜单的背景图片,如分割线、箭头等。 3. `images`:这是一个目录,可能包含了其他与菜单相关的图像资源,如图标或装饰性的图像。 综上所述,"vista CSS二级菜单"项目涉及到了HTML...
使用CSS可以控制菜单的布局、颜色、边框、阴影、过渡效果等,实现箭头效果通常需要用到伪元素`::before`或`::after`。 3. JavaScript 动态效果:`wwwzzjsnet.js`可能包含了JavaScript代码,用于实现下拉菜单的交互...
本文将深入探讨如何使用CSS3来实现一个无JavaScript的3级侧边菜单,让读者理解并掌握相关技术。 首先,我们需要明白CSS3(层叠样式表第三版)引入了许多新特性,如选择器增强、过渡效果、动画以及盒模型改进等,...
在本插件中,可能还运用了CSS3的Flexbox或Grid布局系统来控制导航菜单的布局。Flexbox可以轻松实现水平居中、弹性伸缩等布局效果,确保菜单在不同屏幕尺寸上都能保持良好展示。而Grid布局则更适合构建复杂的网格系统...
3. 菜单的可访问性:确保键盘用户可以通过Tab键和箭头键导航菜单。 4. SEO优化:合理使用HTML语义元素,如和,帮助搜索引擎理解页面内容。 总的来说,利用jQuery和CSS制作菜单是一项常见的网页开发任务,结合这两者...
本文将详细讲解如何使用jQuery和CSS来创建这种具有指示方向箭头的下拉菜单。 首先,我们需要了解下拉菜单的基本结构。一个基本的HTML下拉菜单通常由一个主菜单项和若干个子菜单项组成。这些元素可以通过`<ul>`和`...
本资源“37个经典css导航菜单.rar”包含了37种不同的CSS导航菜单设计示例,这些示例是作者在学习过程中积累并整理的,现在分享出来供更多人参考和学习。 CSS(Cascading Style Sheets)是一种样式表语言,用于定义...
在本文中,我们将深入探讨如何使用CSS3来创建一款精美的图标菜单,它具有下拉展开、收缩切换的特效,并且包含弹性动画效果。这款特效完全由CSS3实现,不依赖任何JavaScript代码,展现了CSS3的强大功能。 首先,让...
以上就是使用jQuery制作垂直箭头菜单的基本步骤。通过结合HTML、CSS和jQuery,我们可以创建出既美观又功能丰富的菜单系统,提升网站的用户体验。在实际项目中,你还可以根据需要进行更多的定制,如添加动画效果、...
本文将深入探讨如何使用纯CSS技术创建不规则形状排列的菜单导航,这四种不同的风格可以为您的网站增添独特的视觉效果和用户体验。 1. **圆角矩形与多边形组合**: CSS3中的`border-radius`属性可以让我们轻松实现...
而CSS下拉菜单作为导航条的扩展,可以有效地组织大量链接,提高用户体验。本篇文章将详细探讨五款美观且实用的CSS横向下拉菜单导航条的设计方法。 1. **基础CSS下拉菜单** CSS下拉菜单的基础构建主要依赖于`<ul>`...