8 Oct
2013
8 Oct
'13
12:04 p.m.
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.
17 Oct
17 Oct
7:54 a.m.
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-tp7587450p758…
Sent from the XWiki- Users mailing list archive at Nabble.com.
7:55 a.m.
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-tp7587450p758…
Sent from the XWiki- Users mailing list archive at Nabble.com.
24 Oct
24 Oct
7:16 a.m.
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-tp7587450p758…
Sent from the XWiki- Users mailing list archive at Nabble.com.
30 Oct
30 Oct
7:25 a.m.
-bump-
--
View this message in context:
http://xwiki.475771.n2.nabble.com/Collapsable-Sidemenu-Panels-tp7587450p758…
Sent from the XWiki- Users mailing list archive at Nabble.com.
4071
days inactive
4093
days old
4 comments
1 participants
participants (1)
-
Hamster