Multiple Sticky Buttons 
Autor: Craig G.
Visitado 285,
Seguidores 1,
Compartilhado 0
I am trying to get the above results, but it seems the only way to do this is to pad the text with periods (I could have used some other character other than a period). For example:
The display order on the page also needs to be from longest to shortest string of periods in the button's text. I created the first image using this method, and it does work.
You can do multiple buttons per side using the Sticky Buttons alignment, but that only works for three buttons or less. You can also fiddle with the margins on the text, but only to a maximum of a 100 pixels.
Thanks
Craig
Publicado em
Autor
My final menu with Sticky Buttons looks like this:
It seems I could only go so far with the period; I had to start another column.
Could you give a link to your test-page, so that we better can see what it is you want to achieve, and for what it should be used.
There are more ways for sticky vertical buttons.
You could use the text object using tabs. Or make the "buttons" yourself.
Example: http://eksempelsite.dk/information-buttons.html
Autor
Thanks John S,
I don't have a test page at this time, just a local server.
Although your code is helpful, I was hoping to achieve this through the Sticky Button objects with some tweaking, similar to what I did. In a way, I was disappointed by the Sticky Button object's limitations. It is too bad that you can try them before you buy.
Thanks again,
Craig
@John S.: Thanks for the code – with additional CSS code you can also write vertically.
CSS-Code: writing-mode: vertical-lr;
See my test page >> https://findelinks.de/123shop-hosteurope/seite-147.html
Autor
I used Copilot to help me create the menu using an "HTML Code" object.
Autor
There seemed to be an unprintable character in my original "HTML Code Object.txt", and so Notepad thought the file was binary. Here is the file again without the unprintable character.
Autor
The following is really what I wanted. I produced it using UltraEdit and Pieces (AI).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rotated Side Menu - Even Column Starts at Odd Midpoint (No Color Change on Hover)</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
}
.side-menu {
position: fixed;
left: 0;
z-index: 1000;
}
.side-menu ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.side-menu ul li {
position: absolute;
left: 0;
/* Rotates the button so that:
- top edge (code) becomes left edge (screen)
- bottom edge (code) becomes right edge (screen)
*/
transform: rotate(-90deg);
transform-origin: top left;
}
.side-menu ul li a {
display: flex;
align-items: center;
justify-content: center;
/* Width is set dynamically in JS to match the longest button (text + padding) */
box-sizing: border-box;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
text-decoration: none;
border-radius: 0 0 5px 5px;
background: #FFD700;
color: #000;
transition: background 0.2s, height 0.2s;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-left: 5px;
padding-right: 5px;
padding-top: 0;
padding-bottom: 5px;
border: 1px solid #888; /* For visual debugging */
}
.side-menu ul li:nth-child(even) a {
background: #FFA500;
align-items: flex-end;
}
.side-menu ul li a:hover {
height: 40px !important;
/* background: #FF8C00; <-- REMOVE or comment out this line */
cursor: pointer;
}
.side-menu ul li:nth-child(even) a:hover {
height: 70px !important;
/* background: #FF8C00; <-- REMOVE or comment out this line */
}
</style>
</head>
<body>
<nav class="side-menu" aria-label="Vertical Side Menu">
<ul>
<li><a href="#">Christian</a></li>
<li><a href="#">Inspirational</a></li>
<li><a href="#">Devotionals</a></li>
<li><a href="#">Fiction</a></li>
<li><a href="#">Poetry</a></li>
<li><a href="#">Creative</a></li>
<li><a href="#">Biography</a></li>
<li><a href="#">Writing Courses</a></li>
</ul>
</nav>
<script>
// 1. Find the longest menu item text width (text only)
const menuItems = document.querySelectorAll('.side-menu ul li');
let maxTextWidth = 0;
const tempSpan = document.createElement('span');
tempSpan.style.visibility = 'hidden';
tempSpan.style.position = 'absolute';
tempSpan.style.fontFamily = "'Open Sans', sans-serif";
tempSpan.style.fontSize = '12px';
tempSpan.style.whiteSpace = 'nowrap';
document.body.appendChild(tempSpan);
menuItems.forEach(item => {
const link = item.querySelector('a');
tempSpan.textContent = link.textContent;
const textWidth = tempSpan.offsetWidth;
if (textWidth > maxTextWidth) maxTextWidth = textWidth;
});
document.body.removeChild(tempSpan);
// 2. Set all buttons' width to (maxTextWidth + left/right padding)
const paddingLeft = 5;
const paddingRight = 5;
const paddingTop = 0;
const paddingBottom = 5;
const uniformWidth = maxTextWidth + paddingLeft + paddingRight;
// 3. Stack odd and even buttons independently, using your definition of bottom edge
let oddIndex = 0, evenIndex = 0;
let currentTopOdd = 250;
let oddBottom = currentTopOdd;
// First, set widths and collect heights for each button
let oddHeights = [], evenHeights = [];
menuItems.forEach((item, index) => {
const link = item.querySelector('a');
link.style.width = uniformWidth + 'px';
link.style.paddingLeft = paddingLeft + 'px';
link.style.paddingRight = paddingRight + 'px';
link.style.paddingTop = paddingTop + 'px';
link.style.paddingBottom = paddingBottom + 'px';
if (index % 2 === 0) {
// Odd buttons
link.style.height = '20px';
item.style.zIndex = 2;
// The vertical extent after rotation is the width in code
oddHeights.push(paddingTop + uniformWidth + paddingBottom);
} else {
// Even buttons
link.style.height = '50px';
item.style.zIndex = 1;
evenHeights.push(paddingTop + uniformWidth + paddingBottom);
}
});
// Stack odd buttons starting at 250px, each top is previous bottom + 5px
oddIndex = 0;
oddBottom = currentTopOdd;
menuItems.forEach((item, index) => {
if (index % 2 === 0) {
item.style.top = oddBottom + 'px';
oddBottom += oddHeights[oddIndex++] + 5;
}
});
// Find the midpoint of the first odd button
const firstOddTop = 250;
const firstOddHeight = oddHeights[0];
const evenStart = firstOddTop + firstOddHeight / 2;
// Stack even buttons starting at the midpoint of the first odd button
evenIndex = 0;
let evenBottom = evenStart;
menuItems.forEach((item, index) => {
if (index % 2 === 1) {
item.style.top = evenBottom + 'px';
evenBottom += evenHeights[evenIndex++] + 5;
}
});
</script>
</body>
</html>