简单的响应式html（带有可选的下拉菜单和浮动导航）

时间：2016-12-05 22:37:52

标签： javascript html css navigationbar responsive

我通过浮动导航和响应式导航在线找到了大量的帮助..但是我想将它们组合在一起，同时在两个响应式布局中保留下拉子菜单的选项

有没有人有这方面的经验？

这就是我到目前为止 - 这给出了一个响应式布局 - 这是一个小提琴 - （注意：在这个小提琴中，响应式汉堡包不起作用 - 但确实如此） {{3 }}

问题：有a）没有下拉菜单，b）没有浮动顶部导航。任何人都可以帮我添加下拉菜单项和浮动导航到这个吗？

这是代码

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {background-color: #555;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {
      position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
 }
</style>
</head>
<body>

<ul class="topnav" id="myTopnav">
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>

<div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
  <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing
          elit, sed do eiusmod tempor incididunt ut labore et
          dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex
          ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu
          fugiat nulla pariatur. Excepteur sint occaecat
          cupidatat non proident, sunt in culpa qui officia
          deserunt mollit anim id est laborum.
        </p>
        <p>
          Nulla efficitur pharetra leo. In convallis lobortis
          nisl, ut pretium purus aliquam eget. Maecenas
          vestibulum venenatis eros, a volutpat mi malesuada eu.
          Cum sociis natoque penatibus et magnis dis parturient
          montes, nascetur ridiculus mus. Nam mollis vitae eros
          quis congue. Ut eget massa semper, cursus ligula et,
          euismod lacus. Sed neque metus, tristique eget
          scelerisque vitae, luctus at metus. Proin vel
          ullamcorper arcu. Praesent dapibus eleifend turpis et
          euismod. Sed tincidunt lobortis erat, nec elementum
          libero molestie sed. Phasellus eget tristique lorem.
        </p>
        <p>
          Maecenas dictum molestie nisi, eu ornare mauris posuere
          a. Proin tempus est ligula, ut varius risus faucibus
          nec. Morbi ultrices leo et vulputate facilisis. Nunc
          congue, leo a facilisis dictum, metus neque tempus
          arcu, ac aliquet nulla mi a felis. Maecenas quis
          euismod velit. Curabitur dapibus ipsum vitae
          ullamcorper auctor. Nullam nec ultricies urna.
          Curabitur lacinia nec ipsum a condimentum. Quisque
          lacinia faucibus augue, sed efficitur enim mollis eget.
          In et metus non ante interdum varius nec in sem.
        </p>
</div>

<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

</body>
</html>

2 个答案:

答案 0 :(得分：0)

最佳解决方案是使用Boostrap

你有Dropdowns 还有navbars

这是带下拉列表的导航栏的示例：

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-left">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->

答案 1 :(得分：0)

试试这个以供参考。 （我为丑陋道歉）

＆＃13;
＆＃13; 
  SELECT 
tblOrder.OrderID
,(
    SELECT 
        SUM(((tblOrderDetail.UnitPrice) - (tblOrderDetail.UnitPrice * (tblOrderDetail.Discount / 100))) * (tblOrderDetail.Quantity)) 
    FROM 
        tblOrderDetail 
    WHERE tblOrderDetail.OrderID = tblOrder.OrderID
) AS SubTotal
＆＃13; 
var btn = document.getElementById('navBtn');
var ul = document.getElementById('navUl');

btn.addEventListener("click", function(){
    ul.classList.toggle("active");
});
＆＃13; 
#bar {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: #333;
}
nav ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display: inline-block;
  padding: 20px;
  color: #fff;
  font-family: Verdana;
  text-decoration: none;
}
nav ul li:hover {
  background-color: #666;
}
#navBtn {
  display: none;
}
@media screen and (max-width: 500px) {
  nav ul li,
  nav ul li a {
    text-align: center;
    display: block;
  }
  nav ul {
    display: none;
  }
  nav ul.active {
    display: block;
  }
  #navBtn {
    display: block;
    width: 60px;
    height: 60px;
    border: 1px solid #fff;
    background-color: #333;
    color: #fff;
  }
}
＆＃13;
＆＃13;
＆＃13;

您不需要这个框架。作为旁注，您也可以在技术上使用纯CSS执行此操作（但是，这有点棘手;您使用带有标签的复选框）。

另外，我看到了您的<div id="bar"> <button id="navBtn">&#9776;</button> <nav> <ul id="navUl"> <li><a href="#">home</a></li> <li><a href="#">news</a></li> <li><a href="#">contact</a></li> <li><a href="#">about</a></li> </ul> </nav> </div>代码，所以我想特别指出className +=属性。它附带Element.classList，.add()，.remove()和其他有用的方法。阅读它here。它很漂亮。

相关问题
最新问题