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

我想要得到的东西：像示例一样下拉导航条，但有三个按钮＆＃34;历史＆＃34;，＆＃34;哲学＆＃34;，＆＃34;物理＆＃34 ;。这三个部分中的每一部分都必须包含很少的书籍。名称，例如：

历史： -

希罗多德的历史。
Titus Livius。罗马的历史。
Ivan Krypiakevych。乌克兰的伟大历史。

＆＃34;哲学＆＃34;： -

柏拉图的作品。
亚里士多德的Nicomachean伦理学。
Hryhorii Skovoroda的寓言和格言。

＆＃34;物理学＆＃34;： -

斯蒂芬霍金。时间简史。
Yakov Perelman。娱乐物理学。

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

Answer 1

这个CodePen之类的内容就像你提供的HTML和CSS部分的一些例子一样，在div#sections_panel里面我添加了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 = "&#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>

Answer 2

试试这个......

HTML

<div id="topbar">
<div id="logo">LOGO</div>
<div id="sections_btn_holder">
<button onclick="toggleNavPanel('The History of Herodotus,Titus Livius. The History of Rome,Ivan Krypiakevych. The Great History of Ukraine','sections_panel')">History <span id="navarrow">&#9662;</span></button>
<button onclick="toggleNavPanel('Works by Plato,Nicomachean Ethics By Aristotle,Fables And Aphorisms by Hryhorii Skovoroda','sections_panel')">Philosophy <span id="navarrow">&#9662;</span></button>
<button  onclick="toggleNavPanel('Stephen Hawking. A Brief History of Time,Yakov Perelman. Physics for Entertainment','sections_panel')">Physics <span id="navarrow">&#9662;</span></button>
</div>
<div id="sections_panel">
<div>

</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: auto;
    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(text,x) {
     var panel = document.getElementById(x),
     navarrow = document.getElementById("navarrow"),
     maxH = "300px";
     var books=text.split(",");
     var html='';
     for(var i=0; i<books.length; i++){
         html+=(i+1)+") "+books[i]+"<br/>";
     }
     if (panel.style.height == maxH) {
          panel.style.height = "0px";
          panel.innerHTML="";
          navarrow.innerHTML = "&#9662;";
     } else {
          panel.style.height = maxH;
          panel.innerHTML="<div>"+html+"</div>";
          navarrow.innerHTML = "&#9652;";
      }
 }

Answer 3

你想找http://codepen.io/fwpolice/pen/pqlgy

之类的东西吗？

jQuery(document).ready(function (e) {
    function t(t) {
        e(t).bind("click", function (t) {
            t.preventDefault();
            e(this).parent().fadeOut()
        })
    }
    e(".dropdown-toggle").click(function () {
        var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
        e(".button-dropdown .dropdown-menu").hide();
        e(".button-dropdown .dropdown-toggle").removeClass("active");
        if (t) {
            e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
        }
    });
    e(document).bind("click", function (t) {
        var n = e(t.target);
        if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
    });
    e(document).bind("click", function (t) {
        var n = e(t.target);
        if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
    })
});

body {
    background-color: #eee;
    text-align: center;
    padding-top: 50px;
}

.nav {
    display: block;
    font: 13px Helvetica, Tahoma, serif;
    text-transform: uppercase;
    margin: 0; 
    padding: 0;
}

.nav li {
    display: inline-block;
    list-style: none;
}

.nav .button-dropdown {
    position: relative;
}

.nav li a {
    display: block;
    color: #333;
    background-color: #fff;
    padding: 10px 20px;
    text-decoration: none;
}

.nav li a span {
    display: inline-block;
    margin-left: 5px;
    font-size: 10px;
    color: #999;
}

.nav li a:hover, .nav li a.dropdown-toggle.active {
    background-color: #289dcc;
    color: #fff;
}

.nav li a:hover span, .nav li a.dropdown-toggle.active span {
    color: #fff;
}

.nav li .dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    padding: 0;
    margin: 0;
    margin-top: 3px;
    text-align: left;
}

.nav li .dropdown-menu.active {
    display: block;
}

.nav li .dropdown-menu a {
    width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li>
    <a href="#">
      No dropdown
    </a>
  </li>
  <li class="button-dropdown">
    <a href="javascript:void(0)" class="dropdown-toggle">
      Dropdown 1 <span>▼</span>
    </a>
    <ul class="dropdown-menu">
      <li>
        <a href="#">
          Drop Item 1
        </a>
      </li>
      <li>
        <a href="#">
          Drop Item 2
        </a>
      </li>
      <li>
        <a href="#">
          Drop Item 3
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      No dropdown
    </a>
  </li>
  <li class="button-dropdown">
    <a href="javascript:void(0)" class="dropdown-toggle">
      Dropdown 2 <span>▼</span>
    </a>
    <ul class="dropdown-menu">
      <li>
        <a href="#">
          asdf
        </a>
      </li>
    </ul>
  </li>
</ul>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Answer 4

也许这个工具栏适合您： http://w2ui.com/web/demo/toolbar

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

4 个答案: