你可以通过JavaScript和CSS来实现这个功能。以下是一个示例代码：

HTML部分：

CSS部分（style.css）：

header {
  background-color: #333;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}

nav ul li {
  margin-right: 20px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

.hamburger-menu {
  display: none;
  cursor: pointer;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 5px 0;
}

@media screen and (max-width: 768px) {
  .hamburger-menu {
    display: block;
  }

  nav ul {
    display: none;
  }
}

JavaScript部分（script.js）：

function toggleMenu() {
  var navbar = document.getElementById("navbar");
  navbar.style.backgroundColor = navbar.style.backgroundColor === "transparent" ? "#333" : "transparent";
  var ul = navbar.querySelector("ul");
  ul.style.display = ul.style.display === "flex" ? "none" : "flex";
}

这段代码使用了CSS的媒体查询来在屏幕宽度小于或等于768像素时隐藏导航栏，并显示一个汉堡菜单。点击汉堡菜单时，使用JavaScript的toggleMenu函数来切换导航栏背景颜色和显示/隐藏导航菜单。