编辑下拉导航栏的HTML+CSS+JS

提问者：小点点

编辑下拉导航栏的HTML+CSS+JS

我找到了完美的下拉导航栏代码。但我不得不根据自己的需要编辑它。原始完整代码位于此处: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 = "&#9662;";
  } else {
    panel.style.height = maxH;
    navarrow.innerHTML = "&#9652;";
  }
}

我想要的是：下拉导航栏，就像在例子，但有三个按钮“历史”，“哲学”，“物理”。并且这三个部分中的每一个部分都必须包含很少的书名，例如：

历史：-

> 希罗多德的历史。

提图斯·里维乌斯。罗马的历史。

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

“哲学”：-

柏拉图的作品。

亚里士多德的《尼各马可伦理学》。

寓言和格言由Hryhorii SKOVORODA。

“物理学”：-

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

雅科夫·佩雷尔曼。娱乐物理。

如果有人能帮忙，我将不胜感激。我是网络开发的新手。

共1个答案

匿名用户

下面这个代码本怎么样，它是您提供的同样的示例，只是对HTML和CSS部分做了一点修改，在div#sections_panel中，我用一个.sub_sections类名添加了3个div（您在问题中提到了3个部分）。

null

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 = "&#9662;";
  } else {
    panel.style.height = maxH;
    navarrow.innerHTML = "&#9652;";
  }
}

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>