Jump to content
vBWarez - Rest In Peace

Recommended Posts

This code adds a transparent centered right side floating menu to website.

[img]http://s32.postimg.org/46zh8l1wl/Clipboard01.jpg[/img]

AdminCP
Styles and Themes / Style Manage
Select your Style and chose Edit Template
Scroll down to head_include, double click

Copy this code-
[CODE]
<!-- Start Floating Menu -->
<style type="text/css">
#floatmenu {
position: fixed;
right: 0;
top: 50%;
width: 8em;
margin: -2.5em 0 0 0;
z-index: 5;
background: hsla([COLOR="#DDA0DD"]232, 75%, 45%[/COLOR], 0.3);
color: yellow;
font-weight: bold;
font-size: large;
text-align: left;
border: solid hsla([COLOR="#DDA0DD"]232, 75%, 45%[/COLOR], 0.2);
border-right: none;
padding: 0.5em 0.5em 0.5em 2.5em;
box-shadow: 0 1px 3px #202020;
border-radius: 3em 0.5em 0.5em 3em;
}
#floatmenu li { margin: 0 }
#floatmenu a { color: inherit }

/* Make menu absolute, not fixed, on IE 5 & 6 */
#floatmenu { position: absolute }
*>#floatmenu { position: fixed }

p.stb { text-indent: 0; margin-top: 0.83em }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }
</style>

<ul id=floatmenu>
<li><a href="[COLOR="#00FFFF"]#[/COLOR]">[COLOR="#FFA500"]Section 1[/COLOR]</a>

<li><a href="[COLOR="#00FFFF"]#[/COLOR]">[COLOR="#FFA500"]Section 2[/COLOR]</a>

<li><a href="[COLOR="#00FFFF"]#[/COLOR]">[COLOR="#FFA500"]Section 3[/COLOR]</a>
</ul>
<!-- End Floating Menu -->
[/CODE]

At the start of the head_include editor window, paste the code.
You must add [COLOR="#00FFFF"]links[/COLOR] and short [COLOR="#FFA500"]description[/COLOR].

Colour of the menu is controlled by [COLOR="#DDA0DD"]HSLA values[/COLOR].
Learn about HSLA here [url]https://css-tricks.com/yay-for-hsla/[/url]
Go here for easy tool to pick colours to match your sites theme. [url]https://css-tricks.com/examples/HSLaExplorer/[/url]

More links may be added, but this size is good for mobile device compatibility.

Click Save and reload site to see new menu.

This code should work in all versions of vB and most sites in general with CCS support.
Link to post
Share on other sites
This is an updated version.
It includes 2 major changes.
First, it employs vB specific code to prevent the menu from appearing unless a user is logged into the forum.
Second, because of user feedback who use cellphones complain that the menu gets in the way, I have added code to make most of the menu slide off screen until the mouse passes over.
The same rules above apply.

[CODE]
<!-- Start Floating Menu -->
<vb:if condition="is_member_of($user, 2)">
<style type="text/css">
#floatmenu {
position: fixed;
right: 0;
top: 50%;
margin: -2.5em 0 0 0;
z-index: 5;
background: hsla(232, 75%, 45%, 0.3);
color: yellow;
font-weight: bold;
font-size: large;
text-align: left;
border: solid hsla(232, 75%, 45%, 0.2);
border-right: none;
padding: 0.5em 0.5em 0.5em 2.5em;
box-shadow: 0 1px 3px #202020;
border-radius: 3em 0.5em 0.5em 3em;
width: 0em;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#floatmenu:hover {
position: fixed;
right: 0;
top: 50%;
margin: -2.5em 0 0 0;
z-index: 5;
background: hsla(232, 75%, 45%, 0.3);
color: yellow;
font-weight: bold;
font-size: large;
text-align: left;
border: solid hsla(232, 75%, 45%, 0.2);
border-right: none;
padding: 0.5em 0.5em 0.5em 2.5em;
box-shadow: 0 1px 3px #202020;
border-radius: 3em 0.5em 0.5em 3em;
width: 8em;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}

#floatmenu li { margin: 0 }
#floatmenu a { color: inherit }

/* Make menu absolute, not fixed, on IE 5 & 6 */
#floatmenu { position: absolute }
*>#floatmenu { position: fixed }

p.stb { text-indent: 0; margin-top: 0.83em }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }
</style>

<ul id=floatmenu>
<li><a href="/forum/boards/gaming">Games</a>

<li><a href="/forum/boards/servers/151-smtp-e-mail-server">EMail</a>

<li><a href="/forum/boards/servers/44082-calendar">Calendar</a>
</ul>
</vb:if>
<!-- End Floating Menu -->
[/CODE]
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...