问题描述：

我做了一个带转换效果的补充工具栏菜单。补充工具栏转换

问题是，当我点击图标侧边栏有点南瓜夹心字母。

$('.fa-bars').on('click', function clickHandler(e) { 
 
    e.preventDefault(); 
 
    $('.magic-container').toggleClass('closed'); 
 
});

.sidebar-shrink { 
 
    height: 100%; 
 
    overflow-y: auto; 
 
    background: #000; 
 
} 
 
.magic-container.closed .sidebar-left-nav { 
 
    -webkit-transition: width 0.3s; 
 
    transition: width 0.3s; 
 
    width: 0; 
 
    padding: 0; 
 
} 
 
.magic-container.closed .col-md-10 { 
 
    -webkit-transition: width 0.3s; 
 
    transition: width 0.3s; 
 
    width: 100%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="container-fluid magic-container"> 
 
    <div class="col-md-2 sidebar-left-nav"> 
 
     <div class="sidebar-shrink"> 
 
     <ul> 
 
      <li> 
 
      <a href="#">Hello World<i class="pull-right fa fa-bullhorn" aria-hidden="true"></i></a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Hello World<i class="pull-right fa fa-bullhorn" aria-hidden="true"></i></a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-10"> 
 
     <div> 
 
     <h3 class="headline-primary"> 
 
     \t \t \t <i class="fa fa-bars pull-left menu-toggle" aria-hidden="true"></i> 
 
     \t \t \t Sidebar 
 
     \t  </h3> 
 
     <div class="col-md-12"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

什么，我试图存档就是这种效果显示在这里：http://tympanus.net/Development/SidebarTransitions/

我试图translate3d但没有工作，有人知道如何解决这个问题？

编辑：我想保留代码，并尽可能使用CSS。

谢谢。

答

我不知道究竟你想与你的代码是什么，因为你的CSS不够好。与您的js你只是toggle封闭的类，所以你必须使用CSS动画。

和css更容易，你必须设置第一个css无论你想要的，你保留动画切换你的课程。

例子：幻灯片从留下

.sidebar-left-nav { 
    -webkit-transform: translate3d(-100%, 0px, 0px); 
    transform: translate3d(-100%, 0px, 0px); 
    visibility: visible; 
    transition: all 0.5s ease 0s; 
    -webkit-transition: all 0.5s ease 0s; 
} 
.closed .sidebar-left-nav { 
    -webkit-transform: translate3d(0px, 0px, 0px); 
    transform: translate3d(0px, 0px, 0px); 
    visibility: visible; 
}

jsfiddle demo

这里刚刚成立第一如何默认显示的元素，并添加后一类要如何显示元素。

你也可以用其他的方式做到这一点，如：

.sidebar-left-nav { 
    left: -100%; 
    position:relative; 
    visibility: visible; 
    transition: all 0.5s ease 0s; 
} 
.closed .sidebar-left-nav { 
    left: 0; 
    visibility: visible; 
}

jsfiddle demo

您在您的文章，你的“边栏有点压扁夹字母”之称。

是的，这将是因为你想用宽度做动画，你不能避免它，如果你做了宽度动画。

如果你仍然想用宽度设置动画，用px设置固定（你也可以通过jquery设置动态px），然后用css宽度动画父元素。像：

jsfiddle demo

Q，和为贵问题吗？你使用这段代码的目的是什么？

.magic-container.closed .col-md-10 { 
    -webkit-transition: width 0.3s; 
    transition: width 0.3s; 
    width: 100%; 
}

更新演示和例子 - tympanus

Reveal

Push

个
W3Schools的例子

w3schools - sidenav_push

Another way w3schools push

希望它是有意义

非常感谢这正是我所期待的，但只有一件事你所有的样品侧栏出现在顶部，我试图做的是当侧栏打开时将内容向右推，当关闭时，内容应该像这个示例一样向左推：http://www.w3schools.com/howto /tryit.asp?filename=tryhow_js_sidenav_push – Raduken

好吧我更新我的答案。希望它能帮助你实现你想要的。 – mlbd

@Raduken你有没有看到我在我上次更新后添加的演示？ – mlbd

答

问题是，当侧边栏父级具有“关闭”类时，您将转换和宽度仅设置为边栏。所有你需要的是把过渡样式侧边栏，当父母有没有类“封闭”，像这样：

.sidebar-left-nav { 
-webkit-transition: width 0.3s; 
transition: width 0.3s; 
width: 100%; 
}

然后再把：

.magic-container.closed .sidebar-left-nav { 
width: 0; 
padding: 0; 
}

关当然，你将需要添加更多定位样式等。祝你好运！

感谢您的帮助，但我不能修正:(你可以编辑jsfiddle吗？https://jsfiddle.net/uc6yntfL/，谢谢 – Raduken

你的小提琴停止工作......你为什么不直接从这里下载codropes的源代码：http://tympanus.net/codrops/2013/08/28/TRA无缝画布导航/ 这就是你如何更好地理解它的工作原理。所有你需要的只是删除不必要的文件。 – PapaSoft

谢谢，但我正在寻找解决我的问题使用我的代码。 – Raduken

答

我试过的东西，你希望它会帮助你避免脚本我加它，因为面临着一些问题，加上小提琴链接

<script> 
var o =document.getElementById("one"); 
var to =document.getElementById("two"); 
to.style.display = 'none'; 

function openNav() { 
document.getElementById("mySidenav").style.width = "150px"; 
document.getElementById("main").style.marginLeft = "150px"; 
o.style.display = 'none'; 
to.style.display = ''; 
} 

function closeNav() { 

document.getElementById("mySidenav").style.width = "0"; 
document.getElementById("main").style.marginLeft= "0"; 
o.style.display = ''; 
to.style.display = 'none'; 

} 

</script>

见小提琴 below.I看到你的效果“兜底”并尝试类似的东西，希望它会为你工作或帮你修改more.And是请添加CSS为你的愿望我只是我自己添加的，你可以定制出是你，也是JS代码

sidebarfiddle

如果链路断开再次请让我知道我会后整个代码

谢谢，但链接是打破 – Raduken

看到最新编辑的提琴 –

谢谢，但是有可能解决这个问题，只是与CSS？ – Raduken

答

首先，你可以设置在侧边栏position: absolute从元素删除它的流量和设置z-index: -1所以它的内容。接下来，您可以在内容上使用width: 100vw，因此当您使用转换内容时不会受到影响，您只需创建一个类别transform: translateX()并在点击时将其切换。

我还添加了一个暗淡效果，其中一个伪元素会改变其点击时的不透明度，这里重要的是设置pointer-events: none，以便您可以单击按钮。

$('button').click(function() { 
 
    $('.content').toggleClass('move'); 
 
})

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow-x: hidden; 
 
    position: relative; 
 
} 
 
.sidebar { 
 
    width: 200px; 
 
    height: 100vh; 
 
    background: lightblue; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: -1; 
 
} 
 
.content { 
 
    background: white; 
 
    min-height: 100vh; 
 
    width: 100vw; 
 
    transition: all 0.3s ease-in; 
 
    position: absolute; 
 
} 
 
.content:before { 
 
    content: ''; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    background: black; 
 
    transition: all 0.3s ease-in; 
 
    opacity: 0; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
.move { 
 
    transform: translateX(200px); 
 
} 
 
.content.move:before { 
 
    opacity: 0.4; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sidebar">lorem ipsum</div> 
 
<div class="content"> 
 
    <button>Sidebar</button> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore odio consectetur suscipit, iusto accusantium, aspernatur quia possimus debitis enim similique veniam voluptatem iste soluta, vitae officia quos earum quaerat reprehenderit.</p> 
 
</div>

答

只是抛出一个CSS唯一的解决办法到一堆，我做了一个复选框一个版本。这样，它是快速和没有JavaScript

工作

html,body{ 
 
    height: 100%; 
 
} 
 
body{ 
 
    margin: 0; 
 
    font-family: "Lato", sans-serif; 
 
    overflow-x: hidden; 
 
} 
 
#sidebarCheckbox{ 
 
    display: none; 
 
} 
 
#sidebarCheckbox:checked ~ #main{ 
 
    transform: translateX(200px); 
 
} 
 
#sidebar{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 200px; 
 
    padding: 8px 0; 
 
    background: #000; 
 
} 
 
#sidebar ul{ 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
#sidebar a{ 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    color: #05F; 
 
} 
 
#sidebar i.fa-bullhorn{ 
 
    float: right; 
 
} 
 
#main{ 
 
    position: relative; 
 
    min-height: 100%; 
 
    padding: 16px; 
 
    background-color: #FFF; 
 
    transition: transform .3s ease; 
 
} 
 
label[for="sidebarCheckbox"]{ 
 
    font-size: 30px; 
 
    cursor: pointer; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<input type="checkbox" id="sidebarCheckbox" /> 
 
<div id="sidebar"> 
 
    <ul> 
 
    <li><a href="#">Hello<i class="fa fa-bullhorn" aria-hidden="true"></i></a></li> 
 
    <li><a href="#">Hello<i class="fa fa-bullhorn" aria-hidden="true"></i></a></li> 
 
    </ul> 
 
</div> 
 
<div id="main"> 
 
    <label for="sidebarCheckbox" style="">&#9776; SideBar</label> 
 
</div>

我彻底放弃了使用引导程序，但它同样的道理。顶部有一个复选框，然后是#sidebar，然后是#main内容。在主要内容中，有一个链接到复选框的标签（使用原生HTML）。当你点击它，复选框选中得到，这是我在CSS中使用

#sidebarCheckbox:checked ~ #main{ 
    transform: translateX(200px); 
}

它会去的主要内容，并告诉它为200px转化为正确的，这是我有多宽所做的侧边栏。当然，你可以随意改变它。

希望这有助于

答

如果你用动画width属性会崩溃的字母侧边栏。只有这样做的方法是将另一个子div添加到侧栏并添加侧栏父级overflow-hidden。

但我认为这是你正在尝试做的：

$('.fa-bars').on('click', function clickHandler(e) { 
 
    e.preventDefault(); 
 
    $('body').toggleClass('sidebar-open'); 
 
});

.product-categories{ 
 
    width: 100%; 
 
    float:left; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
.sidebar-shrink { 
 
    height: 100%; 
 
    overflow-y: auto; 
 
    background: #000; 
 
} 
 

 
.magic-container .sidebar-left-nav { 
 
    width : 300px; 
 
    -webkit-transition : all .3s; 
 
    transition : all .3s; 
 
    position : absolute; 
 
    -webkit-transform: translateX(-100%); 
 
    -moz-transform: translateX(-100%); 
 
    -ms-transform: translateX(-100%); 
 
    -o-transform: translateX(-100%); 
 
    transform: translateX(-100%); 
 
    position: absolute; 
 
    left : 0; 
 
    top : 0; 
 
    height : 100%; 
 
} 
 

 
body.sidebar-open .sidebar-left-nav { 
 
    -webkit-transform: translateX(0); 
 
    -moz-transform: translateX(0); 
 
    -ms-transform: translateX(0); 
 
    -o-transform: translateX(0); 
 
    transform: translateX(0); 
 
} 
 

 
body.sidebar-open .col-md-10{ 
 
    -webkit-transform: translateX(300px); 
 
    -moz-transform: translateX(300px); 
 
    -ms-transform: translateX(300px); 
 
    -o-transform: translateX(300px); 
 
    transform: translateX(300px); 
 
} 
 

 
.magic-container .col-md-10 { 
 
    -webkit-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
    width: 100%; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="container-fluid magic-container"> 
 
    <div class="col-md-2 sidebar-left-nav"> 
 
     <div class="sidebar-shrink"> 
 
     <ul> 
 
      <li> 
 
      <a href="#">Hello World<i class="pull-right fa fa-bullhorn" aria-hidden="true"></i></a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Hello World<i class="pull-right fa fa-bullhorn" aria-hidden="true"></i></a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-10"> 
 
     <div> 
 
     <h3 class="headline-primary"> 
 
     \t \t \t <i class="fa fa-bars pull-left menu-toggle" aria-hidden="true"></i> 
 
     \t \t \t Sidebar 
 
     \t  </h3> 
 
     <div class="col-md-12"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

我添加静态宽度侧边栏。如果你不想这样做。你需要使用window.getComputedStyle（）。并通过javascript将转换值添加到col-md-10。

答

嗨也许试试这个代码< - 更新/删除/添加DOM元素 - >

var clSideBar = $('.magic-container .sidebar-left-nav').clone(); 
 
var ctMagic = $('.magic-container'); 
 
var sideBarLeft = $('.magic-container .sidebar-left-nav'); 
 
var btnBars = $('.magic-container .fa-bars'); 
 

 
sideBarLeft.remove(); // Remove sidebar nav 
 
    
 
btnBars.on('click', function clickHandler(e) { 
 
    e.preventDefault(); 
 
    ctMagic.toggleClass('closed'); 
 
    
 
    if(clSideBar && ctMagic.hasClass('closed')) { 
 
     setTimeout(function(){ 
 
      clSideBar.remove(); 
 
     }, 600); 
 
    } else { 
 
     clSideBar.prependTo(ctMagic); 
 
     clSideBar.addClass('timeout'); 
 
     setTimeout(function(){ 
 
       clSideBar.removeClass('timeout'); 
 
     }, 5); 
 
    } 
 

 
});

.magic-container .sidebar-left-nav { 
 
    width:180px; 
 
    margin-left:0px; 
 
    position:fixed; 
 
    z-index:1; 
 
    left:0px; 
 
    top:0px; 
 
    padding: 0; 
 
    height:100%; 
 
    -webkit-transition: width 0.5s; 
 
    transition: width 0.5s; 
 
    overflow-x: hidden; 
 
} 
 
.magic-container .sidebar-left-nav.timeout { 
 
    width:0px; 
 
} 
 
.magic-container .cont-main { 
 
    margin-left:180px; 
 
    -webkit-transition: margin-left 0.5s; 
 
    transition: margin-left 0.5s; 
 
} 
 
    
 
.magic-container.closed .sidebar-left-nav { 
 
    width: 0px; 
 
} 
 
.magic-container.closed .cont-main { 
 
    margin-left:0px; 
 
} 
 
.magic-container .menu-toggle { 
 
    cursor:pointer; 
 
} 
 
.sidebar-shrink { 
 
    height: 100%; 
 
    width:180px; 
 
    background: #000; 
 
    padding: 0px; 
 
} 
 
.sidebar-shrink a { 
 
    display:block; 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
    white-space:nowrap; 
 
} 
 
.sidebar-shrink ul { 
 
    padding-left: 0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="container-fluid magic-container closed"> 
 
    <div class="col-md-2 sidebar-left-nav"> 
 
     <div class="sidebar-shrink"> 
 
     <ul> 
 
      <li> 
 
      <a href="#">Hello World<i class="pull-right fa fa-bullhorn" aria-hidden="true"></i></a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Hello World<i class="pull-right fa fa-bullhorn" aria-hidden="true"></i></a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-10 cont-main"> 
 
     <div> 
 
     <h3 class="headline-primary"> 
 
     \t \t \t <i class="fa fa-bars pull-left menu-toggle" aria-hidden="true"></i> Sidebar 
 
     \t  </h3> 
 
     <div class="col-md-12"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

问候:)

谢谢@jseezo，:)，只是一个小问题，点击sidebar-left-nav之后可以从DOM中删除吗？和主要内容获得宽度：100％？以及如果我再次单击sidebar-left-nav回到DOM？那是我的最后一次。：0谢谢 – Raduken

不客气@Reduken。嗯，我可以尝试，但为什么你想从DOM中删除，你必须或你想？在我看来，这段代码应该在DOM内部，但我可以尝试编辑。问候:) – jseezo

如果你可以创建一个额外的样本，保持其他人将罚款，我的问题是我在另一个代码中应用你的代码:(如果我只使用你的代码工作完美，但是当我在其他代码刹车应用一切，因为其他类和东西是否可以理解？但我认为只是一个jquery可以提供帮助吗？在我的情况下，我需要从dom中删除侧边栏并再次包含，并在侧栏离开时将内容100％明白了吗？ – Raduken

补充工具栏转换

例子：幻灯片从留下

相关推荐