Hidden sidebar that shows up on hover

Asked 27/1, 2011 at 0:33 Answered 21/10, 2014 at 16:44

I'm trying to create a sidebar that is hidden by default but that shows up on hover. The closest example I can think of is this one: http://www.sidlee.com/. When you're on any of the pages beyond the home page, the sidebar only shows numbers. Once you move your mouse over this area, the sidebar expands to show the text. I'm guessing there's a way to do this with JavaScript but I'm no expert so I though somebody here could help me out.

Smollett answered 27/1, 2011 at 0:33 Comment(1)

I want to work at Sid Lee. Wowza! – Pushball 27/1, 2011 at 0:37

That's just a simple example but hopefully it will put you on the right track :)

CSS:

#nav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;}
#nav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;}
#nav a span{margin:0 10px 0 0;}
#nav a{color:#fff;font-size:14px;text-decoration:none;}

jQuery:

$(function(){
    $('#nav').hover(function(){
        $(this).animate({width:'200px'},500);
    },function(){
        $(this).animate({width:'35px'},500);
    }).trigger('mouseleave');
});

HTML:

<div id="nav">
<ul>
<li><a href=""><span>01</span> HomePage</a></li>
<li><a href=""><span>02</span> SubPage 1</a></li>
<li><a href=""><span>03</span> SubPage 2</a></li>
<li><a href=""><span>04</span> SubPage 3</a></li>
<li><a href=""><span>05</span> SubPage 4</a></li>
</ul>
</div>

If you want to show only numbers at start (without the closing animation onload) change the #nav{width:35px;} and remove the .trigger('mouseleave')

Cheers

Currey answered 27/1, 2011 at 0:49 Comment(3)

Also, is there a way to do two sidebars? The problem I have is that if I put a second sidebar, I have to specify how far from the left it has to be, and as such can't be 'glued' (for lack of a better word) to the first sidebar. – Smollett 27/1, 2011 at 10:44

is there a way to do it without jquery? I am planning to use this in an assignment I have, in which we can only use plain simple JavaScript. tnx :) – Macedonia 21/10, 2014 at 16:36

How to position it on the right side ??? I tried to set the "float" value to right but it didn't work for me. – Longfellow 16/11, 2015 at 13:32

Found a way how to actually do this without javascript or jQuery. This answer could be very efficient for those who are working on Uni/College assignments, and cannot use third party libraries such as JQuery.

Obviously having said that, using JQuery will give the same outcome in less code.

Here you go:

.fa {
    position: relative;
    display: table-cell;
    width: 60px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
    width: 250px;
    overflow: visible;
}
.main-menu {
    background: #fbfbfb;
    border-right: 1px solid #e5e5e5;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    left: 0;
    width: 60px;
    overflow: hidden;
    -webkit-transition: width .05s linear;
    transition: width .05s linear;
    -webkit-transform: translateZ(0) scale(1, 1);
    z-index: 1000;
}
.main-menu>ul {
    margin: 7px 0;
}
.main-menu li {
    position: relative;
    display: block;
    width: 250px;
}
.main-menu li>a {
    position: relative;
    display: table;
    border-collapse: collapse;
    border-spacing: 0;
    color: #999;
    font-family: arial;
    font-size: 14px;
    text-decoration: none;
    -webkit-transform: translateZ(0) scale(1, 1);
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
}
.main-menu .nav-icon {
    position: relative;
    display: table-cell;
    width: 60px;
    height: 36px;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
}
.main-menu .nav-text {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 190px;
    font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
    position: absolute;
    left: 0;
    bottom: 0;
}
.no-touch .scrollable.hover {
    overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
    overflow-y: auto;
    overflow: visible;
}
a:hover,
a:focus {
    text-decoration: none;
}
nav {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
nav ul,
nav li {
    outline: 0;
    margin: 0;
    padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
    color: #fff;
    background-color: #5fa2db;
}
.area {
    float: left;
    background: #e2e2e2;
    width: 100%;
    height: 100%;
}
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}

<html>

<head>
</head>

<body>
  <div class="area"></div>
  <nav class="main-menu">
    <ul>
      <li>
        <a href="#">
          <i class="fa fa-home fa-2x"></i>
          <span class="nav-text">
                            Dashboard
                        </span>
        </a>
      </li>
      <li class="has-subnav">
        <a href="#">
          <i class="fa fa-laptop fa-2x"></i>
          <span class="nav-text">
                            UI Components
                        </span>
        </a>

      </li>
      <li class="has-subnav">
        <a href="#">
          <i class="fa fa-list fa-2x"></i>
          <span class="nav-text">
                            Forms
                        </span>
        </a>

      </li>
      <li class="has-subnav">
        <a href="#">
          <i class="fa fa-folder-open fa-2x"></i>
          <span class="nav-text">
                            Pages
                        </span>
        </a>

      </li>
      <li>
        <a href="#">
          <i class="fa fa-bar-chart-o fa-2x"></i>
          <span class="nav-text">
                            Graphs and Statistics
                        </span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-font fa-2x"></i>
          <span class="nav-text">
                            Typography and Icons
                        </span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-table fa-2x"></i>
          <span class="nav-text">
                            Tables
                        </span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-map-marker fa-2x"></i>
          <span class="nav-text">
                            Maps
                        </span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-info fa-2x"></i>
          <span class="nav-text">
                            Documentation
                        </span>
        </a>
      </li>
    </ul>

    <ul class="logout">
      <li>
        <a href="#">
          <i class="fa fa-power-off fa-2x"></i>
          <span class="nav-text">
                            Logout
                        </span>
        </a>
      </li>
    </ul>
  </nav>
</body>

</html>

Hope this helps :)

Macedonia answered 21/10, 2014 at 16:44 Comment(2)

This one is really great but I can't get this menu to appear on the right, What should I change to make this menu/Nav to appear on the right ??? – Longfellow 16/11, 2015 at 13:25

All you need to do is just set right: 0; instead of left: 0; in the css file. This needs to be done under the .main-menu class. – Macedonia 16/11, 2015 at 13:38

You can use JQuery's .hover() method in conjunction with .animate() to have a div slide out when a .mouseenter() event occurs.

JQuery API for Hover

Pushball answered 27/1, 2011 at 0:37 Comment(1)

Thank you very much for taking the time to answer my question. I greatly appreciate it. – Smollett 27/1, 2011 at 10:21

Just start plugging away at the jQuery API. This is how you would begin the structure of it. Using .animate() will give you the ability to adjust your menu css properties how you see fit.

$("#yourmenu").hover( function() {
    $(this).stop(true,true);
    $(this).show();
}, function () {
   $(this).hide();
});

Sandell answered 27/1, 2011 at 0:41 Comment(1)

Thank you very much for taking the time to answer my question. I greatly appreciate it. – Smollett 27/1, 2011 at 10:20

Edvard,

I'd suggest doing this the following way. Hopefully with some ideas and some links to the right jQuery elements you should be able to get this done.

First step would be to have a div that is 100% transparent and a div inside that which contains the menu. Then from the menu div I would hide that element, then when you mouse over the container dive you could use a .hover() method to animate the slide out of the inner div.

Here is some basic code which should get you started.

<div id="menuContainer">
    <div id="menu">
        <ul>
            <li>This</li>
            <li>Is</li>
            <li>A</li>
            <li>Menu</li>
        </ul>
    </div>
</div>

Then some CSS:

/* Set the container to be fixed to the top of the screen and set it's height
   This is important so we know where the mouse can hover */
div#menuContainer {
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
}

/* Set the menu as hidden */
div#menu {
    background: red;
    width: 900px;
    height:
    margin: 0 auto;
    display: none;
}

/* Fiddle with the menu items */
div#menu ul { list-style-type: none; }
div#menu ul li { display: inline; }

Then some jQuery:

$('#menuContainer').mouseenter(function(){
    $('#menu').slideToggle();
}).mouseleave(function() {
    $('#menu').slideToggle();
});

This is obviously untested code, but it should give you a great headstart! :-)

Imprecise answered 27/1, 2011 at 0:48 Comment(1)

Thank you very much for taking the time to answer my question. I greatly appreciate it. – Smollett 27/1, 2011 at 10:22

Recommended topics

Hot tags