2部分响应式HTML和CSS导航，带有下拉菜单

时间：2018-08-01 07:30:55

标签： html css header navigation responsive

我正在尝试创建一个包含两部分和一些下拉菜单的响应式HTML和CSS导航菜单。

我看过很多youtube视频，但似乎找不到导航菜单第2部分的响应模板。

导航的顶部有2个下拉菜单和2个标准页面。导航的底部有标题，徽标和2个下拉菜单。

我已经在下面附加了我所有的代码，但是在响应标头方面需要一些帮助。

在此先感谢您的帮助。

body {
  padding: 0;
  margin: 0;
  font-size: 15px;
  font-family: Avenir;
  color: black;
  background-color: white;
}

header {
  top: 0;
  width: 100%;
}

#top-header ul li i {
  color: #00a63f;
  float: right;
  margin-left: 10px;
  margin-top: -2.5px;
}

#top-header ul {
  list-style-type: none;
  font-size: 19px;
  margin: 0% 2.5%;
  padding: 0;
  overflow: hidden;
  background-color: white;
}

#top-header li {
  float: left;
}

#top-header li a,
.dropbtn {
  display: inline-block;
  text-align: center;
  color: #00a63f;
  text-align: center;
  padding: 17px;
  text-decoration: none;
}

#top-header li a:hover {
  background-color: #f1f1f1;
  color: black;
}

#top-header li a:hover i {
  background-color: #f1f1f1;
  color: black;
}

#top-header li.dropdown {
  display: inline-block;
}

#top-header .dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 200px;
  border: 2px solid #333333;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 1;
}

#top-header .dropdown-content a {
  color: #00a63f;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  display: block;
  text-align: left;
}

#top-header .dropdown:hover .dropbtn {
  background-color: #f1f1f1;
  color: black;
}

#top-header .dropdown:hover i {
  color: black;
}

#top-header .dropdown-content a:hover {
  background-color: #f1f1f1;
  color: black;
}

#top-header .dropdown:hover .dropdown-content {
  display: block;
}

#top-header .dropdown {
  text-align: center;
}


/* Main Navagation */

#main-nav ul li i {
  color: white;
  float: right;
  margin-left: 10px;
  margin-top: -2.5px;
}

#main-nav ul {
  list-style-type: none;
  font-size: 20px;
  margin: 0% 2.5%;
  padding: 0;
  float: left;
  overflow: hidden;
  background-color: #00a63f;
}

#main-nav li {
  float: left;
}

#main-nav li a,
#main-nav .dropbtn {
  display: inline-block;
  text-align: center;
  color: white;
  padding: 27px;
  height: 100%;
  text-align: center;
  text-decoration: none;
}

#main-nav li a:hover {
  background-color: #18bf59;
  color: white;
}

#main-nav li a:hover i {
  background-color: #18bf59;
  color: white;
}

#main-nav li.dropdown {
  display: inline-block;
}

#main-nav .dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 200px;
  border: 2px solid #333333;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 1;
}

#main-nav .dropdown-content a {
  color: #00a63f;
  text-align: center;
  padding: 15px;
  font-size: 18px;
  text-decoration: none;
  display: block;
  text-align: left;
}

#main-nav .dropdown:hover .dropbtn {
  background-color: #18bf59;
  color: white;
}

#main-nav .dropdown:hover i {
  color: white;
}

#main-nav .dropdown-content a:hover {
  background-color: #f1f1f1;
  color: black;
}

#main-nav .dropdown:hover .dropdown-content {
  display: block;
}

#main-nav .dropdown {
  text-align: center;
}


/* Top Header */

#top-header {
  width: 100%;
  border-bottom: 2px solid #333333;
}

#left-top-header {
  width: auto;
  float: left;
}

#right-top-header {
  width: auto;
  float: right;
}


/* Bottom Header */

#bottom-header {
  width: 100%;
  background-color: #00a63f;
  border-bottom: 2px solid #333333;
  display: inline-block;
}

#top-header ul li i {
  color: #00a63f;
  float: right;
  margin-left: 10px;
  margin-top: -2.5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 	user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<header>
  <div id="top-header">
    <ul>
      <li class="dropdown">
        <a class="dropbtn">DROPDOWN 1 <i id="header-down-arrow" class="fa fa-sort-desc"></i></a>
        <div class="dropdown-content">
          <a href="#" style="text-align: center;">DROPDOWN ITEM</a>
          <a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">DROPDOWN ITEM</a>
        </div>
      </li>

      <li class="dropdown">
        <a class="dropbtn">DROPSOWN 2 <i id="header-down-arrow" class="fa fa-sort-desc"></i></a>
        <div class="dropdown-content">
          <a href="#" style="text-align: center;">DROPDOWN ITEM</a>
          <a href="#" style="text-align: center;">DROPDOWN ITEM</a>
          <a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">DROPDOWN ITEM</a>
        </div>
      </li>

      <li><a href="#">ITEM</a></li>

      <li><a href="#">ITEM</a></li>

      <li style="float: right;"><a href="#">ITEM</a></li>

      <li style="float: right;"><a href="#">ITEM</a></li>

    </ul>
  </div>
  <div id="bottom-header" style="margin-bottom: 0%; padding: 0px;">
    <a href="index.html" style="float: left; width: 30%; margin: 0px; padding: 0px;">
      <h1 style="font-size: 30px; color: white; margin: 20px; padding: 0px; float: left; text-align: center;">WEBSITE NAME</h1>
      <img src="Photos/logo.png" style="width: 40px; height: 40px; margin-top: 15px;">
    </a>

    <nav id="main-nav" style="float: right; width: 70%;">
      <ul>
        <li class="dropdown">
          <a class="dropbtn">DROPDOWN 3 <i id="header-down-arrow" class="fa fa-sort-desc"></i></a>
          <div class="dropdown-content">
            <a href="#" style="text-align: center;">DROPDOWN ITEM</a>
            <a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">DROPDOWN ITEM</a>
          </div>
        </li>

        <li class="dropdown">
          <a class="dropbtn">DROPDOWN 4 <i id="header-down-arrow" class="fa fa-sort-desc"></i></a>
          <div class="dropdown-content">
            <a href="#" style="text-align: center;">DROPDOWN ITEM</a>
            <a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">DROPDOWN ITEM</a>
          </div>
        </li>
      </ul>
    </nav>
  </div>
</header>

3 个答案:

答案 0 :(得分：1)

  

从我能从多大程度上理解您希望图像，网站名称和下拉列表位于移动设备的同一行。

您的版面配置问题是老兄，您需要重写许多内容 1.您已使用带有边距的h1标签，并且其默认显示为block u，您必须将其更改为inline-block；然后在锚标签上尝试使用

   display: flex;
   flex-direction: row;

您需要了解更多关于媒体查询的调整，它们也会派上用场。

  

并尝试清楚地显示您想要的东西。

对于手机，这将打破尝试使用汉堡包菜单的功能，您可以在我实现类似功能的github个人资料上进行检查。

git hub project签出。

答案 1 :(得分：1)

您必须编写 CSS 类，使其在@media类

中成为您想要的类 RESPONSIVE

@media类是这样的：

@media screen and (max-width : 1024px)
{
.
/* your css class */
.
}

要了解更多信息，请检查此链接：

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

答案 2 :(得分：1)

我对您的真正建议是使用CSS媒体查询[https://www.w3schools.com/howto/howto_js_topnav_responsive.asp]，如果您想尝试并且觉得自己花了很多时间解决此问题，请使用引导程序来修复导航栏和那么您可以使用自己的CSS [https://getbootstrap.com/docs/4.0/components/navbar/]

希望您能帮上忙

相关问题
最新问题