Hidden sidebar that appears on hover

Question

I am trying to create a sidebar that is hidden by default, but appears on hover. The closest example I can come up with is: http://www.sidlee.com/ . When you are on one of the pages outside the home page, only numbers are displayed in the sidebar. After moving the mouse over this area, the sidebar expands to display the text. I suppose there is a way to do this using JavaScript, but I am not an expert, therefore, although someone here can help me.

Answer 1

This is just a simple example, but hopefully it puts 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 startup (without closing the onload animation), change #nav{width:35px;}and delete.trigger('mouseleave')

Greetings

G.

Answer 2

You can use the jQuery method .hover()in conjunction with .animate()to output divwhen an event occurs .mouseenter().

JQuery API for hover

Answer 3

jQuery API. . .animate() css , .

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

Answer 4

,

. , jQuery .

, div, 100% , div , . div , , , .hover() div.

, .

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

CSS:

/* Set the container to be fixed to the top of the screen and set it 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; }

jQuery:

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

, , , !: -)

Answer 5

, javascript jQuery. , Uni/College, , JQuery.

Obviously saying that using jQuery will produce the same result 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>

Run code

Hope this helps :)