HTML CSS 移动菜单箭头下拉菜单 - SQL

简介

本篇文章将介绍如何在HTML和CSS中创建移动菜单，并使用箭头下拉菜单来提高用户体验。我们还将讨论如何使用SQL在后端存储和处理菜单数据。

HTML和CSS创建移动菜单

要在HTML和CSS中创建移动菜单，我们将使用响应式设计和媒体查询来确保菜单在不同设备上有良好的表现。具体实现步骤如下：

1. 创建HTML结构

我们将使用HTML5标记创建菜单。通常情况下，菜单由三个主要组件组成：页眉、页脚和主体。页眉通常包含菜单图标或菜单按钮，以及标志或网站名称。主体包含实际菜单选项。页脚包含版权声明和链接等辅助信息。

示例HTML结构：

<header>
    <a href="#" class="menu-toggle">
        <!-- 菜单图标或菜单按钮 -->
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </a>
</header>
<nav class="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
<footer>
    <p>Copyright &copy; 2021</p>
</footer>

2. CSS样式

我们将使用CSS来样式化菜单。下面是一个简单的CSS样式表，您可以自行修改以满足您的需求。

/* 去除默认样式 */
body {
  margin: 0;
  padding: 0;
}

/* 设置页眉样式 */
header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.menu-toggle {
  /* 菜单图标或菜单按钮样式 */
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.icon-bar {
  background-color: #fff;
  display: block;
  height: 3px;
  margin: 5px 0;
  width: 30px;
}

/* 设置菜单样式 */
.menu {
  background-color: #f1f1f1;
  display: none;
  position: absolute;
  top: 60px;
  width: 100%;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #ccc;
}

.menu a {
  color: #333;
  display: block;
  padding: 10px;
  text-decoration: none;
}

/* 显示菜单 */
.menu-toggle.active+.menu {
  display: block;
}

/* 页面宽度小于700px时显示菜单 */
@media screen and (max-width: 700px) {
  .menu-toggle {
    float: right;
  }

  .menu {
    top: 100px;
  }
}

3. JavaScript交互

要实现菜单下拉功能，我们需要添加JavaScript交互。我们将使用jQuery，但您也可以使用纯JavaScript。

$(document).ready(function() {
  $('.menu-toggle').click(function() {
    $(this).toggleClass('active');
  });
});

使用SQL存储和处理菜单数据

为了方便处理菜单数据，我们将使用SQL数据库。我们将在MySQL中创建一个表来存储菜单数据，然后使用PHP将数据读取到我们的菜单中。

1. 创建表

我们将使用以下SQL语句创建一个名为"menu"的表：

CREATE TABLE `menu` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `url` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

然后我们可以向表中添加数据：

INSERT INTO `menu` (`id`, `name`, `url`) VALUES
(1, 'Home', '/'),
(2, 'About', '/about'),
(3, 'Contact', '/contact');

2. PHP查询

我们将使用以下PHP代码在我们的菜单中检索数据：

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "mydb";

// 创建连接
$conn = mysqli_connect($servername, $username, $password, $dbname);
// 检测连接
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT * FROM menu";
$result = mysqli_query($conn, $sql);

// 输出数据
if (mysqli_num_rows($result) > 0) {
    while($row = mysqli_fetch_assoc($result)) {
        echo "<li><a href='" . $row["url"] . "'>" . $row["name"] . "</a></li>";
    }
} else {
    echo "0 结果";
}

mysqli_close($conn);
?>

结论

通过本文的介绍，您已经学习了如何在HTML和CSS中创建移动菜单，以及如何使用SQL数据库存储和检索菜单数据。我们希望这些技能对您有所帮助，并提高了您开发响应式网站的能力。