How to realize a horizontal top menu single line with scroll buttons ?

Alex Zaeper August 29, 2011

Hi I asked once to make the navitabs scollable.

Now I made a static menu on top of every page with a fixed width. I made a scroll arrows for left and right if there are so much tabs that they dont fit into the fixed width.

The problem is that i used javascript and this doesn't work. And also the active tab isn't hightlighted.

Is there another way to realize a top menu which is left-right scrollable ?

Thanks

2 answers

1 vote
Alex Zaeper September 18, 2011

I customized the page decorator with this code:

<script type="text/javascript">

scrollStep = 3
timerLeft = ""
timerRight = ""

function scrollDivLeft(id){
clearTimeout(timerRight)
document.getElementById(id).scrollLeft-=scrollStep
timerRight=setTimeout("scrollDivLeft('"+id+"')",10)
}
function scrollDivRight(id){
clearTimeout(timerLeft)
document.getElementById(id).scrollLeft+=scrollStep
timerLeft=setTimeout("scrollDivRight('"+id+"')",10)
}

function stopMe(){
clearTimeout(timerRight)
clearTimeout(timerLeft)
}

</script>

<div id="left-scroll" onclick="scrollDivLeft('topthemen-div')" onmouseout="stopMe()">
<img src="arrow-left.png" height="35" border="0" />
</div>
<div id="top-div">
<table id="top-tab" border="0"><tr>
#foreach ($value in $rootChildren)
#if( $value == $page || $value == $parentPage || $value == $grandparentpage || $value == $greatgrandparentpage )
<td class="top-active"><a href="$rootUrl$value.title">$value.title</a></td>
#else
<td class="top-notakcive"><a href="$rootUrl$value.title">$value.title</a></td>
#end
#end
</tr>
</table>
</div>
<div id="right-scroll" onclick="scrollDivRight('topthemen-div')" onmouseout="stopMe()">
<img src="arrow-right.png" height="35" border="0" />
</div>

I made a table with overflow and at the left and right end divs as scroll buttons.

The only plugin I used is the voodoo plugin for the grandparentpage and greatgrandparentpage but this is only for my navigation hierarchy.

0 votes
EddieW
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 15, 2011

What are you using to implement the menu? is this a plugin with web-ui modules or just some template/theme hacking?

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events