Vertical Icon Bar with Hover Effect

[shining]

Hi there,

I don't like it when there are too many links in the main menu.

So I was looking for a solution for this... and because we don't use a social icon navbar like Glenn does here ... we have enough space left

So maybe someone is also interested in it... so I share it with you

I have found the main source / idea here: https://codepen.io/gianmichelle/pen/xpwEh (There you can also see a demo and how it works)

Then I just made some customizations in order to get it work without no problems with our forum style template. So it might be necessary, that you also need to change some of the dimensions/positions.

Oh.. and before I forget to mention:
I did not want to edit a template AND I do not want unregistred users to see this icon navbar.

Thats why I decided to put the following html code into an ad module in the header section. And then I turned it off for unregistred users.

The Links I used for the icons are Mailbox, PM-Chat, Account Settings and Help

<nav class="social">
          <ul>
              <li><a href="https://www.example.com/privatemessage/index">Mailbox<i class="fa fa-envelope"></i></a></li>
             <li><a href="https://www.example.com/pmchat/chat" rel="nofollow" onclick="window.open(this.href, '_blank', 'width=600,height=700,resizable=yes,scrollbars=yes,status=yes'); return false;" >PM-Chat <i class="fa fa-comments"></i></a></li>
              <li><a href="https://www.example.com/settings/profile">Account<i class="fa fa-cog"></i></a></li>              
              <li><a href="https://www.example.com/help">Help<i class="fa fa-life-ring"></i></a></li>              
          </ul>
</nav>

Then I added the following Code to the additional CSS Style

/* START Icon Navbar */
.social {
  position: fixed;
  bottom: 5%;
z-index: 99999;
  width: 5px;
}
.social ul {
  padding: 0px;
  -webkit-transform: translate(-290px, 0);
  -moz-transform: translate(-290px, 0);
  -ms-transform: translate(-290px, 0);
  -o-transform: translate(-290px, 0);
  transform: translate(-290px, 0);
}
.social ul li {
  display: block;
  margin: 5px;
  background: transparent;
  width: 300px;
  text-align: right;
  padding: 10px;
  -webkit-border-radius: 0 30px 30px 0;
  -moz-border-radius: 0 30px 30px 0;
  border-radius: 0 30px 30px 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.social ul li:hover {
  -webkit-transform: translate(70px, 0);
  -moz-transform: translate(70px, 0);
  -ms-transform: translate(70px, 0);
  -o-transform: translate(70px, 0);
  transform: translate(70px, 0);
  background: rgba(255, 255, 255, 0.6);
}
.social ul li:hover a {
  color: #2f4456;
  font-weight: 600;
font-size: 1.1em;
}
.social ul li:hover i {
  color: #fff;
  background: rgba(47, 68, 86, 0.84);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.social ul li i {
  margin-left: 5px;
  color: #2f4456;
  background: #fff;
  padding: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 20px;
  background: #ffffff;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
/* END Icon Navbar */

Thats all

Except: If you don't use fontawesome yet on your forum, then you also need to add it.

Just place

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

right on top of your additional CSS Style

or if this does not work you need to place

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

right on top of your head_include template in admincp

[glennrocksvb]

Thanks for sharing shining!

That's a cool hover effect

[NumNum]

This is very cool!

Thank you!

[anicolco]

I love it, thanks