向左

向左

关注
发信
关注(28)粉丝(399)

jquery - 当侧边栏打开时，车身将向左推

我正在尝试构建一种效果，以便当我单击按钮时，侧栏将打开并将页面主体推向左侧。我的按钮正常工作，但身体没有向左按下，这是我的完整代码。我尝试给身体上更多的课，但没有用。



		$(document).ready(function(){
			$('#sidebar-btn').click(function(){
				$('#sidebar').toggleClass('visible');
				$('.body-menu').toggleClass('.body-menu-left');
			});
		})

body{
	margin:0px;
	padding:0px;
	font-family: "Helvetica Neue", Helvetica, Arial;
}

#sidebar{
	background:black;
	width: 370px;
	height:100%;
	display: block;
	position: fixed;
	left:-370px;
	top:0px;
	transition: left 0.3s linear;
}
#sidebar.visible{
	left:0px;
	transition: left 0.3s linear;
}
ul{
	margin:0px;
	padding: 0px;
	padding-top: 65px;
}
ul li{
	list-style: none;
	padding-top: 10px;
}
ul li a{
	background:black;
	border-bottom:1px solid #111;
	display: block;
	width: 280px;
	padding: 10px;
	text-decoration: none;
}
#font1{
		color:gray;
		font-weight: bold;
		text-decoration: none
}
#font2{
	color:white;
	font-weight: bold;
	text-decoration: none
}
#sidebar-btn{
	display: inline-block;
	vertical-align: middle;
	width:20px;
	height: 15px;
	cursor: pointer;
	margin:20px;
	position: absolute;
	top: 0px;
	right:-60px;
}
#sidebar-btn span{
	height:1px;
	background:white;
	margin-bottom: 5px;
	display: block;
}
#sidebar-btn span:nth-child(2){
	width:75%;
}
#sidebar-btn span:nth-child(3){
	width:50%;
}
#title-menu{
	color: white;
	letter-spacing: 15px;
	padding-left: 25px;
}
#title-menu > h2{
	padding-left: 20px;
}
/*hover*/
.hvr-underline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;

}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background-color: white !important;
  height: 2px !important;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right:60;
  background-color: white;
}

/*Fliphvr*/
/* Set-up */


/* Container box to set the sides relative to */
.cube {
	width: 30%;
	padding-left: 20px;
	height: 50px;
	-webkit-transition: -webkit-transform .10s;
	transition: transform .10s; /* Animate the transform properties */
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d; /* <-NB */
}

/* The two faces of the cube */
.flippety,.flop {
	background: black;
	height: 50px;
}

/* Position the faces */
.flippety {
	-webkit-transform: translateZ(50px);
	transform: translateZ(50px);
}

.flop {
	-webkit-transform: rotateX(-90deg) translateZ(-50px);
	transform: rotateX(-90deg) translateZ(-50px);
}

/* Rotate the cube */
.cube:hover {
	-webkit-transform: rotateX(89deg);
	transform: rotateX(89deg); /* Text bleed at 90º */
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Sidebar</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	<link rel="stylesheet" href="css/hover.css">
	<link rel="stylesheet" href="css/hover-min.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body background="https://i.ytimg.com/vi/3bvnoqsvY-M/maxresdefault.jpg">
	<div>
	<div id="sidebar">
		<div id="title-menu"><h2>CRIMINAL</h2></div>
		<ul>
			<li><div class="cube">
			<div class="flippety">
			<a href="#" id="font1">HOME</a>
			</div>
			<div class="flop">
			<a href="#" class="hvr-underline-from-left" id="font2">HOME</a>
			</div>
			</div>
			</li>
			<li><div class="cube">
			<div class="flippety">
			<a href="#" id="font1">THE STORY</a>
			</div>
			<div class="flop">
			<a href="#" class="hvr-underline-from-left" id="font2">THE STORY</a>
			</div>
			</div>
			</li><li><div class="cube">
			<div class="flippety">
			<a href="#" id="font1">CAST & FILM MAKERS</a>
			</div>
			<div class="flop">
			<a href="#" class="hvr-underline-from-left" id="font2">CAST & FILM MAKERS</a>
			</div>
			</div>
			</li><li><div class="cube">
			<div class="flippety">
			<a href="#" id="font1">GALLERY</a>
			</div>
			<div class="flop">
			<a href="#" class="hvr-underline-from-left" id="font2">GALLERY</a>
			</div>
			</div>
			</li><li><div class="cube">
			<div class="flippety">
			<a href="#" id="font1">VIDEOS</a>
			</div>
			<div class="flop">
			<a href="#" class="hvr-underline-from-left" id="font2">VIDEOS</a>
			</div>
			</div>
			</li><li><div class="cube">
			<div class="flippety">
			<a href="#" id="font1">ARE YOU A PSYCHOPATH?</a>
			</div>
			<div class="flop">
			<a href="#" class="hvr-underline-from-left" id="font2">ARE YOU A PSYCHOPATH?</a>
			</div>
			</div>
			</li>
		</ul>
	<div id="sidebar-btn">
		<span></span>
		<span></span>
		<span></span>
	</div>
	</div>

</body>
</html>

最佳答案

不确定要查找的内容，但在下面的代码段中，如果单击“菜单”位置，则侧边栏将移至左侧。链接显然会指向您所指示的任何地方

我有一个小提琴（从前）在https://jsfiddle.net/RachGal/sokq4956/1/



$("#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 href="/index.html">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>





希望这可以帮助

瑞秋

关于jquery - 当侧边栏打开时，车身将向左推，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37394607/

10-15 19:42
Powered by LMLPHP ©2024 向左 0.027729