Announcement

Collapse
No announcement yet.

Vertical Icon Bar with Hover Effect

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Vertical Icon Bar with Hover Effect

    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

    Code:
    <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

    Code:
    /* 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
    Code:
    @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
    Code:
    <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
    Last edited by glennrocksvb; 07-26-2017, 02:49 AM.

    #2
    Thanks for sharing shining!

    That's a cool hover effect

    Comment


      #3
      This is very cool!

      Thank you!

      Comment


        #4
        I love it, thanks

        Comment

        Working...
        X