我希望我的侧边栏在打开时将内容推送到我已经完成但我的固定导航保持在左侧的位置:0px; 相对于veiwport而不是相对定位的父元素。 我的导航是100%
我的侧边栏在firefox上正常工作但在chrome中突破了父级
链接到jsfiddle
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Test Page</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> </head> <body> <div id="sidebar"> </div> <div class="content"> <div id="nav"> <p class="button"></p> </div> </div> <script type="text/javascript"> $('.button').click(function(){ $('.content').toggleClass('slide'); }); </script> </body> </html>我的CSS
@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } *{ margin: 0; padding: 0; } #sidebar{ position: fixed; left: 0; top: 0; width: 250px; background: rgb(60,60,60); float:left; height: 600px; z-index: -1; } .content{ position: relative; left: 0; top: 0; width: 100%; height:600px; background: #FFF; -moz-transition:all 0.4s ease-in-out; -webkit-transition:all 0.4s ease-in-out; } .slide{ left: 250px; } #nav{ position: fixed; top: 0; background: #0af; width: 100%; box-shadow: 1px 1px #ddd; } #nav p:before{ content: "\e000"; } .button{ font-family: 'icomoon'; font-size: 2em; color: #FFF; cursor: pointer; margin: 10px; }在这里查看
I would like my sidebar to push the content across when opened which i have achived but my fixed navigation stays at the position of Left: 0px; relative to the veiwport rather than the relative positioned parent element. my nav's with is 100%
my sidebar works fine on firefox but breaks out of parent in chrome
link to jsfiddle
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Test Page</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> </head> <body> <div id="sidebar"> </div> <div class="content"> <div id="nav"> <p class="button"></p> </div> </div> <script type="text/javascript"> $('.button').click(function(){ $('.content').toggleClass('slide'); }); </script> </body> </html>MY CSS
@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } *{ margin: 0; padding: 0; } #sidebar{ position: fixed; left: 0; top: 0; width: 250px; background: rgb(60,60,60); float:left; height: 600px; z-index: -1; } .content{ position: relative; left: 0; top: 0; width: 100%; height:600px; background: #FFF; -moz-transition:all 0.4s ease-in-out; -webkit-transition:all 0.4s ease-in-out; } .slide{ left: 250px; } #nav{ position: fixed; top: 0; background: #0af; width: 100%; box-shadow: 1px 1px #ddd; } #nav p:before{ content: "\e000"; } .button{ font-family: 'icomoon'; font-size: 2em; color: #FFF; cursor: pointer; margin: 10px; }VIEW HERE
最满意答案
添加position: absolute; to .slide{...} css将解决Chrome中的问题,你可能还需要在删除.slide类时修复动画
祝你好运
[更新]这是一个工作示例: http : //jsfiddle.net/QdVKD/1/
固定页面的宽度和未链接的滚动: http : //jsfiddle.net/QdVKD/2/
Adding position: absolute; to .slide{...}css will fix the problem in Chrome, you might also have to fix the animation when .slide class is removed
Good luck
[UPDATE] HERE IS A WORKING EXAMPLE: http://jsfiddle.net/QdVKD/1/
FIXING THE WIDTH AND UNNEEDED SCROLL OF PAGE: http://jsfiddle.net/QdVKD/2/
更多推荐
发布评论