Question

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

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

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

我的第二个问题是我通过“添加到任何”向我的网站添加了共享按钮。 Twitter 和 WhatsApp 按钮工作得很好，但 Facebook 没有（见第一个 ss）。 href 代码是 href="https://www.addtoany.com/share" 我的网站尚未上线。这会导致错误吗？

我还想让按钮更小、更灵敏（见第二节）。到目前为止，我尝试了 style="font-size: .. ;"，但没有奏效。

谢谢。

编辑：

Answer 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 中学到更多，而不是将数百行代码粘贴到你的文件中并获得在线调试帮助。< /p>

我为您制作了一个非常简单的导航栏来帮助您入门： 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 将决定元素之间的空间。宽度当然是每个元素的大小。稍微玩一下。如果您需要更多帮助，请告诉我！

向网站添加汉堡包菜单和共享按钮

1 个答案: