Question

我有一个侧边栏菜单，可以在悬停时展开。工作真的很棒，但我想把它扩展到哪里，如果它触及另一个元素它将推动它。我说这是因为我的内容将集中在一起，所以它归结为用户解决方案。在我的页面上，除了菜单之外我还有另外一个元素，这是一个错误（我故意为了测试而触发了这个错误）。误差元素应为100％宽度。再次，这是出于测试目的。现在，即使未展开，侧边栏也会与错误元素重叠。我该怎么做才能解决所有这些问题？

HTML：

<div class="isa_error">
  <i class="fa fa-times-circle"></i>
Sorry, an error happened. Please try again later<br>
Error 2 : mysqli_connect(): (28000/1045): Access denied for user 'my_user'@'localhost' (using password: YES) in /home/jollyrogerpcs/public_html/profile/settings/mysqli_connect.php on line 2 
</div>
<!DOCTYPE html>
<head>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" href="styles/errors.css">
<link rel="stylesheet" href="styles/mainStyle.css">
<link rel="stylesheet" href="styles/sidebar.css">
</head><html>
 <body>
      <div class="slide-menu">
            <ul>
                <li><span class="navLeft">&equiv;</span><span class="menuTitle">Navigation</span></li>
                <li><a href="#"><span class="navLeft"></span><span class="navText">Home</span></a></li>
                <li><a href="#"><span class="navLeft"></span><span class="navText">Gallery</span></a></li>
                <li><a href="#"><span class="navLeft"></span><span class="navText">Request Pilot Cars</span></a></li>
                <li><a href="#"><span class="navLeft"></span><span class="navText">Submit Invoice</span></a></li>
                <li><a href="#"><span class="navLeft"></span><span class="navText">Contact Us</span></a></li>
                <li><span class="navLeft"></span><span class="menuTitle">Site Stats</span></li>
                <li><span class="navLeft"></span><span class="menuText">Visitors: <span class="navNumber">001</span></span></li>
            </ul>
            <ul class="login">
                <li><span class="navLeft"></span><span class="menuTitle">Admin Panel</span></li>
                <li><a href="#"><span class="navLeft"></span><span class="navText">Login</span></a></li>   

            </ul>
    </div> </body>
</html>

边栏CSS

.navLeft {
  position: relative;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
  color: #fff;
  font-size: 2em;
}
.menuTitle { 
  color: #ff6400; 
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 190px;
  font-family: 'Iceland', sans-serif;
  font-size: 18pt;
  font-weight: bold;
  }
.slide-menu:hover {
  width: 250px;
  overflow: visible;
  background-image: none;
}
.slide-menu {
  background: #000;
  border-right: 1px solid #ff6400;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  width: 60px;
  overflow: hidden;
  -webkit-transition: width .05s linear;
  transition: width .05s linear;
  -webkit-transform: translateZ(0) scale(1, 1);
  z-index: 1000;
}
.slide-menu ul {
  margin: 7px 0;
}
.slide-menu ul li {
  position: relative;
  display: block;
  width: 250px;
}
.slide-menu ul li a {
  position: relative;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  color: #fff;
  font-family: Iceland;
  font-size: 14px;
  text-decoration: none;
  -webkit-transform: translateZ(0) scale(1, 1);
  -webkit-transition: all .1s linear;
  transition: all .1s linear;
}
.slide-menu .navText, .slide-menu .menuText {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 190px;
  font-family: 'Iceland', sans-serif;
  font-size: 14pt;
}
.slide-menu .menuText {
  color: #999;
}
.slide-menu .menuText .navNumber {
  background-color: #232323;
  border-radius: 5px;
  font-size: 10pt;
  padding: 2px 4px 2px 4px;
}
.slide-menu ul.login {
  position: absolute;
  left: 0;
  bottom: 0;
}
.slide-menu li:hover a {
  color: #ff6400;
  text-indent: 30px;
  text-shadow: none!important;
}

错误CSS：

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

.isa_info, .isa_success, .isa_warning, .isa_error {
margin-bottom: 10px;
padding:12px;
}
.isa_info {
    color: #00529B;
    background-color: #BDE5F8;
}
.isa_success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.isa_warning {
    color: #9F6000;
    background-color: #FEEFB3;
}
.isa_error {
    color: #D8000C;
    background-color: #FFBABA;
}
.isa_info i, .isa_success i, .isa_warning i, .isa_error i {
    margin:10px 22px;
    font-size:2em;
    vertical-align:middle;
}

我的错误元素仅在我的DOCTYPE之前，因为那是我的PHP错误处理程序，我确定它在其他所有内容之前（主要是因为我不确定它是否会完全有效，如果它不在其他所有之前）。

我的错误元素确实使用了列出的某些第三方css，但是一旦我设计了自己的css，我今天就会改变它。

感谢。

编辑：您可以在http://profile.jollyrogerpcs.com/

查看我的测试页

编辑2：包括jsfiddle：http://jsfiddle.net/f0mqv7yg/

Answer 1

如果您只想从侧面菜单中缩进内容（错误）部分。添加样式margin-left：60 px到isa_error类; 否则想要在菜单扩展时调整内容（错误）区域的大小，然后应该使用javascript或jquery

展开时，侧边菜单推送内容

1 个答案: