CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
SPQR
SPQR

Reputation: 524

jQuery menu - How can I put arrows on menu to denote submenus?

On my menu, there is no indication if one of the menus (parent) has a sub menu (children). As an example, in FireFox under the View menu and in Chrome under the Tools menu the arrows appear. My question is how can I have arrows appear on menus where submenus exist?

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');
            });
        });

Upvotes: 2

Views: 1990

Answers (3)

Siva.G ツ
Siva.G ツ

Reputation: 839

We could obtain with the help of after available in CSS

#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

Upvotes: 0

Austin
Austin

Reputation: 3080

Try inserting some unicode characters on the menu's?

This post answer has two main arrows : What characters can be used for up/down triangle (arrow without stem) for display in HTML?

Example 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>

From there, you can just modify font-sizes and positioning to move that arrow around to your liking. Using characters like this will be very lightweight for your menu. :)

Upvotes: 2

Amin Jafari
Amin Jafari

Reputation: 7207

those are just images that can be assigned to your li's background, and then be positioned:

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

Upvotes: 1

Related Questions