[xwiki-users] Collapsable Sidemenu/Panels
I would like to create a collapsable sidemenu/panels for our wiki. The "main area" should be maximized and the sidemenu should only be like 40px wide. To see what I am trying to accomplish, create a new page and paste the following code/text ***** {{html wiki="true"}} <div id="menu"> {{spoiler title="TOC"}}{{toc depth="2"/}}{{/spoiler}} </div> {{/html}} = Chapter 1 = Text == Chapter 1.1 == Text == Chapter 1.2 == Text = Chapter 2 = Text = Chapter 3 = Text == Chapter 3.1 == Text == Chapter 3.2 == Text = Header 4 = Text = Header 5 = Text ***** Now add an XWiki.StyleSheetExtension to that page and add the following CSS to it: #menu { position: fixed; right: 0; top: 150px; padding-left: 5px; background-color: rgb(120,120,120); border-top-left-radius: 10px; border-bottom-left-radius: 10px; z-index:999; } If you would refresh that page, you will see a "collapsable menu" (the TOC). I would realy like to expand this and add more menu-items, preferably with ICONS. If anyone got any suggestions, I am all ears! Thanks! -- View this message in context: http://xwiki.475771.n2.nabble.com/Collapsable-Sidemenu-Panels-tp7587450.html Sent from the XWiki- Users mailing list archive at Nabble.com.
I have been playing around with a StyleSheetExtension, to modify the CSS which controls the "look and feel" of the (rightside) panels. I am allmost there, but I am facing some 'problems'. 1) I want the panel to be "on-top" of all, but there are items (for example the activity stream) which are displayed in front of my panels. I have tried to use the z-index (as can be seen in the CSS), but to no avail. 2) I would like to show an image/icon/FontAwesome in the header of the panel, but I can't get that to work. Here's the content of my StyleSheetExtension: .panel { width: 380px; display: block; z-index: 9999; } .collapsed h1.xwikipaneltitle { width: 40px; height: 40px; margin-top: 0px; margin-bottom: 0px; margin-left: 340px; margin-right: 0px; display: block; float: right; } #rightPanels { width: 380px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: -380px; float: right; z-index: 9999; } #rightPanels .panel, #editPanels .panel { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; z-index: 9999; } #body.hideleft #contentcolumn .main { margin: 0 60px 0 0; } -- View this message in context: http://xwiki.475771.n2.nabble.com/Collapsable-Sidemenu-Panels-tp7587450p7587... Sent from the XWiki- Users mailing list archive at Nabble.com.
Link to topic of second 'problem' <http://xwiki.475771.n2.nabble.com/Use-FontAwesome-in-Panel-header-td7587514.html> -- View this message in context: http://xwiki.475771.n2.nabble.com/Collapsable-Sidemenu-Panels-tp7587450p7587... Sent from the XWiki- Users mailing list archive at Nabble.com.
I could still need help with making the panels "always on top"! Does anybody have a clue? -- View this message in context: http://xwiki.475771.n2.nabble.com/Collapsable-Sidemenu-Panels-tp7587450p7587... Sent from the XWiki- Users mailing list archive at Nabble.com.
-bump- -- View this message in context: http://xwiki.475771.n2.nabble.com/Collapsable-Sidemenu-Panels-tp7587450p7587... Sent from the XWiki- Users mailing list archive at Nabble.com.
participants (1)
-
Hamster