<!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>
分享到:
相关推荐
【CSS3箭头菜单效果详解】 在Web开发中,菜单导航是网站布局的重要组成部分,它为用户提供直观的交互路径。...通过巧妙地组合和应用这些技术,我们可以创造出既实用又美观的导航菜单,提升用户的浏览体验。
1. **网站导航菜单**:为下拉菜单添加箭头指示符。 2. **提示框**:用于提示用户注意特定信息或操作时,增强交互性和美观性。 3. **内容区域划分**:为页面的不同部分划分边界,同时增加视觉效果。 4. **装饰元素**...
《jQuery实现带箭头的下拉菜单详解》 在网页设计中,下拉菜单是一种常见的交互元素,它能够有效地组织和展示大量的导航选项。而利用jQuery实现带箭头的下拉菜单,则可以让用户体验更加友好,视觉效果更加精致。本文...
箭头菜单在网站设计中非常常见,它可以提供清晰的导航结构,帮助用户更直观地理解页面层次。下面我们将详细探讨如何使用CSS3来创建这样的箭头菜单效果。 首先,HTML5是构建网页的基础,它提供了语义化的标签,如、...
标题中的"js+css+div导航菜单"是指一种利用JavaScript(js)、层叠样式表(css)和定义网页布局的元素共同构建的交互式网站导航菜单。这种菜单能够提供动态效果,增强用户体验,使用户更容易浏览和访问网站的不同...
在本插件中,可能还运用了CSS3的Flexbox或Grid布局系统来控制导航菜单的布局。Flexbox可以轻松实现水平居中、弹性伸缩等布局效果,确保菜单在不同屏幕尺寸上都能保持良好展示。而Grid布局则更适合构建复杂的网格系统...
本篇将详细讲解如何利用CSS3来创建一款响应式的多级竖直图标导航菜单特效。 首先,让我们了解一下CSS3的关键特性在这个特效中的应用: 1. **选择器增强**:CSS3引入了新的选择器,如`:hover`,`:active`,`:focus`...
【描述】该特效的核心在于通过箭头按钮的控制,实现图片和导航菜单的上下滚动切换。当用户点击箭头按钮,菜单项不会简单地水平或垂直滑动,而是沿着预先定义的曲线路径进行动画过渡。这种设计不仅增加了视觉吸引力,...
CSS jQuery共同实现的一款带动画效果的菜单,菜单上的箭头会翻转的动画二级下拉菜单,风格十分简洁,几乎没有使用图片美化。菜单颜色若要修改,可直接修改CSs代码即可。菜单动画效果的实现主要是引入了jquery插件来...
本资源提供了一种JavaScript实现的鼠标滑过带箭头的纵向3级导航菜单的源码,旨在帮助开发者创建具有视觉吸引力且易于操作的多级导航结构。 首先,我们需要理解JavaScript的基本概念。JavaScript是一种广泛使用的轻...
本文将深入探讨如何利用CSS(层叠样式表)和XHTML(可扩展超文本标记语言)来创建美观且功能强大的导航菜单。同时,我们还会提及到JavaScript和jQuery插件在实现动态效果中的应用。 首先,让我们关注CSS。CSS是一种...
"div+css"是一种常见的网页布局技术,用于构建高效、美观且响应式的导航菜单。本篇将深入探讨如何利用div和css创建多级实用导航菜单,并确保其在各种浏览器中的兼容性。 一、HTML 结构 首先,我们需要创建一个基本...
### 国外一款精致的下拉导航菜单(JS+CSS) #### 一、概述 本文将详细介绍一个由JavaScript和CSS构建的国外精致下拉导航菜单的设计思路与实现方法。此菜单具备良好的兼容性,能够在IE浏览器及Firefox等现代浏览器...
例如,`header_bg.gif`和`body_bg.gif`可能用于设置背景图片,`topnav_hover.gif`可能是导航菜单项悬停时的背景效果。`dropdown_linkbg.gif`可能用于下拉菜单链接的背景,`topnav_bg.gif`可能是顶部导航栏的背景。...
CSS(层叠样式表)是实现这些导航菜单视觉效果和交互功能的关键技术。本资源提供了至少60种以上的CSS经典导航菜单源代码,为开发者提供了丰富的灵感和实践案例。 1. **基础样式导航**:基础的CSS导航菜单通常涉及到...
在这个案例中,CSS被用来控制导航菜单的外观,包括但不限于以下几点: 1. **布局**:CSS可以设置菜单的定位,使其固定在页面的右侧。这通常通过`position`属性来实现,比如`position: fixed`或`position: absolute`...
带小箭头的大型滑出导航菜单,纯CSS实现,只是没有使用JS,图片当然要用哦!也有种下拉菜单的感觉,这种大型菜单在联想、Dell、佳能等官方网站看到过,可以对某一产品进行详细的分类导航,让用户在网站首就可轻易...
本资源“37个经典css导航菜单.rar”包含了37种不同的CSS导航菜单设计示例,这些示例是作者在学习过程中积累并整理的,现在分享出来供更多人参考和学习。 CSS(Cascading Style Sheets)是一种样式表语言,用于定义...
在本示例中,"css3箭头菜单效果特效代码"着重于使用CSS3来创建具有动态箭头效果的下拉菜单。这种菜单效果能够提升用户界面的交互性和吸引力,尤其适用于网站导航。 首先,我们来了解一下CSS3中的箭头制作方法。通常...
面包屑菜单一般贯穿整个网站,可以很清晰地描述访客的当前层级目录,让用户更清楚地了解网站各个频道之间的关系。这款CSS3面包屑菜单十分精巧,它采用了扁平化设计,让...该CSS3面包屑菜单的箭头也是用纯CSS3代码实现。