Question

我想创建一个在鼠标悬停时从左到右切换的效果。我希望菜单覆盖80％的空间，推动其他页面内容。我在JSFiddle上已经达到了这个目标，但就我的知识而言，现在它已经在JQuery中了。

您可以在此处查看我的JSFiddle

HTML：

<div class="trigger"></div>
<div class="example"></div>

CSS：

.trigger{
    position:relative;
    height:50px;
    width:50px;
    left:80%;
    background-color:black;   
}
.example{
    position:fixed;
    height:100%;
    width:75%;
    top:0;
    left:0;
    background-color:black;
    display:none;

}

JQuery的：

$('.trigger').mouseover(function() {
    $('.example').dequeue().stop(true, true).show(400);
}).mouseout(function() {
    $('.example').dequeue().stop(true, true).hide(400);
});

I have seen a similar thing here which they use for their menu

Answer 1

我在JSFiddle上汇总了您正在寻找的基本示例 https://jsfiddle.net/sGJ7W/284/

的Javascript

$('.sidebar').mouseover(function() {
    $('.content').show()
    $('.sidebar').stop().animate({width: "200px"}, 400)
}).mouseout(function() {
    $('.sidebar').stop().animate({width: "50px"}, 400)
    $('.content').hide()
});

CSS

.sidebar {
    width: 50px;
    background-color: #ccc;
    height: 600px;
}

.content {
    display: none;
}

HTML

<div class="sidebar">
  <div class="content">
    <p class='info'>Info</p>
    <p class='info'>Info</p>
    <p class='info'>Info</p>
    <p class='info'>Info</p>
    <p class='info'>Info</p>
    <p class='info'>Info</p>
    <p class='info'>Info</p>
  </div>
</div>

Answer 2

我认为你正在寻找类似的东西。

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("active");
});

#wrapper {
  padding-left: 70px;
  transition: all .4s ease 0s;
  height: 100%
}
#sidebar-wrapper {
  margin-left: -150px;
  left: 70px;
  width: 150px;
  background: #222;
  position: fixed;
  height: 100%;
  z-index: 10000;
  transition: all .4s ease 0s;
}
.sidebar-nav {
  display: block;
  float: left;
  width: 150px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#page-content-wrapper {
  padding-left: 0;
  margin-left: 0;
  width: 100%;
  height: auto;
}
#wrapper.active {
  padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
  left: 150px;
}
#page-content-wrapper {
  width: 100%;
}
#sidebar_menu li a,
.sidebar-nav li a {
  color: #999;
  display: block;
  float: left;
  text-decoration: none;
  width: 150px;
  background: #252525;
  border-top: 1px solid #373737;
  border-bottom: 1px solid #1A1A1A;
  -webkit-transition: background .5s;
  -moz-transition: background .5s;
  -o-transition: background .5s;
  -ms-transition: background .5s;
  transition: background .5s;
}
.sidebar_name {
  padding-top: 25px;
  color: #fff;
  opacity: .7;
}
.sidebar-nav li {
  line-height: 40px;
  text-indent: 20px;
}
.sidebar-nav li a {
  color: #999999;
  display: block;
  text-decoration: none;
}
.sidebar-nav li a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
  height: 65px;
  line-height: 60px;
  font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
  color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
  color: #fff;
  background: none;
}
.content-header {
  height: 65px;
  line-height: 65px;
}
.content-header h1 {
  margin: 0;
  margin-left: 20px;
  line-height: 65px;
  display: inline-block;
}
@media (max-width: 767px) {
  #wrapper {
    padding-left: 70px;
    transition: all .4s ease 0s;
  }
  #sidebar-wrapper {
    left: 70px;
  }
  #wrapper.active {
    padding-left: 150px;
  }
  #wrapper.active #sidebar-wrapper {
    left: 150px;
    width: 150px;
    transition: all .4s ease 0s;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>
  <div id="wrapper" class="active">
    <div id="sidebar-wrapper">
      <ul id="sidebar_menu" class="sidebar-nav">
        <li class="sidebar-brand"><a id="menu-toggle" href="#">Menu </a>
        </li>
      </ul>
      <ul class="sidebar-nav" id="sidebar">
        <li><a>Link1</a>
        </li>
        <li><a>link2</a>
        </li>
      </ul>
    </div>
    <!-- Page content -->
    <div id="page-content-wrapper">
      <!-- Keep all page content within the page-content inset div! -->
      <div class="page-content inset">
        <div class="row">
          <div class="col-md-12">
            <p class="well lead">Click on the Menu to Toggle Sidebar</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

在鼠标悬停时切换div

2 个答案: