Question

我正在尝试为我的老师创建一个网站，我希望在导航栏项下有一个下拉菜单，列出他教的所有课程。这就是我到目前为止所做的：

＆＃13;

@import 'https://fonts.googleapis.com/css?family=Raleway';
 #bluebar {
  height: 5px;
  width: 100%;
  background-color: #1E90FF;
}
#navbar {
  width: 100%;
  background-color: #000;
  height: 53px;
  top: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: fixed;
  display: inline;
  width: 100%;
  padding-right: 35px;
}
li {
  float: right !important;
}
#navbut {
  display: block;
  color: white;
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  text-align: center;
  padding: 14px 19px;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}
#navbut:hover {
  background-color: #1E90FF;
}
/*#myDropdown {
      z-index:1;
      visibility:hidden;
      opacity:0;
      filter:alpha(opacity=0);
      -webkit-transition:200ms ease;
      -moz-transition:200ms ease;
      -o-transition:200ms ease;
      transition:200ms ease;
    }
    
    #myDropdown:hover {
      visibility: visible;
      opacity: 1;
      filter: alpha(opacity=100);
    }*/

li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #000;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  overflow: visible;
  width: 150px;
}
#dropbut {
  color: #fff;
  padding: 14px 19px;
  font-family: 'Raleway', sans-serif;
  text-decoration: none;
  display: block;
  background-color: #000;
  text-align: left;
  width: 150px;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}
#dropbut:hover {
  background-color: #1E90FF;
}
.dropdown:hover .dropdown-content {
  display: block;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Mraz' Site</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/script.js"></script>
</head>

<body>
  <div id="bluebar">
  </div>
  <div id="navbar">
    <ul class="navbar-right">
      <li><a id="navbut" href="#contact">Contact</a>
      </li>
      <li class="dropdown">
        <a id="navbut" class="dropbtn" href="#">Classes</a>
        <ul id="myDropdown" class="dropdown-content">
          <a id="dropbut" href="#">AP Calculus AB</a>
          <a id="dropbut" href="#">AP Calculus BC</a>
          <a id="dropbut" href="#">Honors Statistics</a>
        </ul>
      </li>
      <li><a id="navbut" href="#home">Home</a>
      </li>
    </ul>
  </div>
</body>

</html>

＆＃13;

我不完全确定如何让下拉列表中有动画（在幻灯片上滑动进出＆＃34; Classes＆＃34;按钮，所以任何帮助都会非常感激。还有任何有关组织的提示/清理我的代码。我对编码很新，所以总是欢迎帮助。

Answer 1

你以前用Jquery做过什么吗？

http://www.w3schools.com/jquery/default.asp

谈到交互性，Jquery非常简单。

关于在导航上执行显示/隐藏效果，请查看 http://www.w3schools.com/jquery/jquery_hide_show.asp

（我知道这些不是代码示例，但教别人钓鱼比给他们钓鱼更好）

Navbar下拉菜单

1 个答案: