带有 onclick 搜索栏的响应式导航栏答案

【问题标题】：Responsive navbar with onclick search bar带有 onclick 搜索栏的响应式导航栏
【发布时间】：2018-05-08 23:17:42
【问题描述】：

我正在尝试制作一个响应式导航栏，该导航栏与我网站上的其他一些图标保持一致。

我让它在桌面模式下工作，但我在移动视图上苦苦挣扎。

我遇到的主要问题是我无法折叠搜索栏，因此当您单击放大镜时，搜索栏将在导航栏下方弹出。排列所有 5 个图标，使其看起来整洁。

下面我附上了3张图片：

第一个是我目前在我的网站上的位置第二个站点是我想要实现的第三是它在桌面模式下搜索栏工作时的外观。

我还附加了一个 js Fiddle，其中包含我目前拥有的所有内容。

  <div class="topnav" id="myTopnav">      

  <a class='home'href="#">Home</a>
  <a href="#">Building Materials</a>
  <a href="#">Timber and Hardwood</a>
  <a href="#">Landscaping</a>
  <a href="#">Kitchens and Bathrooms</a>
  <a href="#">Tools</a>
  <a href="#">Flooring</a>
  <a href="#">Tool Hire</a>
  <a class='timber' href="#a">Timber Enginering</a>

       <a href="javascript:void(0);" class="icon" onclick="myFunction()">
   <i class="fa fa-bars" style="font-size:56px"><p>Home</p></i>
  </a>
    </div>

提前致谢！

【问题讨论】：

提示：如果你想让 JSFiddle 正确显示，你需要把图片上传到某个地方（imgur 可能吗？），并在那里链接它们，否则我们只会看到问号，很难分辨发生了什么事。
嗨@user770 感谢您的回复！不幸的是，它们是 SVG 图标，无法上传，我遇到的主要问题是创建一个切换响应式搜索栏，如果它更容易我可以简单地删除损坏的链接？
也许可以在本地截取结果的屏幕截图（以便图像可见），裁剪屏幕截图以获得类似大小的图像，然后上传/链接这些图像。
@user770 jsfiddle.net/kLo8x29u/1 这是一个新的小提琴，其中没有图像，只是为了避免混淆！我希望这会有所帮助！
它确实有图像。你点击“保存”了吗？

标签： html css search navbar responsive

【解决方案1】：

如果你想对齐你的图标，你必须把图标和菜单放在同一个 div 中，并带有一个 id；然后你给它一个相对位置并显示内联块。在此之后，所有图标都必须向左浮动，以便它们对齐。你有你的代码的方式，你没有告诉它你想让图标并排:)如果你仍然需要一些帮助，我可以帮助你

【讨论】：

太棒了！感谢您的提示，您知道单击时如何使搜索栏显示在导航栏下方吗？
使用 js，您可以向其中添加一个类，该类将在单击时被激活。例如：您将搜索框设置为无显示，当单击它时，ja 会将类更改为 actev 并显示块。
这正是我所需要的，谢谢，我对 JS 还很陌生，所以需要尝试几次，但我认为我最终会破解它！谢谢！
我可以设置它以便仅在移动视图期间发生这种情况吗？使用媒体查询？