jQuery 菜单 - 如何在菜单上放置箭头以表示子菜单？答案

【问题标题】：jQuery menu - How can I put arrows on menu to denote submenus?jQuery 菜单 - 如何在菜单上放置箭头以表示子菜单？
【发布时间】：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');
            });
        });

【问题讨论】：

标签： javascript jquery html css menu

【解决方案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>

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

【讨论】：

我喜欢你的想法，只是我希望箭头指向一边，所以 '►' 而不是 '▼'
啊我的坏哈哈，我很高兴你明白了。享受吧！

【解决方案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

【讨论】：