jQuery 菜单 - 如何在菜单上放置箭头以表示子菜单？
Posted
技术标签:
【中文标题】jQuery 菜单 - 如何在菜单上放置箭头以表示子菜单？【英文标题】：jQuery menu - How can I put arrows on menu to denote submenus? 【发布时间】：2014-09-29 18:48:00 【问题描述】：在我的菜单上，没有指示菜单之一（父级）是否有子菜单（子级）。例如，在“查看”菜单下的 FireFox 和“工具”菜单下的 Chrome 中会出现箭头。我的问题是如何在存在子菜单的菜单上显示箭头？
HTML
<body>
<div id="container">
<div id="nav">
<ul id="navList">
<li><a href="#">Home</a>
<!-- This is the sub nav -->
<ul class="listTab">
<li><a href="#">About This Template Here</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<!-- This is the sub nav -->
<ul class="listTab">
<li><a href="#">About This Template Here</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">jQuery</a>
<ul class="listTab">
<li><a href="#">About This Template Here</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a>
<!-- This is the sub nav -->
<ul class="listTab">
<li><a href="#">About This Template Here</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">Porfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
CSS
#container
width: 1000px;
overflow: hidden;
ul
margin: 0;
padding: 0;
#nav
width: 330px;
float: left;
margin: 50px 0 0;
#navList li
list-style: none;
margin: 0 0 10px;
position: relative;
float: left;
#navList a
text-decoration: none;
color: #ffffff;
background-color: #333;
padding: 5px;
display: block;
width: 250px;
#navList a:hover
background-color: #06F;
#navList ul, #navList ul ul
display: none;
position: absolute;
top: 0;
left: 280px;
background-color: #333;
.listTab
z-index: 100;
#navList .listTab li
margin: 0;
#navList .listTab a, #navList .listTab a:hover
width: 250px;
#navList .listTab a
padding: 5px 5px 5px 10px;
#navList li:hover ul ul, #navList li:hover ul ul ul, #navList li:hover ul ul ul ul
display: none;
#navList li:hover ul, #navList li li:hover ul, #navList li li li:hover ul, #navList li li li li:hover ul
display: block
jQuery
jQuery
$(document).ready(function($)
//Menu animation
$('#navList ul').css(display: "none"); //Fix Opera
$('#navList li').hover(function()
$(this).addClass('addPosition');
$(this).find('a').stop().animate('width' : "280");
$(this).find('ul:first').css(visibility : "visible", display : "none").show(400);
, function()
$(this).find('ul:first').css(visibility : "hidden").hide(400);
$(this).find('a').stop().animate('width' : "250");
$(this).removeClass('addPosition');
);
);
【问题讨论】：
【参考方案1】：尝试在菜单上插入一些 unicode 字符？
此帖子答案有两个主要箭头：What characters can be used for up/down triangle (arrow without stem) for display in HTML?
示例Home Demo
<li><a href="#">Home ▼</a>
<!-- This is the sub nav -->
<ul class="listTab">
<li><a href="#">About This Template Here</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
从那里，您可以修改字体大小和位置，以根据自己的喜好移动箭头。使用这样的字符对于您的菜单将非常轻量级。 :)
【讨论】：
我喜欢你的想法，只是我希望箭头指向一边，所以 '►' 而不是 '▼' 啊我的坏哈哈，我很高兴你明白了。享受吧！【参考方案2】：这些只是可以分配到您的li 的背景，然后定位的图像：
#hasSubmenu
background-image:url('images/arrow.png');
background-position:center right;
【讨论】：
【参考方案3】：我们可以借助 CSS 中的 after 获得
#navList li > a:after
content: '>';
float:right;
Above code adds an arrow to every link
#navList li > a:only-child:after
content: '';
Above code removes the arrow when the link is the only child
DEMO
【讨论】：
以上是关于jQuery 菜单 - 如何在菜单上放置箭头以表示子菜单？的主要内容，如果未能解决你的问题，请参考以下文章