Good Morning Everyone,
I am struggling a few hours with a problem, which solution isn't that
easy as I initial though.
The following example list is generated by backend code.
<ul id="nav">
<li>
<a id="hyperlink" class="navlink" href="/home" title="">Home</a>
</li>
<li><a id="hyperlink" class="navlinkparent" href="" title="">Folder
A</a>
<ul>
<li><a id="hyperlink" class="navsublinkparent" href="/folder_a/
page1" title="">Page1</a>
</li>
<li><a id="hyperlink" class="navsublinkparent" href="/folder_b/
page2" title="">Page2</a>
</li>
<li><a id="hyperlink" class="navsublinkparent" href=""
title="">Folder B</a>
<ul>
<li>
<a id="hyperlink" class="navsubsublink" href="/folder/page1"
title="">Page1</a>
</li>
<li>
<a id="hyperlink" class="navsubsublink" href="/folder/page2"
title="">Page2</a>
</li>
<li>
<a id="hyperlink" class="navsubsublink" href="/folder/page3"
title="">Page3</a>
</li>
</ul>
</ul>
Thats only a shortened version. JQuery is used to create a horizontal
dropdown menu. Up to this part everything is working as expected.
To improve the usability I want to add two kinds of arrows to the
menu. One arrow down for the top elements and one arrow right for
child entries. That part should accomplished by the following
snippets.
$("ul > li > a.navlinkparent").css({
"background-image": "url(/img/nav_arrow_down.gif)",
"background-repeat": "no-repeat",
"background-position": "right center"
});
$("#nav ul > li > a.navsublinkparent").css({
"background-image": "url(/img/nav_arrow_right.gif)",
"background-repeat": "no-repeat",
"background-position": "right center"
});
The problem I am facing right know is, that not every parent has
childs and therefor it shouldn't get an arrow assigned. I tried
various filters but without any luck.
Does anyone has a hint on solving?
best regards,
Gordon
