前端练习之CSS咖啡店menu （freecodecamp.org）

以下是一个简化的示例代码，展示了如何使用HTML和CSS创建一个基本的咖啡店菜单：




<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Arial, sans-serif;
}
 
/* 导航栏样式 */
.navbar {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航栏链接样式 */
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 导航栏链接 - 鼠标悬停效果 */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 下拉按钮样式 */
.dropdown {
  float: left;
  overflow: hidden;
}
 
/* 下拉内容样式 */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
 
/* 下拉链接样式 */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
 
/* 下拉链接 - 鼠标悬停效果 */
.dropdown-content a:hover {
  background-color: #ddd;
}
 
/* 显示下拉内容 */
.show {display: block;}
</style>
</head>
<body>
 
<div class="navbar">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>  
</div>
 
<script>
// 下拉按钮的JavaScript代码
document.querySelector('.dropbtn').addEventListener('click', function() {
  document.querySelector('.dropdown-content').classList.toggle('show');
});
</script>
 
</body>
</html>

这个示例中，我们创建了一个简单的导航栏，包含一个激活的主页链接和一个下拉菜单。下拉菜单可以通过点击按钮展开，并在再次点击时隐藏。这个示例提供了一个基本的下拉菜单的实现，并且使用了简单的JavaScript来切换下拉内容的显示状态。

前端练习之CSS咖啡店menu （freecodecamp.org）

评论已关闭

推荐阅读