thank u, you’re a lifesaver 
3 Likes
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.
3 Likes
Hello,
darling~
I wonder
how I
know you.
But anyways...
you are still
welcome.
If you only
see me,
a lot
could be revealed
lest you moved down ;) Title
Testing text inside the span
Title
more testing of text inside the span
coded by an angel
darling~
I wonder
how I
know you.
But anyways...
you are still
welcome.
If you only
see me,
a lot
could be revealed
lest you moved down ;) Title
Testing text inside the span
Title
more testing of text inside the span
coded by an angel
3 Likes
raw code
<div align=center>
<span style="font-size: 15px; font-family: times; display: flex; flex-direction: row; flex-wrap: nowrap; height: 530px; width: 600px; background-color: black; text-align: center; padding: 30px 30px; margin: 2px 6px; align-items: center; overflow: auto">
<span style="font-size: 10px; display: inline-block; height: 500px; width: 327px; background-color: black; margin: 0px 0px 0px 0px; vertical-align: center; color: white; padding: 10px 0px; text-align: center; overflow: auto; border: 1px solid white; outline: 2px solid white; outline-offset: 3px; align-items: center">
<span style="font-size: 15px; display: inline-block; height: 479px; width: 300px; background-color: black; background-image: url(http://cdn140.picsart.com/296544991070211.png); background-size: 300px; background-position: top; margin: 5px 10px"><br><br>
</span>
</span>
<span style="font-size: 10px; display: inline-block; height: 500px; width: 45px; background-color: black; margin: 5px"></span>
<span style="font-size: 10px; display: flex; flex-direction: column; height: 530px; width: 35%; background-color: black; margin: 0px; align-items: center; color: white; padding: 0px 0px; text-align: center; overflow: auto; ">
<span style="font-size: 10px; display: inline-block; height: 480px; width: 95%; background-color: black; color: white; padding: 10px 0px; text-align: center; overflow: auto; border: 1px solid white; outline: 2px solid white; outline-offset: 3px;margin: 5px 0px">
<b>testing text inside the span</b><br>more testing of text inside the span
</span><br><br>
<span style="font-size: 10px; display: inline-block; height: 480px; width: 95%; background-color: black; color: white; padding: 10px 0px; text-align: center; overflow: auto; border: 1px solid white; outline: 2px solid white; outline-offset: 3px; margin: 5px 0px">
<b>testing text inside the span</b><br>more testing of text inside the span
</span>
</span>
</span>
2 Likes
[ • HAŽÉNŪLÌ • ]
l.o.e: Noi’jlaan-di-Téz’a’fel
[adj.]
/ɦa·tzæ·ny·li/
A body (tzō) in need of a soul (qō).
Purpose:
Used by the caretakers of Téz’a’fel to refer to their creations before the completion of the hae-di-ga’a, or reincarnation process.
♢ coded by an angel ♢
3 Likes
@48lexR if you want to further see the world of my conlang.
3 Likes
raw code
<span style="font-size: 15px; display: flex; height: 550px; width: 300px; font-family: courier new ; background-color: #000000; margin: auto; padding: 40px 10px 40px 10px; flex-direction: column; color: #ffffff; text-transform:">
<span style="font-size: 15px; display: inline-block; height: 375px; width: 240px; background-color: black; background-image: url(https://i.pinimg.com/originals/e9/6e/94/e96e94691ad46170bd409825e8513027.jpg); background-size: 250px; background-position: center; margin: auto; border: 1px solid white">
</span>
<br>
<span style="font-size: 11px; display: inline-block; height: 160px; width: 220px; padding: 4px 10px; margin: auto; border: 1px solid white; overflow: auto; text-align: center ">
<b>[size=3][ • HAŽÉNŪLÌ • ][/size]</b>
l.o.e: Noi'jlaan-di-Téz'a'fel<br>
**[adj.]**
**/ɦa·tzæ·ny·li/**
A body (tzō) in need of a soul (qō).
<br><b>[u]Purpose:[/u]</b>
Used by the caretakers of Téz'a'fel to refer to their creations before the completion of the *hae-di-ga’a*, or reincarnation process.<br>
<span style="font-size: 11px; display: inline-block; height: 22px; width: 90%; padding-top: 6px; margin: auto; border: 1px solid white; overflow: auto; text-align: center; vertical-align: center"><i>♢ coded by an angel ♢</i>
</span></span>
</span>
2 Likes
coding on this site honestly feels like hell sometimes. i coded this, and this is a screenshot of what it’s SUPPOSED to look like. it looks like this in the fullscreen composer, but once you exit it/post it gets all hecked up im gonna scream
and here's the hecked, posted version
naomilink onelink two
korralistic
status: online
pronouns: she/her
name: jade/jay
⧗ 42 seconds ago ☖ 2 notes↻ 
딩가딩가할래 (ayy), 친구들 모아 (ooh), 한잔 할래
Drink like a, like a, like a fish (fish), 딩가딩, 링가링
노는 게 좋아, ayy, 딩가딩가, 딩가딩가
Ice cream 먹으러 갈래? (Yeah; 나나나나나, 딩가딩가)
유유자적해, 여기 방구석에
언제부터인지 사회와의 거리가 꽤나 멀지
이 여름이 다 지났네, 차가운 땀이 나네
밤이나 또 낮이나 제자리만 돌고 돌아 (alright)
like wtf. here’s the raw code if anyone wants to see it, i probably code in the most dumb way possible dont judge me
raw
<span style="font-size:; background-image: linear-gradient(to right, #a5868c, #e8e1db); width: 300px; height: 40px; border-radius: 5px 5px 0px 0px; margin: auto; border: 1px solid #212a2a; box-shadow: 5px 5px #a5868c; display:block;"></span><span style="font-size: 8px; color: #a5868c; background-color: #e8e1db; height: 20px; width: 80px; margin-left: 215px; margin-top: -22px; border: 1px solid #212a2a; border-radius: 3px; text-align: center; text-transform: uppercase; letter-spacing: 2px; display:block;"><span style="font-size:; margin-top: 5px; display:block;"><b><i>naomi</i></b><span style="font-size: 8px; color: #a5868c; background-color: #dcd3d4; height: 20px; width: 80px; margin-left: 97px; margin-top: -17px; border: 1px solid #212a2a; border-radius: 3px; text-align: center; text-transform: uppercase; letter-spacing: 2px; display:block;"><span style="font-size:; margin-top: 5px; display:block;"><a href="https://www.youtube.com/watch?v=ZDRgfI5kNww"><span style="font-size:; color: #a5868c;">link one</a><span style="font-size: 8px; color: #a5868c; background-color: #D2CACB; height: 20px; width: 80px; margin-left: 97px; margin-top: -17px; border: 1px solid #212a2a; border-radius: 3px; text-align: center; text-transform: uppercase; letter-spacing: 2px; display:block;"><span style="font-size:; margin-top: 5px; display:block;"><a href="https://www.youtube.com/watch?v=ZDRgfI5kNww"><span style="font-size:; color: #a5868c;">link two</a></span></span></span></span></span></span>
<span style="font-size:; background-color: #e8e1db; width: 300px; height: 400px; border-radius: 0px 0px 5px 5px; margin: auto; margin-top: -23px; border: 1px solid #212a2a; box-shadow: 5px 5px #a5868c; display:block;"><span style="font-size:; background-color: #e8e1db; width: 80px; height: 10px; margin-top: -1px; margin-left: 12px; display:block;">
<span style="font-size:; background-image: url('https://i.gyazo.com/968c2e0bcb1377cdfca863037535a35c.jpg'); background-size: 90px; height: 90px; width: 90px; border: 1px solid #212a2a; box-shadow: 5px 5px #a5868c; margin-left: 15px; margin-top: 10px; display:block;"></span></span><span style="font-size: 10px; color: #a5868c; text-transform: uppercase; letter-spacing: 1px; line-height: 20px; margin-left: 135px; margin-top: 30px; display:block;"><span style="font-size: 12px;"><b><i>korralistic</b></i></span>
<b>status:</b> online<br><b>pronouns:</b> she/her<br><b>name:</b> jade/jay</span></span>
<span style="font-size:; background-color: #dcd3d4; width: 250px; height: 180px; border-radius: 0px 0px 5px 5px; margin: auto; margin-top: -230px; border: 1px solid #212a2a; box-shadow: 5px 5px #a5868c; display:block;"></span><span style="font-size: 8px; color: #a5868c; text-transform: uppercase; letter-spacing: 2px; background-color: #D2CACB; width: 250px; height: 22px; border-radius: 5px 5px 0px 0px; margin: auto; margin-top: -200px; border: 1px solid #212a2a; display:block;"><span style="font-size:; padding: 10px; margin-top: -3px; display:block;">⧗ 42 seconds ago ☖ 2 notes</span><span style="font-size:; text-align: right; margin-top: -21px; margin-right: 10px; display:block;">↻ ♡</span>
<span style="font-size:; padding: 15px; display:block;">딩가딩가할래 (ayy), 친구들 모아 (ooh), 한잔 할래
Drink like a, like a, like a fish (fish), 딩가딩, 링가링
노는 게 좋아, ayy, 딩가딩가, 딩가딩가
Ice cream 먹으러 갈래? (Yeah; 나나나나나, 딩가딩가)
유유자적해, 여기 방구석에
언제부터인지 사회와의 거리가 꽤나 멀지
이 여름이 다 지났네, 차가운 땀이 나네
밤이나 또 낮이나 제자리만 돌고 돌아 (alright)
4 Likes
removed
3 Likes
aa thanks for trying but it still looks off for me! i’d still love to know how you got it all to show up and work, tho. i don’t understand why it works fine for me in the fullscreen composer but absolute garbage when posted ;;u;;
2 Likes
Can you show me what it looks like for you? 
I’ll try to fix it
happens to me too sometimes - not sure exactly why but it might be because of how the code actually works real-time? 
2 Likes
here, i’m just super picky and want it to look exactly how i had it 
2 Likes
I can relate xD lemme work it out
2 Likes
hewwo may i ask how you managed to get your thread to work on mobile despite it being so big? 
i would rlly like to work outside the 300 width limit again but still work on mobile 
3 Likes
Oh, I typically use percentages for widths. So for example, instead of width: 300px I’d type width: 85%
For heights I occasionally use 75vh if I want the width-height ratio to be the somewhat same, though usually I just use a fixed height.
4 Likes
ah, so if i just swap it for percentages it’ll show up on mobile?
3 Likes
Yup 
2 Likes
ty!! you’re a life saver
3 Likes
yeah idek how would u embed a video
3 Likes
how’d you make this post empty? 
This text is only visible when viewed in light mode.
This text is only visible when viewed in dark mode.
EDIT: nvm forget what I said 
2 Likes