Question

我正在尝试创建一个默认隐藏但在悬停时显示的侧边栏。我能想到的最接近的例子是这一个：http://www.sidlee.com/。当您在主页之外的任何页面上时，侧边栏仅显示数字。将鼠标移到此区域后，侧边栏会展开以显示文本。我猜测有一种方法可以用JavaScript做到这一点，但我不是专家，所以我虽然有人可以帮助我。

Answer 1

这只是一个简单的例子，但希望它会让你走上正轨：）

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>

如果您只想在开始时显示数字（没有关闭动画onload），请更改#nav{width:35px;}并删除.trigger('mouseleave')

干杯

-G。

Answer 2

找到一种如何在没有javascript或jQuery的情况下实际执行此操作的方法。这个答案对于那些从事Uni / College任务的人来说非常有效，并且不能使用第三方库，例如JQuery。

显然已经说过，使用JQuery会在更少的代码中产生相同的结果。

你走了：

.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>

希望这会有所帮助：）

Answer 3

当.hover()事件发生时，您可以将JQuery的.animate()方法与div结合使用.mouseenter()滑出。

JQuery API for Hover

Answer 4

刚刚开始关注jQuery API。这就是你如何开始它的结构。使用.animate（）将使您能够根据自己的需要调整菜单css属性。

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

Answer 5

爱德华，

我建议按照以下方式执行此操作。希望有一些想法和一些链接到正确的jQuery元素，你应该能够完成这个。

第一步是让一个100％透明的div和一个包含菜单的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'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; }

然后是一些jQuery：

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

这显然是未经测试的代码，但它应该会给你一个很好的开端！： - ）

隐藏的侧边栏显示悬停

5 个答案: