Live Demo:
Okay so I completely re-coded the menu feature making it alot easier to customise!
It’s functionally identical to the original but all visible elements can be customised without trawling through the code (see image below) and also supports up to 10 menu items (minimum 1) without the animations distorting.
Source Code
<span style="font-size:; color: rgb(50, 50, 50); display: block; width: 300px; height: 280px; padding: 50px 30px 30px 30px; background: white; position: relative; overflow: show; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">
<span style="font-size:; display: block; width: 100%; height: auto; min-height: 690px; position: absolute; top: 0; left: 0;">
<span style="font-size:; display: block; box-sizing: border-box; padding-left: 20px; height: 100%; width: 100%; position: absolute; pointer-events: none;">
<span style="font-size:; display: block; position: relative; width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27><style>:root {<!--
--> <!--
~~~ CUSTOMISATION ~~~
--> --number-of-menu-items: 3; <!--
--> --font-family: Arial; <!--
--> --text-color: white; <!--
--> --background-color: rgb(60,60,60); <!--
--> --divider-color: rgb(170,170,170); <!--
--> --menu-icon-color:black; <!--
--> --menu-icon-color-active: rgb(170,170,170); <!--
--> <!--
-->}</style><g class=%27menu_icon%27><rect class=%27icon_background%27 y=%2712%27/><rect class=%27menu_bar%27 x=%275%27 y=%2720%27 style=%27transform-origin: 5px 20px;%27/><rect class=%27menu_bar%27 x=%275%27 y=%2730%27/><rect class=%27menu_bar%27 x=%275%27 y=%2740%27 style=%27transform-origin: 5px 42px;%27/></g><g class=%27menu_body%27><rect class=%27menu_background%27/> <!--
--> <!--
~~~ MENU ITEMS ~~~
--> <g class=%27menu_item%27> <!--
--> <text class=%27item_text%27 x=%2710%27>Item 1</text> <!--
--> <rect class=%27divider%27/> <!--
--> </g> <!--
--> <!--
--> <g class=%27menu_item%27> <!--
--> <text class=%27item_text%27 x=%2710%27>Item 2</text> <!--
--> <rect class=%27divider%27/> <!--
--> </g> <!--
--> <!--
--> <g class=%27menu_item%27> <!--
--> <text class=%27item_text%27 x=%2710%27>Item 3</text> <!--
--> <rect class=%27divider%27/> <!--
--> </g> <!--
--> <!--
--></g><animate/><style>svg{width:100%;height:100%;}.icon_background{width:40px;height:38px;fill:var(--background-color);opacity:0;transition:all 0.2s 0.3s ease;}.menu_bar{width:30px;height:4px;fill:var(--menu-icon-color);transition:all 0.2s 0.3s ease;}.menu_background{width:250px;height:1px;fill:var(--background-color);transform:translateY(50px) scaleY(0);transition:all 0.3s ease;}.item_text{font-family:var(--font-family);font-size:20px;fill:var(--text-color);}.divider{width:210px;height:1px;fill:var(--divider-color);}.menu_item{transform:translateX(-220px);transition:all 0.1s ease;}.menu_item:nth-child(2) .item_text{transform:translateY(90px)}.menu_item:nth-child(3) .item_text{transform:translateY(150px)}.menu_item:nth-child(4) .item_text{transform:translateY(210px)}.menu_item:nth-child(5) .item_text{transform:translateY(270px)}.menu_item:nth-child(6) .item_text{transform:translateY(330px)}.menu_item:nth-child(7) .item_text{transform:translateY(390px)}.menu_item:nth-child(8) .item_text{transform:translateY(450px)}.menu_item:nth-child(9) .item_text{transform:translateY(510px)}.menu_item:nth-child(10) .item_text{transform:translateY(570px)}.menu_item:nth-child(11) .item_text{transform:translateY(630px)}.menu_item:nth-child(2) .divider{transform:translateY(110px)}.menu_item:nth-child(3) .divider{transform:translateY(170px)}.menu_item:nth-child(4) .divider{transform:translateY(230px)}.menu_item:nth-child(5) .divider{transform:translateY(290px)}.menu_item:nth-child(6) .divider{transform:translateY(350px)}.menu_item:nth-child(7) .divider{transform:translateY(410px)}.menu_item:nth-child(8) .divider{transform:translateY(470px)}.menu_item:nth-child(9) .divider{transform:translateY(530px)}.menu_item:nth-child(10) .divider{transform:translateY(590px)}.menu_item:nth-child(11) .divider{transform:translateY(650px)}@media(min-height:691px){.icon_background{transition-duration:0.3s;transition-delay:0s;opacity:1;}.menu_bar{transition-delay:0s;fill:var(--menu-icon-color-active);}.menu_bar:nth-child(2){transform:translateX(5px) rotateZ(45deg);}.menu_bar:nth-child(3){opacity:0;}.menu_bar:nth-child(4){transform:translateX(5px) rotateZ(-45deg);}.menu_background {--scaleY: calc(((var(--number-of-menu-items) - 1) * 60) + 90);transform:translateY(50px) scaleY(var(--scaleY));transition-delay:0.2s;transition-duration:0.4s;}.menu_item{transform:translateX(20px);transition-duration:0.3s;}.menu_item:nth-child(2){transition-delay:0.200s;}.menu_item:nth-child(3){transition-delay:0.275s;}.menu_item:nth-child(4){transition-delay:0.350s;}.menu_item:nth-child(5){transition-delay:0.425s;}.menu_item:nth-child(6){transition-delay:0.500s;}.menu_item:nth-child(7){transition-delay:0.575s;}.menu_item:nth-child(8){transition-delay:0.650s;}.menu_item:nth-child(9){transition-delay:0.725s;}.menu_item:nth-child(10){transition-delay:0.800s;}.menu_item:nth-child(11){transition-delay:0.875s;}}</style></svg>')"></span>
</span>
<span style="font-size:; display: block; margin: 12px 0 0 20px; width: 40px; position: relative; color: transparent; --primary-very-low: transparent; --d-hover: transparent;">
<details class="elided">
<summary>
<span style="font-size:; display: inline-block; height: 32px;"></span>
<span style="font-size:; display: block; height: 40px; width: 100%; position: absolute; top: 0; left: 0; cursor: pointer;"></span>
</summary>
<span style="font-size:; display: inline-block; min-height: 692px; width: 250px; position: relative;">
<!---->
<!-- INSERT LINKS HERE -->
<!-- Link 1 -->
<a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166/"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 13px;"></span></a>
<!-- Link 2 -->
<a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166/"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 13px;"></span></a>
<!-- Link 3 -->
<a href="https://forum.wackywriters.com/t/nyctophilia-a-coding-thread-new-old-coders-are-encouraged-to-join/9166/"><span style="font-size:; display: inline-block; width: 100%; height: 40px; margin-top: 13px;"></span></a>
<!---->
</span>
</details>
</span>
</span>
</span>
Uncompiled SVG
<svg xmlns='http://www.w3.org/2000/svg'>
<style>
:root {
--number-of-menu-items: 3;
--font-family: Arial;
--text-color: white;
--background-color: rgb(60, 60, 60);
--divider-color: rgb(170, 170, 170);
--menu-icon-color: black;
--menu-icon-color-active: rgb(170, 170, 170);
}
</style>
<g class='menu_icon'>
<rect class='icon_background' y='12'/>
<rect class='menu_bar' x='5' y='20' style='transform-origin: 5px 20px;'/>
<rect class='menu_bar' x='5' y='30'/>
<rect class='menu_bar' x='5' y='40' style='transform-origin: 5px 42px;'/>
</g>
<g class='menu_body'>
<rect class='menu_background'/>
<g class='menu_item'>
<text class='item_text' x='10'>Item 1</text>
<rect class='divider'/></g>
<g class='menu_item'>
<text class='item_text' x='10'>Item 2</text>
<rect class='divider'/></g>
<g class='menu_item'>
<text class='item_text' x='10'>Item 3</text>
<rect class='divider'/></g>
</g>
<animate/>
<style>
svg {
width: 100%;
height: 100%;
}
.icon_background {
width: 40px;
height: 38px;
fill: var(--background-color);
opacity: 0;
transition: all 0.2s 0.3s ease;
}
.menu_bar {
width: 30px;
height: 4px;
fill: var(--menu-icon-color);
transition: all 0.2s 0.3s ease;
}
.menu_background {
width: 250px;
height: 1px;
fill: var(--background-color);
transform: translateY(50px) scaleY(0);
transition: all 0.3s ease;
}
.item_text {
font-family: var(--font-family);
font-size: 20px;
fill: var(--text-color);
}
.divider {
width: 210px;
height: 1px;
fill: var(--divider-color);
}
.menu_item {
transform: translateX(-220px);
transition: all 0.1s ease;
}
.menu_item:nth-child(2) .item_text { transform: translateY(90px) }
.menu_item:nth-child(3) .item_text { transform: translateY(150px) }
.menu_item:nth-child(4) .item_text { transform: translateY(210px) }
.menu_item:nth-child(5) .item_text { transform: translateY(270px) }
.menu_item:nth-child(6) .item_text { transform: translateY(330px) }
.menu_item:nth-child(7) .item_text { transform: translateY(390px) }
.menu_item:nth-child(8) .item_text { transform: translateY(450px) }
.menu_item:nth-child(9) .item_text { transform: translateY(510px) }
.menu_item:nth-child(10) .item_text { transform: translateY(570px) }
.menu_item:nth-child(11) .item_text { transform: translateY(630px) }
.menu_item:nth-child(2) .divider { transform: translateY(110px) }
.menu_item:nth-child(3) .divider { transform: translateY(170px) }
.menu_item:nth-child(4) .divider { transform: translateY(230px) }
.menu_item:nth-child(5) .divider { transform: translateY(290px) }
.menu_item:nth-child(6) .divider { transform: translateY(350px) }
.menu_item:nth-child(7) .divider { transform: translateY(410px) }
.menu_item:nth-child(8) .divider { transform: translateY(470px) }
.menu_item:nth-child(9) .divider { transform: translateY(530px) }
.menu_item:nth-child(10) .divider { transform: translateY(590px) }
.menu_item:nth-child(11) .divider { transform: translateY(650px) }
@media (min-height: 691px) {
.icon_background {
transition-duration: 0.3s;
transition-delay: 0s;
opacity: 1;
}
.menu_bar {
transition-delay: 0s;
fill: var(--menu-icon-color-active);
}
.menu_bar:nth-child(2) { transform: translateX(5px) rotateZ(45deg); }
.menu_bar:nth-child(3) { opacity: 0; }
.menu_bar:nth-child(4) { transform: translateX(5px) rotateZ(-45deg); }
.menu_background {
--scaleY: calc(((var(--number-of-menu-items) - 1) * 60) + 90);
transform: translateY(50px) scaleY(var(--scaleY));
transition-delay: 0.2s;
transition-duration: 0.4s;
}
.menu_item {
transform: translateX(20px);
transition-duration: 0.3s;
}
.menu_item:nth-child(2) { transition-delay: 0.200s; }
.menu_item:nth-child(3) { transition-delay: 0.275s; }
.menu_item:nth-child(4) { transition-delay: 0.350s; }
.menu_item:nth-child(5) { transition-delay: 0.425s; }
.menu_item:nth-child(6) { transition-delay: 0.500s; }
.menu_item:nth-child(7) { transition-delay: 0.575s; }
.menu_item:nth-child(8) { transition-delay: 0.650s; }
.menu_item:nth-child(9) { transition-delay: 0.725s; }
.menu_item:nth-child(10) { transition-delay: 0.800s; }
.menu_item:nth-child(11) { transition-delay: 0.875s; }
}
</style>
</svg>
Change Log
2024-03-29T00:54:00Z
- Code has been fixed after changes on the Discourse forums (Wacky) were made to the default css styling of
<details>and<summary>.
2021-12-17T08:23:00Z
- Fixed the
margin-topvalue of the links (under “INSERT LINK HERE” section) having inconsistent values. - Relevant sections of the code is now easier to read and edit. i.e. you no longer have to decompress the code in order to read and edit it; all edits can be done using a normal WackyWriters post. See image below.
