菜单导航栏网页：动态菜单 windows.screen

Question

I want to create a navigation bar menu with a responsive layout.我想创建一个具有响应式布局的导航栏菜单。 When the site is displayed on monitors i want dysplay the navigation bar.当网站显示在监视器上时，我想显示导航栏。 When the site is displayed on mobiles i would display the menu icons that display eventually the navigation bar.当网站显示在手机上时，我会显示最终显示导航栏的菜单图标。

How can i do that?我怎样才能做到这一点？

Answer 1

Try this, on mobile the navbar will not just display icons but also headings试试这个，在移动设备上，导航栏不仅会显示图标，还会显示标题

Just a heads up for next time, there are many tutorials on how to do this sort of things along with helpful websites that could help you to improve on your skills for the future.只是提醒下一次，有许多关于如何做这类事情的教程以及可以帮助您提高未来技能的有用网站。 :) :)

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}

.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #000;
}

.active {
  background-color: #555;
}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}
</style>
<body>


<div class="navbar">
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a> 
  <a href="#"><i class="fa fa-fw fa-search"></i> Search</a> 
  <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a> 
  <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
</div>

</body>
</html>

菜单导航栏网页：动态菜单 windows.screen

问题描述

1 个解决方案

解决方案1
1 2019-07-27 13:16:27

菜单导航栏网页：动态菜单 windows.screen

问题描述

1 个解决方案

解决方案1 1 2019-07-27 13:16:27

解决方案1
1 2019-07-27 13:16:27