css箭头菜单

最新推荐文章于 2023-06-28 18:42:15 发布
最新推荐文章于 2023-06-28 18:42:15 发布
阅读量241 收藏
点赞数
分类专栏： CSS JavaScript 文章标签： CSS JavaScript jQuery ViewUI

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

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

 

ice_i_snow
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在css中设置箭头,在CSS中使用CSS在当前页面下添加小箭头
weixin_39899630的博客
08-03 899
我有一个菜单，其中一个用于默认状态，另一个用于悬停/活动状态。当前页面就像悬停/活动状态，但在其下方有一个箭头。我无法弄清楚让箭头出现的最佳方式。我尝试了一个边框图像，但由于按钮大小根据菜单项的长度而有所不同，所以看起来并不正确。这里是我用来创建两种不同风格的当前CSS：在CSS中使用CSS在当前页面下添加小箭头.main-nav li a {float: left;font-size: 15px...
css3箭头菜单效果.rar
07-04
css3箭头菜单效果
CSS带箭头的导航菜单
mimang2008110的专栏
02-14 986
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
【CSS】带箭头的二级菜单页面
点滴记忆
04-20 394
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
css3箭头菜单效果特效代码
03-20
在本示例中，"css3箭头菜单效果特效代码"着重于使用CSS3来创建具有动态箭头效果的下拉菜单。这种菜单效果能够提升用户界面的交互性和吸引力，尤其适用于网站导航。 首先，我们来了解一下CSS3中的箭头制作方法。通常...
css3箭头菜单效果.zip
11-17
这个压缩包“css3箭头菜单效果.zip”显然包含了一个利用CSS3实现的箭头菜单效果示例。箭头菜单在网站设计中非常常见，它可以提供清晰的导航结构，帮助用户更直观地理解页面层次。下面我们将详细探讨如何使用CSS3来...
CSS树形菜单
10-10
在这个名为“CSS树形菜单”的项目中，我们主要关注的是如何使用CSS来构建和美化这种交互式的菜单。 首先，要创建一个基础的树形菜单，通常我们需要HTML结构来表示菜单的层级关系。每个菜单项可能包含一个或多个子...
CSS三角箭头应用实践
09-24
主要介绍了CSS三角箭头应用实践,主要分为用来制作对话框箭头和下拉菜单箭头等情况,需要的朋友可以参考下
CSS---二级菜单小箭头制作
maidu_xbd的博客
05-13 1517
二级菜单是网页开发中经常遇到的，那么，如何通过css写一个下图所示的二级菜单样式呢？ 核心内容： （1）transform: rotate(45deg);----旋转45度 （2）border-right: transparent;border-bottom: transparent;---- 将border设置为透明色 （3）position:relative----相对定位会按照元...
带小箭头的大型滑出下拉菜单,纯CSS实现.rar
07-10
带小箭头的大型滑出导航菜单，纯CSS实现，只是没有使用JS，图片当然要用哦！也有种下拉菜单的感觉，这种大型菜单在联想、Dell、佳能等官方网站看到过，可以对某一产品进行详细的分类导航，让用户在网站首就可轻易找到某个产品的型号，进而了解详情。菜单主要用于分类较细较多的地方，比如数码产品分类等，经测试发现，兼容性方面也做的不错，喜欢的要收藏。
菜单栏下拉箭头 css样式
06-28 1339
css利用相对定位 overflow隐藏，制作向下箭头。同理可做上下左右方向箭头 /*html*/ &lt;div class="site-nav-send"&gt; 送至：北京 &lt;span&gt;&lt;b&gt;◇&lt;/b&gt;&lt;/span&gt; &lt;/div&gt; /*css*/ .site-nav-s...
CSS实现带箭头的垂直导航菜单
weixin_34347651的博客
05-29 557
用CSS制作带箭头的菜单主要是实现箭头,下面为代码: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Typ...
CSS 实现“前进/后退”按钮的功能
weixin_30608131的博客
08-28 668
前言：一般的轮播效果中，可以通过序号来进行图片切换。同时，还有两个控制按钮“前进/后退”。 在js环境下，我们会先保存一个图片编号变量，然后通过点击事件来修改这个编号，从而修改要显示的图片。 在纯CSS环境中，我们通常只能使用点击序号来切换图片，无法实现通过变量来切换要显示的图片。接下来将介绍如何使用CSS来解决切换按钮的问题。 1.首先，通过input标签和伪类选择符“+”和“~...
CSS实现菜单箭头动画效果
最新发布
qq_30907143的博客
06-28 1071
悬停一个元素li的时候给另一个元素添加动画
html实现提示框箭头指向，html实现菜单展开收起
weixin_43992507的博客
05-28 1126
前言 提示框箭头指向，及实现左侧菜单展开收起 效果图 实现 这里展开收起操作使用了jquery，引入即可查看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .left-box{ float: left; width: 10%; height: 90vh; b
html下拉栏加箭头,CSS-下拉菜单上的引导3箭头
weixin_30539081的博客
06-03 1781
CSS-下拉菜单上的引导3箭头在引导程序2中，下拉菜单具有向上箭头，如此处所示(我不是在谈论尖晶石)。 现在使用bootstrap 3或最新版git时，在我下面的简单示例或bootstrap主页上的示例中都不存在该箭头。如何使用bootstrap 3重新添加此箭头？MenuabcPS：确切地说，该图片可以在另一篇stackoverflow文章中看到。4个解决方案157 votes您需要在css规则...
带指示箭头的下拉菜单（css）
cotexarm7的专栏
12-29 5097
.wrap { position: relative; background-color: white; border: 1px solid grey; width: 300px; height: 600px; } .triangle1 { display: block; position: absolute; width:
uniapp点击箭头展示下拉菜单
06-01
如果你需要展示一个下拉菜单，并且需要在箭头图标上添加点击事件来展示或隐藏下拉菜单，你可以使用`uniapp`的`v-show`指令和`<transition>`组件来实现。 以下是一个简单的示例代码： ```html <template> <view class="container"> <view class="select" @tap="toggleMenu"> <text>{{ selected }}</text> <image class="arrow" :src="arrowIcon"></image> </view> <transition> <view v-show="menuVisible" class="menu"> <view class="menu-item" v-for="(item, index) in options" :key="index" @tap="selectItem(index)">{{ item }}</view> </view> </transition> </view> </template> <script> export default { data() { return { selected: '请选择', options: ['选项1', '选项2', '选项3'], menuVisible: false, arrowIcon: 'static/images/arrow-down.png' } }, methods: { toggleMenu() { this.menuVisible = !this.menuVisible; if (this.menuVisible) { this.arrowIcon = 'static/images/arrow-up.png'; } else { this.arrowIcon = 'static/images/arrow-down.png'; } }, selectItem(index) { this.selected = this.options[index]; this.menuVisible = false; this.arrowIcon = 'static/images/arrow-down.png'; } } } </script> <style> .container { position: relative; height: 100vh; } .select { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border: 1px solid #ccc; border-radius: 20px; } .arrow { width: 20px; height: 20px; transform: rotate(0deg); transition: transform 0.3s; } .arrow.up { transform: rotate(180deg); } .menu { position: absolute; top: 60px; left: 0; width: 100%; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } .menu-item { height: 50px; line-height: 50px; text-align: center; font-size: 16px; border-bottom: 1px solid #ccc; } </style> ``` 在上述代码中，我们使用了一个`<view>`标签作为下拉菜单的外部容器，并在容器内部使用了一个`<view>`标签作为选择器，并在选择器中添加了一个箭头图标。在箭头图标的`@tap`事件中，我们触发`toggleMenu`方法，用来展示或隐藏下拉菜单。 我们使用了`v-show`指令来控制下拉菜单的显示和隐藏。当`menuVisible`属性为`true`时，下拉菜单会显示，否则会隐藏。在`toggleMenu`方法中，我们将`menuVisible`属性取反，用来切换下拉菜单的显示和隐藏。 我们使用了`<transition>`组件来为下拉菜单添加过渡动画。在下拉菜单中，我们使用了`v-for`指令来循环渲染下拉菜单中的选项，并在选项的`@tap`事件中触发`selectItem`方法，用来选择选项。 在CSS中，我们使用了`transform`属性来旋转箭头图标，并使用`transition`属性来添加动画效果。我们还使用了`position: absolute`属性来使下拉菜单与选择器定位。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值