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

Bigguy

In FF the tabs you have slide under the main menu.

lesmond

Quote from: SychO on Apr 22, 2019, 03:58 PMYou'd have to add global $context; before it

Damn I always miss that one, thanks SychO :rgton

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

lesmond

Quote from: Bigguy on Apr 22, 2019, 05:04 PMIn FF the tabs you have slide under the main menu.
Sorry I'm not sure what you mean, even if I look with FF :dontknow

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

Bigguy

On the demo I saw the tabs that side out would be underneath all the other graphics. Main menu mostly. Adding a z-index took care of this for @lurkalot


https://www.smfhelper.com/index.php?topic=293.msg2697#msg2697

lesmond


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

lurkalot

Quote from: lesmond on Apr 22, 2019, 04:46 PMNot 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 */

Les because your demo has that extra header, that pushes the SMF tabs down below the side menu.  If you line up the home button with one of the side menu buttons you'll see that when you hover over it, the side button goes underneath the home button, instead of over the top of it.

lesmond

ahh now I see what you mean, its was because I use a big screen that's why I didn't see it before, sorry guys :emb

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

lesmond

Edited first post to reflect correct code placing, thanks to @SychO  for the correction.

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