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
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
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
Home ▼
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. :)
No comments:
Post a Comment