我发现了一个完美的下拉导航栏代码。但是我在尝试根据我的需要修改它时遇到了困难。原始完整代码位于此处：https://github.com/vandoan/Elli/blob/master/dropDownNav.html，效果如下：http://codepen.io/Xia-lj/pen/KdKOxw
HTML:
我需要的是像示例中的下拉导航栏，但有三个按钮“历史”，“哲学”和“物理”。 每个部分都必须包含一些书名，例如：
历史：-
1. 《希罗多德的历史》 2. 《蒂图斯·利维乌斯的罗马史》 3. 《伊万·克里皮亚凯维奇的乌克兰大历史》
“哲学”：-
1. 柏拉图的著作。 2. 亚里士多德的《尼科马可伦理学》。 3. 格里戈里·斯科沃罗达的寓言和格言。
“物理”：-
1. 史蒂芬·霍金的《时间简史》。 2. 雅科夫·佩尔尔曼的《物理娱乐》。
如有可能，我将非常感谢任何能提供帮助的人。 我是Web开发的新手。
<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">▾</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. 格里戈里·斯科沃罗达的寓言和格言。
“物理”：-
1. 史蒂芬·霍金的《时间简史》。 2. 雅科夫·佩尔尔曼的《物理娱乐》。
如有可能，我将非常感谢任何能提供帮助的人。 我是Web开发的新手。