向网站添加汉堡菜单和分享按钮答案

【问题标题】：Adding hamburger menu and share buttons to websites向网站添加汉堡菜单和分享按钮
【发布时间】：2021-04-17 01:38:36
【问题描述】：

我正在构建自己的网站并学习 Web 开发，我有一些问题想请教有经验的开发人员。

首先，我想在我的网站上添加一个汉堡菜单以单击并访问其他页面，但不知道该怎么做。找到了一些方便的代码并尝试将它们添加到我的主要 HTML 和 CSS 文件中，但没有奏效。我是否需要为菜单创建完全不同的 HTML/CSS/JS 文件，然后将它们链接到主文件？或者有什么解决办法？

我可以使用的几个例子：https://codepen.io/brenden/pen/VLjKMQ/https://codepen.io/netfuel/pen/rIlnB/https://codepen.io/sergioandrade/pen/onkub

我的第二个问题是我通过 Add To Any 向我的网站添加了共享按钮。 Twitter 和 WhatsApp 按钮工作得很好，但 Facebook 却不行（见第 1 节）。 href代码是href="https://www.addtoany.com/share" 我的网站还没有上线。这会导致错误吗？

我还想让按钮更小且响应更灵敏（参见第 2 节）。到目前为止，我尝试了style="font-size: .. ;"，但没有成功。

谢谢。

编辑：

【问题讨论】：

标签： javascript html css web hamburger-menu

【解决方案1】：

您可以在一个 CSS 文件中完成所有 CSS 样式设置。无需创建新的。

此外，您的网站无需在线即可从外部链接到另一个网站（您的 Facebook 链接）。

很难说是什么导致了你的问题。你能分享你的代码吗？例如，可能会有一些样式。 <body> 这干扰了您的菜单。至于调整按钮的大小，请尝试使用简单的宽度和高度。但同样，如果您分享您的代码，帮助您会更容易。

尝试将其粘贴到 jsfiddle.net 文档中。在线共享代码超级简单有效！

编辑：

不要在您的 HTML 中使用 style，为此请使用您的 CSS 文件。生成一些更简洁的代码，从长远来看更容易使用。

让图标变大：

CSS：

.a2a_button_facebook, .a2a_button_twitter, .a2a_button_whatsapp {
/* change this, it's just a demo height */
 width: 500px !important;

/* change this, it's just a demo height */
 height: 500px !important;

我不确定!important 是否必要，因为我之前没有使用过 AddToAny。但如果它在自己的库中具有样式，则使用!important 规则来覆盖它。

您链接的所有代码笔都很花哨，但它们每个都有数百行代码，我必须仔细查看它们为什么不起作用。我也学习 Web 开发，我可以告诉你一个事实，你将从一开始就简单地编写基本的 HTML 和 CSS 学到更多，而不是把数百行代码粘贴到你的文件中并获得在线调试的帮助。

我为您制作了一个非常简单的导航栏来帮助您入门： https://jsfiddle.net/wmk6qa7h/

我输入了什么：

HTML：

  <nav>
    <ul>
      <li><a href="link 1">Link 1</a></li>
      <li><a href="link 2">Link 2</a></li>
      <li><a href="link 3">Link 3</a></li>
      <li><a href="link 4">Link 4</a></li>
    </ul>
  </nav>

这是设置导航栏的正确语义方式。 <nav> 元素很重要！

CSS：

.navbar {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.navbar a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
  width: 100px;
}

.navbar a padding 将确定元素之间的间距。 Width 当然是每个元素的大小。玩一下。如果您需要更多帮助，请告诉我！

【讨论】：

谢谢。这些是我想在其中放置菜单的主页的代码。不幸的是，背景图片没有加载。 jsfiddle.net/rumeysagelgi/yf3qgep2/2
这也是分享按钮的代码。调整宽度和高度也不起作用。  <div class="a2a_kit a2a_kit_size_32 a2a_default_style" style="float: right;"> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_whatsapp"></a> </div> <script async src="https://static.addtoany.com/menu/page.js"></script>
非常感谢您提供的所有帮助和提示！您编写的菜单代码看起来不错，我认为我需要进一步改进和开发它。顺便说一句，我删除了 AddToAny 代码并使用 Facebook for Devs/Twitter for Devs 代替原始的 FB/TW 共享按钮代码（也以 css 样式），因为它们看起来更好且响应迅速。 Twitter 再次运行良好。但是，当我单击 FB 按钮时，它会共享他们的开发人员页面，而不是我的页面。我在帖子中添加了另一个屏幕截图。对此有何看法？
这是 FB 给我的按钮代码：<iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&layout=button&size=small&width=67&height=20&appId" width="67" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>