在我的菜单上，没有指示其中一个菜单(父菜单)是否有子菜单(子菜单)。例如，在 FireFox 中的“ View ”菜单下和在 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');
});
});
最佳答案
尝试在菜单上插入一些 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>
从那里，您只需修改字体大小和位置即可根据您的喜好移动箭头。使用这样的字符将使您的菜单变得非常轻量级。 :)
关于javascript - jQuery 菜单 - 如何在菜单上放置箭头来表示子菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25167073/