Change order of olympos menu

[Klenkes]

Hi everyone,

i want to customize the Olympos menu.
My goal is to have several menu items with the layout of the "Settings" menu . This is not the big problem .
My problem is that such a menu should be placed at the first position. If I place the "Settings" menu from the Olympos demo at the first position , it is not displayed .
After I changed the IDs , it does not show up as nice as in the demo .

Can anyone tell me what I must do exactly so that the "Settings" menu is at the first position ( instead of the menu item " Olympos Main Menu " ) .

Thanks a lot.

[Klenkes]

Here is a small example which should explain my problem.

I have split the menu in 3 files:
- sidebarmenu.xhtml (layouttabmenu.xhtml in olympos demo)
- submenu1.xhtml
- submenu2.xhtml

When I open the page , the menu is empty . After clicking on " Submenu 1 " the content of submenu1.xhtml appears.

sidebarmenu.xhmtl

Code: Select all

 <ul id="layout-tab-menu">
    <li>
        <a href="#" class="active" rel="submenu-1">
            <i class="icon-speedometer33"></i> 
            <span class="layout-tab-menu-link-text"><span></span> Submenu 1</span>
        </a>
    </li>
    <li>
        <a href="#" rel="submenu-2">
            <i class="icon-chat66"></i>
            <span class="layout-tab-menu-link-text"><span></span> Submenu 2</span>
        </a>
    </li
</ul>
<ui:include src="submenu1.xhtml"/>
<ui:include src="submenu2.xhtml"/>

submenu1.xhtml

Code: Select all

<ul class="layout-tab-submenu" id="submenu-1">
    <li>
        <a class="TexAlCenter">Submenu 1</a>
        <ul>
            <c:set var="root" value="#{request.contextPath}/data/" />
            
            <div class="EmptyBox20"></div>
            <li>
                <a href="#{root}target1.xhtml" class="menulink TexAlCenter">
                    <i class="icon-user7 Yellow Fs30 Wid100 Fnone"></i> Menu 1
                </a>
            </li>
           
            <div class="EmptyBox20"></div>
            <li>
                <a href="#{root}target2.xhtml" class="menulink TexAlCenter">
                    <i class=" icon-user7 Yellow Fs30 Wid100 Fnone"></i> Menu 2
                </a>
            </li>
        </ul>
    </li>
</ul>

submenu2.xhtml

Code: Select all

<ul class="layout-tab-submenu" id="submenu-2">
    <li>
        <a class="TexAlCenter">Submenu 2</a>
        <ul>
            <c:set var="root" value="#{request.contextPath}/data/" />
                
            <div class="EmptyBox20"></div>
                <li>
                    <a href="#{root}target1.xhtml" class="menulink TexAlCenter">
                        <i class="icon-user7 Yellow Fs30 Wid100 Fnone"></i> Menu 1
                    </a>
                </li>
                
                <div class="EmptyBox20"></div>
                <li>
                    <a href="#{root}target2.xhtml" class="menulink TexAlCenter">
                        <i class=" icon-user7 Yellow Fs30 Wid100 Fnone"></i> Menu 2
                    </a>
            </li>
        </ul>
    </li>
</ul>

[mert.sincan]

Please add 'active' to tabmenu which you want to display after opening page.
submenu1.xhtml

Code: Select all

<ul class="layout-tab-submenu active" id="submenu-1">
    ...
</ul>

[Klenkes]

Thank you. Works perfect.

[mert.sincan]

Glad to hear, thanks!