Javascript 如何制作一个响应迅速的下拉菜单，如http://www.brotherbots.com/

我想知道如何使下拉列表看起来像手机和桌面视图中的那个。我结合了一些学校的例子。它在桌面视图中工作，但在移动设备中不工作。我不特别喜欢这个款式，但我想我自己可以修好。这也是最好的方法吗

我有一把叉子

函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李a,，
.dropbtn{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
li.下拉列表{
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉列表内容a：悬停{
背景色：#f1f1
}
.下拉：悬停.下拉内容{
显示：块；
}
ul.topnav李a：悬停{
背景色：#555；
}
ul.topnav li.icon{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：460像素）{
ul.topnav li：不是（第一个孩子）{
显示：无；
}
ul.topnav li.icon{
浮动：对；
显示：内联块；
}
}
@媒体屏幕和屏幕（最大宽度：460像素）{
ul.topnav.responsive{
位置：相对位置；
}
ul.topnav.responsive li.icon{
位置：绝对位置；
右：0；
排名：0；
}
ul.topnav.li{
浮动：无；
显示：内联；
}
ul.topnav.lia{
显示：块；
文本对齐：左对齐；
}
}

响应式Topnav示例
调整浏览器窗口的大小以查看其工作方式

您可以使用meterialised下拉列表

例如 css

html

仅限CSS材质设计下拉菜单



跌落

我建议退房。如果你不喜欢造型，而且他们的网站上有很好的文档，这会对你有所帮助。不幸的是，它们没有你想要的“响应能力”，但我发现有人因为这个原因添加了CSS

。侧栏导航{
填充：9px0；
}
.下拉菜单.子菜单{
左：100%；
位置：绝对位置；
排名：0；
可见性：隐藏；
页边顶部：-1px；
}
.下拉菜单li:悬停.子菜单{
能见度：可见；
}
.下拉菜单：悬停.下拉菜单{
显示：块；
}
.nav标签。下拉菜单，.nav药丸。下拉菜单，.navbar。下拉菜单{
边际上限：0；
}
.navbar.子菜单：之前{
边框底部：7px实心透明；
左边界：无；
右边框：7px实心rgba（0,0,0,0.2）；
边框顶部：7px实心透明；
左：-7px；
顶部：10px；
}
.navbar.子菜单：之后{
边框顶部：6px实心透明；
左边界：无；
右边框：6px实心#fff；
边框底部：6px实心透明；
左：10px；
顶部：11px；
左-6px；
}

导航标头

关注这个站点：我找到了下面的示例，但我似乎无法让代码在JSFIDLE中工作。这是我想要的菜单类型。谢谢你的帮助。

$grey: #9e9e9e;
$plum: #8e44ad;
$shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);

h1, a, li {
  font-family: Roboto, sans-serif;
}

h1 {
  font-size: 26px;
  background: lighten($plum, 5%);
  color: white;
  padding: 40px 0 40px 20%;
  margin-bottom: 50px;
}

a, li {
  color: darken($grey, 20%);
  text-decoration: none;
}

.nav {
  margin-left: 20%;
  > li {
    display: inline-block;
    padding: 1em 18px;
    cursor: pointer;
    &:hover {
      background: lighten($grey, 30%);
    }
  }
}

.drop {
  position: relative;
  ul {
    position: absolute;
    left: 0;
    top: 3em;
    transition: all 0.3s ease;
    transform: scale(0);
    transform-origin: 0 0;
    box-shadow: $shadow;
    li {
      display: block;
      width: 100%;
      a {
        width: 100%;
        padding: 1em 18px;
        display: inline-block;
        white-space: pre;
        box-sizing: border-box;
        &:hover {
          background: lighten($grey, 30%);
        }
      }
    }
  }
  &:hover {
    ul {
      transform: scale(1);
    }
  }
}

//---------------------------------------------

.follow {
  width: 42px;
  height: 42px;
  border-radius: 50px;
  background: #03A9F4;
  display: block;
  margin: 300px auto 0;
  white-space: nowrap;
  padding: 13px;
  box-sizing: border-box;
  color: white;
  transition: all 0.2s ease;
  font-family: Roboto, sans-serif;
  text-decoration: none;
  box-shadow: 0 5px 6px 0 rgba(0,0,0,0.2);
  i {
    margin-right: 20px;
    transition: margin-right 0.2s ease;
  }
  &:hover {
    width: 134px;
    i {
      margin-right: 10px;
    }
  }
}

@media screen and (max-width: 800px) {
  .follow {
    margin: 400px auto 0;
  }
}

<h1>Material Design CSS Only Dropdown Menu</h1>

<ul class="nav">
  <li><a href="http://www.g.com">Home</a></li>
  <li><a href="http://www.g.com">Portfolio</a></li>
  <li class="drop">Drop
    <ul>
      <li><a href="http://www.g.com">Art</a></li>
      <li><a href="http://www.g.com">Coding</a></li>
      <li><a href="http://www.g.com">Design</a></li>
      <li><a href="http://www.g.com">Web Development</a></li>
    </ul>
  </li>
  <li><a href="http://www.g.com">Contact</a></li>
</ul>

<a class="follow" href="https://twitter.com/mildrenben" target="_blank"><i class="fa fa-twitter"></i>Follow Me</a>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300,700' rel='stylesheet' type='text/css'>