javascript - 如何使用 jQuery 和 CSS3 制作交互式侧边栏？

Question

我问过这样的问题，但没有得到真正帮助我的答案!我知道这可能很容易，但我就是想不通!

我已经研究了几天 jQuery 并掌握了基础知识，但无法创建正确的函数来实现这种效果!请访问以下网站!

有几件事我想知道!第一件事是当您第一次访问该站点时，所有内容都会滑入到位(侧边栏、页脚等)。主要关注的是侧边栏，当您将鼠标悬停在其中一个图标上时，一种工具提示会出现并缓和到右边。

我想知道的下一部分是当您单击其中一个图标时会弹出另一个窗口。我有点了解这两者是如何发生的，但我无法将所有部分放在一起。请帮帮我!我知道这不会那么困难。即使您知道任何可以帮助实现这些结果的 jQuery 插件，也会更好!

http://intothearctic.gp/en/

HTML

<div id="sidemenu">
     <div id="regionsContainer">
          <div id="regionsUnitedStates"></div>
     </div>
</div>

CSS

    #sidemenu {
    width: 60px;
    height: 100%;
    min-width: 60px;
    height: 100vh;
    max-width: 60px;
    background-color: #383D3F;
    background-size: 100% 100%;
    background-attachment: fixed;
    margin-top: -8px;
    margin-bottom: -8px;
    margin-left: -8px;
    position: absolute;
}
#regionsContainer {
    width: 60px;
    height: 481px;
    min-height: 481px;
    min-width: 60px;
    max-width: 60px;
    max-height: 481px;
    background-color: #383D3F;
    position: relative;
    top: 25%;
    bottom: 25%;
}
#regionsUnitedStates {
    width: 60px;
    height: 60px;
    background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
    background-position:bottom;
}

Answer 1

你可以像 fizzix 之前提到的那样使用 position: absolute 来做到这一点，并用这个 html 示例来解决你的每个问题

<div id="sidemenu">
    <div id="submenu" class="not-open">
        Sub
        <div id="submenu-inner">
            inner
        </div>
    </div>
    <div id="submenu-item1">
        item
    </div>
</div>

1 第一件事是当您第一次访问该网站时，所有内容都会滑入到位(侧边栏、页脚等)

这可以在文档就绪时使用 jQuery 来实现，如果您想进一步延迟它，则使用 setTimeout，然后向元素添加一个类，就像这样

CSS:

#sidemenu { 
    background: #000; 
    width: 50px; 
    height: 100%; 
    position: absolute;
    left: -50px;
    transition: left ease-in-out 0.5s;
}
#sidemenu.show {
    left: 0;
}

jQuery :

$(function() {
    setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});

2 主要关注的是侧边栏，当您将鼠标悬停在其中一个图标上时，如何出现一种工具提示缓动并缓动到右侧。

这可以通过 hover 上的 CSS 来实现，你需要的是将 float 元素放在你想要悬停的元素中，在这个例子中 submenu-inner inside submenu，然后添加一些 CSS

#submenu {
    background: #fff;
    height: 50px;
    margin: 150px 0 0 0;
    text-align: center;
    position: relative;
}
#submenu.not-open:hover #submenu-inner {
    left: 50px;
    opacity: 1;
}
#submenu-inner {
    opacity: 0;
    position: absolute;
    transition: all ease-in-out 0.5s;
    top: 0;
    left: 250px;
    height: 50px;
    background: #f00;
}

首先，内部元素是透明的，并使用 left 定位到更靠右的位置，然后在悬停时，通过设置 left CSS 将位置设置在容器旁边再次到容器的宽度

3 我想知道的下一部分是当您单击其中一个图标时弹出另一个窗口

和1一样，只是这个是onClick事件触发的

这是关于 JSFIDDLE 的工作示例