Question

我想创建主页面，其中包含导航键，左侧导航栏和中间内容。菜单和导航键应固定在屏幕上。只有内容应该可滚动。

当菜单展开时，内容被推向右侧，内部没有元素重新排序，只是按下它在右侧，所以右边的部分内容将被隐藏在屏幕外菜单已扩展。

以下图片说明：

Collapsed menu

Expanded menu

（抱歉，由于声誉不佳，我无法嵌入图片）

因此，当我将鼠标悬停在菜单上时，它会展开并将内容推向右侧。当鼠标在菜单外时，它会折叠并仅显示图标。

我几乎设法做到了这一点，但我无法给你代码，它是专业的。

我是CSS的初学者，对我来说很难，我尝试了很多但是无法设法构建此页面。

我将菜单和内容放在gmail_text = (TextView) ButterKnife.findById(badgeLayout, R.id.gmail_textview);上，但是当我加载新页面时，内容会显示在菜单上，因此我无法点击菜单图标。

Answer 1

你可以尝试这个演示，

＆＃13;

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}

＆＃13;

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

＆＃13;

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<div id="main">
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
</div>

＆＃13;

Answer 2

如果我正确理解你的帖子，我就会按照你想要的方式工作。当您将鼠标悬停在侧面导航菜单上时，它会为动画使用几行Jquery。图标和文字只是占位符

＆＃13;

$(document).ready(function(){
  $(".sidenav").hover(function(){
    $(".hidetext").stop(true).toggle("fast");
  });
});

＆＃13;

html, body{
  height: 100%;
  min-height: 100%;
}

.navbar {
  margin-bottom: 0 !important;
}

.sidenav-wrapper {
  margin-top: 51px;
}

.sidenav {
  background-color: aquamarine;
  height: 100%;
  display: inline-block;
  float: left;
  z-index: 1;
  position: fixed;
}

.sidenav span {
  font-size: 45px;
  padding: 20px;
}

.sidenav span .hidetext {
  font-size: 18px;
  margin-left: 30px;
  margin-top: 12px;
  float: right;
  display: none; /* Changes to inline-block on hover */
}

.main-content {
  margin-top: 51px;
  margin-left: 89px;
  z-index: -1;
  position: absolute;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<meta charset=utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topnav">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
    </div>
    <div class="collapse navbar-collapse" id="topnav">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
      </ul>
    </div>
  </div>
</nav>
  
  <div class="sidenav">
    <div class="sidenav-wrapper">
    <span class="glyphicon glyphicon-home home" aria-hidden="true"><a href="#"><p class="hidetext">Home</p></a></span>
    <br>
    <span class="glyphicon glyphicon-cog" aria-hidden="true"><a href="#"><p class="hidetext">Options</p></a></span></div>
  </div>
  
  <div class="main-content">
    <p>Stuff on the right of side navigation bar</p>
    <div class="test"></div>
  </div>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>

</html>

＆＃13;

BootStrap 3构建主页面

2 个答案: