时间戳

首页 > 解决方案 > 向网站添加汉堡菜单和分享按钮

javascript - 向网站添加汉堡菜单和分享按钮

问题描述

我正在建立自己的网站以及学习 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: .. ;"了，但没有奏效。

谢谢你。

SS1 SS2

编辑： 在此处输入图像描述

标签： javascripthtmlcsswebhamburger-menu

解决方案

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

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

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

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

编辑：

不要style在您的 HTML 中使用，请使用您的 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 填充将确定元素之间的空间。宽度当然是每个元素的大小。玩一下。如果您需要更多帮助，请告诉我！

推荐阅读