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.
Change order of olympos menu
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
submenu1.xhtml
submenu2.xhtml
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"/>
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>
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>
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please add 'active' to tabmenu which you want to display after opening page.
submenu1.xhtml
submenu1.xhtml
Code: Select all
<ul class="layout-tab-submenu active" id="submenu-1">
...
</ul>
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks!
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 7 guests