`
lib
  • 浏览: 135658 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

css箭头菜单

CSSJavaScriptjQuery 
阅读更多

最近公司要对已有的产品进行升级，希望改变一下导航菜单的展现方式。于是，在网上搜索了一下，感觉带箭头的导航菜单方式不错，于是就模仿着写了一个，其实很简单。不废话了，看代码。

<!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没有测试到？欢迎指出，在此先谢谢！

 

  • 大小: 3.6 KB
  • 大小: 3.4 KB
  • 大小: 3.2 KB
分享到：
| 开发随笔
评论
18 楼 mr_sunq 2011-02-22  
firemmet 写道
仔细看下效果，通过现象看本质，问题并没有上边的那么复杂，箭头的方向是一致的，鼠标经过的样式也比较固定，背景为纯色。在现在的前提下没必要搬出大车轮子来用，无非是一些末端的遮盖，简单的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>
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>
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>
11 楼 interjc 2011-01-11  
firemmet 写道
仔细看下效果，通过现象看本质，问题并没有上边的那么复杂，箭头的方向是一致的，鼠标经过的样式也比较固定，背景为纯色。在现在的前提下没必要搬出大车轮子来用，无非是一些末端的遮盖，简单的css即可实现以上的需求。如下:
......


down下来看了下确实不错，不过jquery是现在做web的标配吧，有得用就用嘛，也不损失什么，呵呵～
10 楼 keete 2011-01-11  
学习了。。以后有机会一定要用上
9 楼 firemmet 2011-01-11  
仔细看下效果，通过现象看本质，问题并没有上边的那么复杂，箭头的方向是一致的，鼠标经过的样式也比较固定，背景为纯色。在现在的前提下没必要搬出大车轮子来用，无非是一些末端的遮盖，简单的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="#">&nbsp;</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>
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>
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  
我找样的东西好久了！
发表评论

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

相关推荐

    css3箭头菜单效果.rar

    【CSS3箭头菜单效果详解】 在Web开发中，菜单导航是网站布局的重要组成部分，它为用户提供直观的交互路径。随着CSS3技术的发展，我们能够创建更多动态且富有视觉吸引力的菜单效果，其中箭头菜单就是一种常见的设计...

    css3箭头菜单效果.zip

    这个压缩包“css3箭头菜单效果.zip”显然包含了一个利用CSS3实现的箭头菜单效果示例。箭头菜单在网站设计中非常常见，它可以提供清晰的导航结构，帮助用户更直观地理解页面层次。下面我们将详细探讨如何使用CSS3来...

    纯CSS箭头效果

    ### 纯CSS箭头效果实现方法 在Web开发中，使用CSS来创建美观且功能性的用户界面是一项基本技能。本文将详细介绍如何仅通过CSS来实现一个带有箭头的菜单效果，无需借助任何图片资源或JavaScript代码。这种方法不仅...

    css制作带箭头的css边框

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

    CSS树形菜单

    在这个名为“CSS树形菜单”的项目中，我们主要关注的是如何使用CSS来构建和美化这种交互式的菜单。 首先，要创建一个基础的树形菜单，通常我们需要HTML结构来表示菜单的层级关系。每个菜单项可能包含一个或多个子...

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

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

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

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

    css3箭头菜单效果特效代码

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

    css3点击按钮左侧菜单收缩展出滑动特效

    3. **Transition过渡**：当菜单展开和收起时，CSS3的`transition`属性可以添加平滑的过渡效果，使得菜单的展开和收缩过程更加自然。`transition`可以设置一个或多个CSS属性，如`width`, `opacity`等，并指定过渡时间...

    vista CSS二级菜单

    2. `1121.jpg`：可能是一个用于美化菜单的背景图片，如分割线、箭头等。 3. `images`：这是一个目录，可能包含了其他与菜单相关的图像资源，如图标或装饰性的图像。 综上所述，"vista CSS二级菜单"项目涉及到了HTML...

    带箭头的下拉菜单

    使用CSS可以控制菜单的布局、颜色、边框、阴影、过渡效果等，实现箭头效果通常需要用到伪元素`::before`或`::after`。 3. JavaScript 动态效果：`wwwzzjsnet.js`可能包含了JavaScript代码，用于实现下拉菜单的交互...

    CSS3实现3级菜单

    本文将深入探讨如何使用CSS3来实现一个无JavaScript的3级侧边菜单，让读者理解并掌握相关技术。 首先，我们需要明白CSS3（层叠样式表第三版）引入了许多新特性，如选择器增强、过渡效果、动画以及盒模型改进等，...

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

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

    jquery+css 制作菜单

    3. 菜单的可访问性：确保键盘用户可以通过Tab键和箭头键导航菜单。 4. SEO优化：合理使用HTML语义元素，如和，帮助搜索引擎理解页面内容。 总的来说，利用jQuery和CSS制作菜单是一项常见的网页开发任务，结合这两者...

    jquery带箭头下拉菜单.rar

    本文将详细讲解如何使用jQuery和CSS来创建这种具有指示方向箭头的下拉菜单。 首先，我们需要了解下拉菜单的基本结构。一个基本的HTML下拉菜单通常由一个主菜单项和若干个子菜单项组成。这些元素可以通过`&lt;ul&gt;`和`...

    37个经典css导航菜单.rar

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

    CSS3图标菜单下拉展开收缩切换特效

    在本文中，我们将深入探讨如何使用CSS3来创建一款精美的图标菜单，它具有下拉展开、收缩切换的特效，并且包含弹性动画效果。这款特效完全由CSS3实现，不依赖任何JavaScript代码，展现了CSS3的强大功能。 首先，让...

    jQuery制作垂直箭头菜单.zip

    以上就是使用jQuery制作垂直箭头菜单的基本步骤。通过结合HTML、CSS和jQuery，我们可以创建出既美观又功能丰富的菜单系统，提升网站的用户体验。在实际项目中，你还可以根据需要进行更多的定制，如添加动画效果、...

    不规则形状排列的css菜单导航

    本文将深入探讨如何使用纯CSS技术创建不规则形状排列的菜单导航，这四种不同的风格可以为您的网站增添独特的视觉效果和用户体验。 1. **圆角矩形与多边形组合**： CSS3中的`border-radius`属性可以让我们轻松实现...

    五款漂亮的CSS横向下拉菜单导航条

    而CSS下拉菜单作为导航条的扩展，可以有效地组织大量链接，提高用户体验。本篇文章将详细探讨五款美观且实用的CSS横向下拉菜单导航条的设计方法。 1. **基础CSS下拉菜单** CSS下拉菜单的基础构建主要依赖于`&lt;ul&gt;`...

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