Question

屏幕左侧有一个补充工具栏。我可以通过按下按钮来切换它。在右边我有内容。

我想将按钮放在顶部的水平条上。侧边栏似乎覆盖了这个栏，所以我看不到按钮。

这是我目前的代码：

Html文件：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
</title>
</head>

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>

<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">

<body onload="InitDocument()">

<div id="topBar">
  <button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
</div>

<div id="container">
<div id="sideNav">
<button type="button" onclick="NewEntry()">+</button>
<p>test</p>
</div>
<div id="mainArea">
<p>Title:</p>
<input id="titleInputField" type="text">
<p>Text:</p>
<textarea id="textArea"> </textarea>
<p></p>
<button type="button" onclick="SaveEntry()">Save</button>
</div>
</div>

</body>
</html>

Css文件：

    body{
  background-color: #EEEEEE;
  color: #000000;
}

* {
    margin: 0;
    padding: 0;
}

#sideNav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  background-color: #333333;
  color: #EEEEEE;
}

Js档案：

var navIsOpen = true;

function InitDocument(){ // Initialization
  ToggleNavbar();
}

function ToggleNavbar(){ // show - hide the navbar
  var sideNavWidth = "0px";
  var mainAreaWidth = "0px";
  if (navIsOpen)
  {
    sideNavWidth = "200px";
    mainAreaWidth = "200px";
  }
  $("#sideNav").width(sideNavWidth);
  $("#mainArea").css('margin-left',mainAreaWidth);
  navIsOpen = !navIsOpen;
}

function SaveEntry(){ // save the entry
  var txtTitle = $("#titleInputField").val();
  var txtField = $("#textArea").val();
  alert(txtTitle + "#" + txtField);
}

function NewEntry() { // create a new entry
  alert("neuer Eintrag");
}

这就是我想要的结果

似乎我只需要修复CSS就可以完成它。

Answer 1

我在您的topBar中添加了margin-top:0;，并从您的sideNav中删除了top: 0;。

试试这个：

var navIsOpen = true;

function InitDocument(){ // Initialization
  ToggleNavbar();
}

function ToggleNavbar(){ // show - hide the navbar
  var sideNavWidth = "0px";
  var mainAreaWidth = "0px";
  if (navIsOpen)
  {
    sideNavWidth = "200px";
    mainAreaWidth = "200px";
  }
  $("#sideNav").width(sideNavWidth);
  $("#mainArea").css('margin-left',mainAreaWidth);
  navIsOpen = !navIsOpen;
}

function SaveEntry(){ // save the entry
  var txtTitle = $("#titleInputField").val();
  var txtField = $("#textArea").val();
  alert(txtTitle + "#" + txtField);
}

function NewEntry() { // create a new entry
  alert("neuer Eintrag");
}

body{
  background-color: #EEEEEE;
  color: #000000;
}

*{
  margin: 0;
  padding: 0;
}

#topBar {
  margin-top:0;
  background-color: navy;
}

#sideNav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  left: 0;
  overflow-x: hidden;
  background-color: #333333;
  color: #EEEEEE;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>
    </title>
</head>

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>

<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">

<body onload="InitDocument()">

    <div id="topBar">
        <button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
    </div>

    <div id="container">
        <div id="sideNav">
            <button type="button" onclick="NewEntry()">+</button>
            <p>test</p>
        </div>
        <div id="mainArea">
            <p>Title:</p>
            <input id="titleInputField" type="text">
            <p>Text:</p>
            <textarea id="textArea"> </textarea>
            <p></p>
            <button type="button" onclick="SaveEntry()">Save</button>
        </div>
    </div>

</body>

</html>

Answer 2

试试这个：

＆＃13;

var navIsOpen = true;

function InitDocument(){ // Initialization
  ToggleNavbar();
}

function ToggleNavbar(){ // show - hide the navbar
  var sideNavWidth = "0px";
  var mainAreaWidth = "0px";
  if (navIsOpen)
  {
    sideNavWidth = "200px";
    mainAreaWidth = "200px";
  }
  $("#sideNav").width(sideNavWidth);
  $("#mainArea").css('margin-left',mainAreaWidth);
  navIsOpen = !navIsOpen;
}

function SaveEntry(){ // save the entry
  var txtTitle = $("#titleInputField").val();
  var txtField = $("#textArea").val();
  alert(txtTitle + "#" + txtField);
}

function NewEntry() { // create a new entry
  alert("neuer Eintrag");
}

＆＃13;

body{
  background-color: #EEEEEE;
  color: #000000;
}

* {
    margin: 0;
    padding: 0;
}

#main {
  display: flex;
  flex-direction: column;
}

#sideNav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 50px;
  left: 0;
  overflow-x: hidden;
  background-color: #333333;
  color: #EEEEEE;
}

#topBar {
  position: fixed;
  display: inline-block;
  width: 100%;
  height: 50px;
  background-color: red;
}

#container {
  display: flex;
  padding-top: 50px;
  flex: 1;
  flex-direction: row;
}

＆＃13;

<html>

<head>
  <meta charset="utf-8" />
  <title>
  </title>
</head>

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>

<script src="MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MainStyle.css">

<body onload="InitDocument()">

  <div id="main">
    <div id="topBar">
      <button id="btnNavToggle" type="button" onclick="ToggleNavbar()">Menu</button>
    </div>

    <div id="container">
      <div id="sideNav">
        <button type="button" onclick="NewEntry()">+</button>
        <p>test</p>
      </div>
      <div id="mainArea">
        <p>Title:</p>
        <input id="titleInputField" type="text">
        <p>Text:</p>
        <textarea id="textArea"> </textarea>
        <p></p>
        <button type="button" onclick="SaveEntry()">Save</button>
      </div>
    </div>
  </div>

</body>

</html>

＆＃13;

看看flex-box概念

Answer 3

查看此使用新HTML5语义元素的示例。

http://www.w3schools.com/html/html5_semantic_elements.asp

我从上面的链接中获取了大部分示例元素，并创建了一个简单的HTML5页面。

您可以通过删除HTML或删除/添加其他CSS属性来添加/删除/修改以下任何部分。

var toggleButton = document.getElementById('toggle-button');
var pageWrapper = document.getElementsByClassName('wrapper')[0];

toggleButton.addEventListener('click', function() {
  toggleClass(pageWrapper, 'toggle-hidden')
});


function toggleClass(el, className) {
  if (el.classList) {
    el.classList.toggle(className);
  } else {
    var classes = el.className.split(' ');
    var existingIndex = classes.indexOf(className);

    if (existingIndex >= 0) classes.splice(existingIndex, 1);
    else classes.push(className);

    el.className = classes.join(' ');
  }
}

header, footer {
  width: 100%;
  text-align: center;
  background: #DDD;
  padding: 0.25em !important;
}
.title {
  font-weight: bold;
  font-size: 2.25em;
  margin-bottom: 0.5em;
}
.subtitle {
  font-size: 1.5em;
  font-style: italic;
}
.wrapper {
  background: #EEE;
}
nav {
  text-align: center;
  background: #CCC;
  padding: 0.25em !important;
}
aside {
  float: left;
  top: 0;
  width: 12em;
  height: 100%;
  padding: 0.25em !important;
}
aside a {
  display: block;
  text-decoration: none;
  margin-bottom: 0.5em;
}
aside a:before {
  content: '➢ ';
}
article, section {
  margin-left: 12em !important;
  background: #FFF;
  padding: 0.25em !important;
}
/* Default HTML4 typography styles */
h1 { font-size: 2.00em !important; margin: 0.67em 0 !important; }
h2 { font-size: 1.50em !important; margin: 0.75em 0 !important; }
h3 { font-size: 1.17em !important; margin: 0.83em 0 !important; }
h5 { font-size: 0.83em !important; margin: 1.50em 0 !important; }
h6 { font-size: 0.75em !important; margin: 1.67em 0 !important; }
h1, h2, h3, h4, h5, h6 { font-weight: bolder !important; }
p  { font-size: 1.00em !important; margin: 1em 0 !important; }

#toggle-button {
  display: block;
  position: absolute;
  width: 5em;
  height: 5em;
  line-height: 1.5em;
  text-align: center;
}
.wrapper.toggle-hidden aside {
  display: none;
  width: 0;
}
.wrapper.toggle-hidden article, .wrapper.toggle-hidden section {
  margin-left: 0 !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<header>
  <button id="toggle-button">Toggle<br />Sidebar</button>
  <div class="title">What Does WWF Do?</div>
  <div class="subtitle">WWF's mission:</div>
</header>
<div class="wrapper">
  <nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
  </nav>
  <aside>
    <h1>Links</h1>
    <a href="/html/">HTML</a>
    <a href="/css/">CSS</a>
    <a href="/js/">JavaScript</a>
    <a href="/jquery/">jQuery</a>
  </aside>
  <section>
    <h1>WWF</h1>
    <p>The World Wide Fund for Nature (WWF) is....</p>
  </section>
  <article>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission is to stop the degradation of our planet's natural environment,
      and build a future in which humans live in harmony with nature.</p>
  </article>
</div>
<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

将网站划分为3个部分 - ＆gt;水平1，下垂直2

3 个答案: