Question

在我的菜单上，没有任何迹象表明其中一个菜单（父母）是否有子菜单（儿童）。例如，在“视图”菜单下的“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');
            });
        });

Answer 1

尝试在菜单上插入一些unicode字符？

这篇帖子的答案有两个主要箭头： What characters can be used for up/down triangle (arrow without stem) for display in HTML?

示例 Home Demo

   <li><a href="#">Home &#x25BC;</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>

从那里，你可以修改字体大小和定位，以根据自己的喜好移动箭头。使用这样的字符对于您的菜单来说非常轻量级。：）

Answer 2

这些只是可以分配到li背景的图片，然后定位：

#hasSubmenu{
    background-image:url('images/arrow.png');
    background-position:center right;
}

Answer 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菜单 - 如何在菜单上放置箭头来表示子菜单？

3 个答案: