Found this (with the help of @Skhilled )

Neat little side tab menu that can be used in your SMF forum

Now here's the code..

You can change the href=# to your own links and the names to whatever you need.

You can change it to be viewable for guest/members only by adding,  just above the echo' statement.
global $context;
if ($context['user']['is_guest']) or
global $context;
if ($context['user']['is_logged'])
Find in index.template.php
echo '
</body>
</html>';
add before
echo '

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">About</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Projects</a>
  <a href="#" id="contact">Contact</a>
</div>';

---

And add to the bottom of your themes index.css. I have made the tab menu fixed so it stays in one place.
/* Style the links inside the sidenav */
#mySidenav a {
  position: fixed; /* Position them relative to the browser window */
  left: -89px; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */
  padding: 15px; /* 15px padding */
  width: 100px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 20px; /* Increase font size */
  color: white; /* White text color */
  border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}

#mySidenav a:hover {
  left: 0; /* On mouse-over, make the elements appear as they should */
}

/* The about link: 20px from the top with a green background */
#about {
  top: 50px;
  background-color: #4CAF50; /* green */
}

#blog {
  top: 110px;
  background-color: #2196F3; /* Blue */
}

#projects {
  top: 170px;
    background-color: #f44336; /* Red */
}

#contact {
  top: 230px;
  background-color: #555 /* Light Black */
}
Demo

Link to original page

Hey, very nice. I like it.

You can also make certain buttons work depending on if you're a guest or not such as this:

if ($context['user']['is_guest'])
echo '

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">About</a>
  <a href="#" id="blog">Blog</a>
  </div>';

  if ($context['user']['is_logged'])
echo '
<div id="mySidenav" class="sidenav">
  <a href="#" id="projects">Projects</a>
  <a href="#" id="contact">Contact</a>
</div>';

---

It's still splitting up the code into individual lines when I use the "code" bbc button but not when I use the code tags alone.

You should put the code before the </body> tag, not ?>

Quote from: SychO on Apr 22, 2019, 09:55 AMYou should put the code before the </body> tag, not ?>

Thanks, I'm not coder, just an expert at copy/paste 🥴

I tried it before the </body> but get an error, obviously I am doing something wrong

This is the section, although I am not sure where to add it? I think it needs more echo statements but I am unsure where to add them.

echo '
</body>
</html>';
}


Add it before that echo

Seems to work in a portal block too, with a little jiggling. Moved it down a bit and also fixed the position. https://cctestsite.info/testsite3/index.php

I must say, I love that site, and over the last couple of years I've tried out many of their handy scripts.

That works, this is what I have..

echo '

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">About</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Projects</a>
  <a href="#" id="contact">Contact</a>
</div>';

 echo '
</body>
</html>';
But I wanted to add this just above the first echo, but then it doesnt show at all, but worked fine when I added the code just before the closing ?>

if ($context['user']['is_logged'])

Quote from: lurkalot on Apr 22, 2019, 02:22 PMSeems to work in a portal block too, with a little jiggling. Moved it down a bit and also fixed the position. https://cctestsite.info/testsite3/index.php

I must say, I love that site, and over the last couple of years I've tried out many of their handy scripts.

Looks good you can move them a little to the left by changing this in the css..I have it at -89px it hides the text.
left: -89px; /* Position them outside of the screen */

Quote from: lesmond on Apr 22, 2019, 02:27 PMLooks good you can move them a little to the left by changing this in the css..I have it at -89px it hides the text.

Code Select Expand

left: -89px; /* Position them outside of the screen */

Thanks, done.

I have changed quite a few of those settings, but didn't do that one. 

A z-index would work in there so the tabs that slide out are over top of the menu buttons. I see this in FF.

Quote from: lesmond on Apr 22, 2019, 02:23 PMBut I wanted to add this just above the first echo, but then it doesnt show at all, but worked fine when I added the code just before the closing ?>

You'd have to add global $context; before it

Quote from: Bigguy on Apr 22, 2019, 03:23 PMA z-index would work in there so the tabs that slide out are over top of the menu buttons. I see this in FF.

Yep, that does fix it. Thanks BG. 

Not sure why a z index is needed, I don't see any difference tbh

the only thing I would suggest is reduce the width, maybe too 110px

width: 110px; /* Set a specific width */