Side tab trick

Started by lesmond, Apr 22, 2019, 07:41 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

lesmond

Apr 22, 2019, 07:41 AM Last Edit: Apr 23, 2019, 05:40 AM by lesmond Reason: edited to change position, thanks go to SychO
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

The only person who got all his work done by Friday was Robinson Crusoe

Bigguy

Hey, very nice. I like it. :rgton

Skhilled

Apr 22, 2019, 09:02 AM #2 Last Edit: Apr 22, 2019, 01:45 PM by lesmond
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.

SychO

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

lesmond

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 🥴

The only person who got all his work done by Friday was Robinson Crusoe

lesmond

Apr 22, 2019, 01:31 PM #5 Last Edit: Apr 22, 2019, 01:44 PM by lesmond
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>';
}


The only person who got all his work done by Friday was Robinson Crusoe

SychO

Add it before that echo

lurkalot

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.

lesmond

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'])

The only person who got all his work done by Friday was Robinson Crusoe

lesmond

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 */

The only person who got all his work done by Friday was Robinson Crusoe

lurkalot

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.
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.  ;)

Bigguy

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.

SychO

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

lurkalot

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.  :rgton

lesmond

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 */

The only person who got all his work done by Friday was Robinson Crusoe