StoryMenu passage for right side UI

Authoring Twine
1

Twine Version: 2.2.1
Story Format: Sugarcube

The title basically explains itself. How would I have something like the StoryMenu passage for the right ui bar?

2

Which “Right UI Bar” implementation are you using?

3

I believe that they’re actually asking for help with creating such an implementation.

Gulture, you might want to use the right-side UI bar implementation that Greyelf posted here.

Hope that helps! :slight_smile:

4

This is the right ui bar I already have

}
#right-ui-bar {
	background-color: #222;
	border-right: 1px solid #444;
	text-align: center;
}
#right-ui-bar-toggle {
	font-size: 1.2em;
	line-height: inherit;
	color: #eee;
	background-color: transparent;
	border: 1px solid #444;
}
#right-ui-bar-toggle:before {
    font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	speak: none;
}

/* Layout and Positioning of the Right UI Bar. */
#right-ui-bar {
	position: fixed;
	z-index: 50;
	top: 0;
	right: 0;
	width: 15em;
	height: 100%;
	margin: 0;
	padding: 0;
	-webkit-transition: right .2s ease-in;
	-o-transition: right .2s ease-in;
	transition: right .2s ease-in;
}
#right-ui-bar-tray {
	position: absolute;
	top: .2em;
	left: 0;
	right: 0;
}
#right-ui-bar-toggle {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	border-left: none;
	padding: .3em .45em .25em;
	-webkit-user-select: none;
}
#right-ui-bar-toggle:before {
	content: "\e81e";
}
#right-ui-bar-body {
	height: 90%;
	height: calc(100% - 2.5em);
	margin: 2.5em 0;
	padding: 0 1.5em;
}
#right-ui-bar-body {
	line-height: 1.5;
	overflow: auto;
}

#story {
	margin-right: 20em;
}

/* Stowing of the Right UI Bar. */
#right-ui-bar.stowed {
	right: -13em;
}
#right-ui-bar.stowed #right-ui-bar-toggle {
	padding: .3em .55em .25em .35em;
}
#right-ui-bar.stowed #right-ui-bar-toggle:before {
	content: "\e81d";
}
#right-ui-bar.stowed #right-ui-bar-body {
	visibility: hidden;
	-webkit-transition: visibility .2s step-end;
	-o-transition: visibility .2s step-end;
	transition: visibility .2s step-end;
}

#right-ui-bar.stowed~#story {
	margin-right: 4.5em;
}

I wanna be able to use the StoryMenu passage on it.

5

That’s just the CSS, you’ll also need to include the JavaScript code on the page I linked to within your JavaScript section.

Once you have that, then, instead of using the StoryMenu passage, you’d use the StoryRightSidebar passage to add things to that right-hand UI bar.

Does that make sense now?

6

Yeah, I forgot about the JavaScipt part, but that’s not what this is about. I have the right ui bar, it works. I’ve figured out the StoryRightSidebar now, but I want it to work like StoryMENU, where it has the button thingies. How can I do that?

7

Just use <<button>> macros within the StoryRightSidebar passage and then you’ll have buttons there.

You’ll have to be a bit more specific than “button thingies” about what you want the buttons to do if the above doesn’t answer your question.