javascript - 为下拉导航栏编辑 html+css+js

Question

我找到了用于下拉导航栏的完美代码。但是我一直在尝试根据我的需要对其进行编辑。原始完整代码位于此处:https://github.com/vandoan/Elli/blob/master/dropDownNav.html以及它的外观:http://codepen.io/Xia-lj/pen/KdKOxw

HTML:

<div id="topbar">
  <div id="logo">LOGO</div>
  <div id="sections_btn_holder">
    <button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">&#9662;</span></button>
  </div>
  <div id="sections_panel">
    <div>
      Try adding things like more child div containers, links, buttons, menus, pictures, paragraphs, videos, etc...
    </div>
  </div>
</div>

CSS:

body {
  margin: 0px;
  background: #999;
}

div#topbar {
  background: -webkit-linear-gradient(#666, #000);
  background: linear-gradient(#666, #000);
  height: 60px;
}

div#topbar > #logo {
  float: left;
  width: 140px;
  height: 35px;
  margin: 8px 0px 0px 30px;
  font-size: 36px;
  color: #999;
}

div#topbar > #sections_btn_holder {
  float: left;
  width: 144px;
  height: 46px;
  padding-top: 16px;
}

div#topbar > #sections_btn_holder > button {
  background: #F90;
}

div#topbar > #sections_panel {
  position: absolute;
  height: 0px;
  width: 550px;
  background: #000;
  top: 60px;
  left: 160px;
  border-radius: 0px 0px 8px 8px;
  overflow: hidden;
  z-index: 10000;
  transition: height 0.3s linear 0s;
}

div#topbar > #sections_panel > div {
  background: #333;
  padding: 20px;
  height: 238px;
  margin: 10px;
  color: #FC0;
}

JS:

function toggleNavPanel(x) {
  var panel = document.getElementById(x),
    navarrow = document.getElementById("navarrow"),
    maxH = "300px";
  if (panel.style.height == maxH) {
    panel.style.height = "0px";
    navarrow.innerHTML = "▾";
  } else {
    panel.style.height = maxH;
    navarrow.innerHTML = "▴";
  }
}

我想要得到的:像示例中那样下拉导航栏，但是有三个按钮“历史”、“哲学”、“物理”。并且这三个部分中的每一个都必须包含几本书的名称，例如:

历史:-

1. 希罗多德的历史。

2. 泰特斯·李维乌斯。罗马史。

3. 伊万·克里皮亚克维奇。伟大的乌克兰历史。

“哲学”:-

1. 柏拉图的作品。

2. 亚里士多德的尼各马可伦理学。

3. Hryhorii Skovoroda 的寓言和格言。

“物理”:-

1. 史蒂芬·霍金。时间简史。

2. 雅科夫佩雷尔曼。娱乐物理学。

如果有人能提供帮助，我将不胜感激。我是 Web 开发的新手。

Answer 1

像这样的东西怎么样CodePen这是您提供的相同示例，只是在 div#sections_panel 中对 HTML 和 CSS 部分进行了一些修改，我添加了 3 个 div - 您在问题中提到了 3 个部分 -使用 .sub_sections 类名。

function toggleNavPanel(x) {
  var panel = document.getElementById(x),
    navarrow = document.getElementById("navarrow"),
    maxH = "300px";
  if (panel.style.height == maxH) {
    panel.style.height = "0px";
    navarrow.innerHTML = "▾";
  } else {
    panel.style.height = maxH;
    navarrow.innerHTML = "▴";
  }
}

body {
  margin: 0px;
  background: #999;
}

div#topbar {
  background: -webkit-linear-gradient(#666, #000);
  background: linear-gradient(#666, #000);
  height: 60px;
}

div#topbar > #logo {
  float: left;
  width: 140px;
  height: 35px;
  margin: 8px 0px 0px 30px;
  font-size: 36px;
  color: #999;
}

div#topbar > #sections_btn_holder {
  float: left;
  width: 144px;
  height: 46px;
  padding-top: 16px;
}

div#topbar > #sections_btn_holder > button {
  background: #F90;
}

div#topbar > #sections_panel {
  position: absolute;
  height: 0px;
  width: 550px;
  background: #000;
  top: 60px;
  padding:0 10px;
  left: 160px;
  border-radius: 0px 0px 8px 8px;
  overflow: hidden;
  z-index: 10000;
  transition: height 0.3s linear 0s;
}

div#topbar > #sections_panel > .sub_sections {
  background: #333;
  padding: 10px;
  height: 258px;
  margin:10px 2px 0 0;
  color: #FC0;
  width:calc(31% - 10px);
  display:inline-block;
  float:left;
}
#sections_panel > .sub_sections > a{
  color:#EEE;
  display:block;
  padding:10px 5px;
  text-decoration:none;
  border-bottom:1px dotted #666;
}
#sections_panel > .sub_sections > a:hover{
  color:#333;
  background-color:orange;
}
#sections_panel > .sub_sections > h3{
  color:orange;
  text-align:center;
  padding-bottom:5px;
  border-bottom:1px #222 solid;
}

<div id="topbar">
  <div id="logo">LOGO</div>
  <div id="sections_btn_holder">
    <button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">&#9662;</span></button>
  </div>
  <div id="sections_panel">
    <div class="sub_sections">
      <h3>Search Engines</h3>
      <a href="//google.com">Google</a>
      <a href="//yahoo.com">Yahoo!</a>
      <a href="//bing.com">Bing</a>
    </div>
    <div class="sub_sections">
      <h3>Social Networks</h3>
      <a href="//facebook.com">Facebook</a>
      <a href="//twitter.com">Twitter</a>
    </div>
    <div class="sub_sections">
      <h3>Video Networks</h3>
      <a href="//youtube.com">Youtube</a>
      <a href="//vimeo.com">Vimeo</a>
    </div>
  </div>
</div>