Question

我想将侧边栏导航菜单添加到我的html页面。这是我的代码

    <html>
    <head>
    <title>Admin dashboard</title>
    </head>
      <header style="height:100px; background-color:#666; padding-   top:35px"><h2 style="color:#FFF">Dashboard</h2></header>
     <body>
     <div style="width:100%; height:100px">

       <div style="background-color:#aaa; height:550px;width:200px;float:left;">
       <div><b>Main Menu</b></div>
       HTML<br />
       PHP<br />
       PERL...
       </div>
       <div style="background-color:#eee; height:550px;width:1132px;float:left;">
      <p></p>
      </div>



      <div style="background-color:#b5dcb3;clear:both">
    <center>
     Copyright@GIMT
    </center>
    </div>
    </div>
    </body>
    </html>

我想在下面的代码中添加侧边栏导航菜单

<div style="background-color:#aaa;  height:550px;width:200px;float:left;">
             <div><b>Main Menu</b></div>
              HTML<br />
                PHP<br />
               PERL...
              </div>

如何添加？

Answer 1

首先，一些指示：

使用<!DOCTYPE html>。
您的内容应始终位于<body>内。 <header>标记介于两者之间。
不要使用内联样式。
使用position来设置固定属性和其他属性的样式。

<强>段

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

header {
  background-color: #666;
  color: #fff;
  line-height: 2.5;
  padding: 10px;
  height: 80px;
}

main {
  padding-left: 220px;
}

aside {
  position: fixed;
  left: 0;
  width: 200px;
  background-color: #aaa;
  top: 100px;
  bottom: 0;
  overflow: auto;
}

<header>
  <h1>Dashboard</h1>
</header>
<main>
  <aside>
    <h3>Main Menu</h3>
    <ul>
      <li>HTML</li>
      <li>PERL</li>
      <li>PHP</li>
    </ul>
  </aside>
</main>

注意：我已将overflow: auto添加到侧边栏，因此如果内容溢出，您将获得不影响主要内容滚动条的滚动条。

内容较大的代码段

$(function () {
  $("aside ul").append(function () {
    return Array.apply(null, {length: 101}).map(Number.call, Number).map((x) => "<li>Item " + x + "</li>").join("");
  });
});

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

header {
  background-color: #666;
  color: #fff;
  line-height: 2.5;
  padding: 10px;
  height: 80px;
}

main {
  padding-left: 220px;
}

aside {
  position: fixed;
  left: 0;
  width: 200px;
  background-color: #aaa;
  top: 100px;
  bottom: 0;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h1>Dashboard</h1>
</header>
<main>
  <aside>
    <h3>Main Menu</h3>
    <ul>
      <li>HTML</li>
      <li>PERL</li>
      <li>PHP</li>
    </ul>
  </aside>
</main>

如何添加侧边栏导航

1 个答案: