`
mimang2007110
  • 浏览: 237227 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

CSS带箭头的导航菜单

阅读更多
<!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>呵呵</div></li> 
		<li class="li_out"><div>呵呵   File</div></li> 
		<li class="li_out"><div>呵呵   Account</div></li> 
		<li class="li_out"><div>呵呵   呵呵呵呵</div></li> 
		<li class="li_out"><div>呵呵   呵呵呵呵</div></li> 
	</ul>


</body>
</html>

 

分享到:
评论
1 楼 墨子宇 2011-11-24  
貌似不是带有箭头的

相关推荐

    css3箭头菜单效果.rar

    【CSS3箭头菜单效果详解】 在Web开发中,菜单导航是网站布局的重要组成部分,它为用户提供直观的交互路径。...通过巧妙地组合和应用这些技术,我们可以创造出既实用又美观的导航菜单,提升用户的浏览体验。

    css制作带箭头的css边框

    1. **网站导航菜单**:为下拉菜单添加箭头指示符。 2. **提示框**:用于提示用户注意特定信息或操作时,增强交互性和美观性。 3. **内容区域划分**:为页面的不同部分划分边界,同时增加视觉效果。 4. **装饰元素**...

    jquery带箭头下拉菜单.rar

    《jQuery实现带箭头的下拉菜单详解》 在网页设计中,下拉菜单是一种常见的交互元素,它能够有效地组织和展示大量的导航选项。而利用jQuery实现带箭头的下拉菜单,则可以让用户体验更加友好,视觉效果更加精致。本文...

    css3箭头菜单效果.zip

    箭头菜单在网站设计中非常常见,它可以提供清晰的导航结构,帮助用户更直观地理解页面层次。下面我们将详细探讨如何使用CSS3来创建这样的箭头菜单效果。 首先,HTML5是构建网页的基础,它提供了语义化的标签,如、...

    js+css+div导航菜单

    标题中的"js+css+div导航菜单"是指一种利用JavaScript(js)、层叠样式表(css)和定义网页布局的元素共同构建的交互式网站导航菜单。这种菜单能够提供动态效果,增强用户体验,使用户更容易浏览和访问网站的不同...

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

    在本插件中,可能还运用了CSS3的Flexbox或Grid布局系统来控制导航菜单的布局。Flexbox可以轻松实现水平居中、弹性伸缩等布局效果,确保菜单在不同屏幕尺寸上都能保持良好展示。而Grid布局则更适合构建复杂的网格系统...

    CSS3多级竖直图标导航菜单特效

    本篇将详细讲解如何利用CSS3来创建一款响应式的多级竖直图标导航菜单特效。 首先,让我们了解一下CSS3的关键特性在这个特效中的应用: 1. **选择器增强**:CSS3引入了新的选择器,如`:hover`,`:active`,`:focus`...

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

    【描述】该特效的核心在于通过箭头按钮的控制,实现图片和导航菜单的上下滚动切换。当用户点击箭头按钮,菜单项不会简单地水平或垂直滑动,而是沿着预先定义的曲线路径进行动画过渡。这种设计不仅增加了视觉吸引力,...

    CSS jQuery带箭头翻转动画的二级下拉菜单.rar

    CSS jQuery共同实现的一款带动画效果的菜单,菜单上的箭头会翻转的动画二级下拉菜单,风格十分简洁,几乎没有使用图片美化。菜单颜色若要修改,可直接修改CSs代码即可。菜单动画效果的实现主要是引入了jquery插件来...

    JavaScript实现鼠标滑过带箭头的纵向3级导航菜单源码

    本资源提供了一种JavaScript实现的鼠标滑过带箭头的纵向3级导航菜单的源码,旨在帮助开发者创建具有视觉吸引力且易于操作的多级导航结构。 首先,我们需要理解JavaScript的基本概念。JavaScript是一种广泛使用的轻...

    漂亮的CSS + XHTML导航菜单

    本文将深入探讨如何利用CSS(层叠样式表)和XHTML(可扩展超文本标记语言)来创建美观且功能强大的导航菜单。同时,我们还会提及到JavaScript和jQuery插件在实现动态效果中的应用。 首先,让我们关注CSS。CSS是一种...

    div+css多级实用导航菜单样式

    "div+css"是一种常见的网页布局技术,用于构建高效、美观且响应式的导航菜单。本篇将深入探讨如何利用div和css创建多级实用导航菜单,并确保其在各种浏览器中的兼容性。 一、HTML 结构 首先,我们需要创建一个基本...

    国外一款精致的下拉导航菜单(JS+CSS)

    ### 国外一款精致的下拉导航菜单(JS+CSS) #### 一、概述 本文将详细介绍一个由JavaScript和CSS构建的国外精致下拉导航菜单的设计思路与实现方法。此菜单具备良好的兼容性,能够在IE浏览器及Firefox等现代浏览器...

    带箭头的下拉菜单

    例如,`header_bg.gif`和`body_bg.gif`可能用于设置背景图片,`topnav_hover.gif`可能是导航菜单项悬停时的背景效果。`dropdown_linkbg.gif`可能用于下拉菜单链接的背景,`topnav_bg.gif`可能是顶部导航栏的背景。...

    至少60种以上css经典导航菜单

    CSS(层叠样式表)是实现这些导航菜单视觉效果和交互功能的关键技术。本资源提供了至少60种以上的CSS经典导航菜单源代码,为开发者提供了丰富的灵感和实践案例。 1. **基础样式导航**:基础的CSS导航菜单通常涉及到...

    漂亮的css+div右则树形导航菜单

    在这个案例中,CSS被用来控制导航菜单的外观,包括但不限于以下几点: 1. **布局**:CSS可以设置菜单的定位,使其固定在页面的右侧。这通常通过`position`属性来实现,比如`position: fixed`或`position: absolute`...

    带小箭头的大型滑出下拉菜单,纯CSS实现.rar

    带小箭头的大型滑出导航菜单,纯CSS实现,只是没有使用JS,图片当然要用哦!也有种下拉菜单的感觉,这种大型菜单在联想、Dell、佳能等官方网站看到过,可以对某一产品进行详细的分类导航,让用户在网站首就可轻易...

    37个经典css导航菜单.rar

    本资源“37个经典css导航菜单.rar”包含了37种不同的CSS导航菜单设计示例,这些示例是作者在学习过程中积累并整理的,现在分享出来供更多人参考和学习。 CSS(Cascading Style Sheets)是一种样式表语言,用于定义...

    css3箭头菜单效果特效代码

    在本示例中,"css3箭头菜单效果特效代码"着重于使用CSS3来创建具有动态箭头效果的下拉菜单。这种菜单效果能够提升用户界面的交互性和吸引力,尤其适用于网站导航。 首先,我们来了解一下CSS3中的箭头制作方法。通常...

    CSS3扁平化面包屑菜单导航 菜单很精巧

    面包屑菜单一般贯穿整个网站,可以很清晰地描述访客的当前层级目录,让用户更清楚地了解网站各个频道之间的关系。这款CSS3面包屑菜单十分精巧,它采用了扁平化设计,让...该CSS3面包屑菜单的箭头也是用纯CSS3代码实现。

Global site tag (gtag.js) - Google Analytics