如何使用jQuery和PHP创建水平滚动的菜单

DebugUsery
134 阅读6分钟

如何使用jQuery和PHP创建水平滚动的菜单

网站菜单是一个重要的组成部分。这是你的客户将在你的页面上看到的片段。

因此，页眉应该有必要的菜单，这是立即吸引访问者注意力的最突出的组件之一。

在本教程中，我们将使用jQuery和PHP中的一个简单模型创建一个简单的水平可滚动菜单。

前提条件

  • 具有HTML、CSS、PHP和jQuery的基本知识。
  • 一个文本编辑器（最好是Visual Studio Code）和一个安装在你电脑上的Web服务器。XAMPP将在本教程中使用。
  • 在我们的代码中包含来自jQuery.com的jQuery CDN链接

在这篇文章中，我们使用以下的文件结构。

files-structure

注意菜单的HTML包含在index.php 文件中。connection.php 文件是用来建立与数据库menu2 的连接，并从数据库中获取可滚动菜单的数据。

学习目标

在本教程结束时，学习者应该能够。

  • 在阅读本文后理解水平滚动菜单的概念。
  • 制作一个菜单模型。
  • 学习如何使用php来建立、连接和加入MySQL数据库。
  • 领会菜单在网页开发中的重要性。

利用平面菜单的意义

  • 它们限制了花在查看客户应该执行的内容以到达其理想内容的时间。
  • 利用水平滚动菜单通过设置一个独特的组件来节省垂直页面空间。
  • 在不使用滚动条的情况下，以一种单独的方式显示事物的罗列菜单的最佳策略。

制作导航菜单的可用模块和库

网络上有很多库和模块；然而，在这篇文章中，我们将利用jQuery与PHP和HTML的结合来制作一个菜单栏。

利用自定义代码来执行平面滚动菜单的优势

  • 自己定制的代码将持续工作，并限制文件大小的数量。
  • 与专门的第三方模块相比，自定义代码流将是直截了当的。
  • 利用CSS text-align center可以调整菜单的焦点。

关于菜单模型

我们的示例代码将是直接的和基本的，使一个独特的羊皮纸菜单来创建我们独特的模型。

jQuery技术被利用来处理平面滚动和移动。

在这些控件的抓取场合，jQuery函数()被调用来移动菜单项，也就是在左右方向移动。

菜单项的导航和方向

向右斜线和向左斜线的箭头（⇝和⇜）将在我们的教程中使用。

我们将使用上述符号在菜单上操作，但你也可以随时使用你选择的任何其他方向的符号。

通过点击，每个相反的箭头将有助于在菜单上来回滚动（从左到右的方向），从而帮助访问者在页面上快速获取菜单项目。

显示菜单和结果的超文本标记语言

我们首先将我们的基本HTML（将被保存为index.php ）代码与我们的connection.php 文件连接起来，然后我们定义我们的标题 "水平滚动菜单"。

然后，在脚本标签中，我们包括一个指向jQuery CDN的链接，接着是一个外部CSS文件。

在我们的html代码的主体中使用了右边，和左边的路线符号，以帮助客户访问菜单项。

菜单项是从我们的menu2 数据库的表信息中获得的。

我们将在HTML代码中使用一个有四个div的简单导航菜单。我们的用户界面箭头（⇝和⇜）分别标记为&#8669 和&#8668 ，位于前两个div中。

我们将使用我们定义的箭头的CSS样式ID（previous-items & next-items）。第三个和第四个div包含的类将帮助我们处理和设计我们的菜单项以及它们来自数据库表的内部内容的样式table_items.

在我们的菜单模型中，PHP的`foreach'结构允许我们显示和循环我们的SQL数据库的内容。

<!-- linking connection.php file with index.php file-->
<?php include "connection.php"?>  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> horizontal scrolling menu</title>
    <!--linking page with css file and jQuery CDN file link -->
    <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
    <body>
        <!-- creating navigation menu -->
        <nav id="mnu-wrap" class="black">
        <div id="prior-items">&#8669;</div>
         <div id="next-items">&#8668;</div>  
             <div class="inner-contents">
                 <div class="menu">
                     <!--fetching menu items from the database and diplaying them as a list-->
                    <?php foreach($result as $res){ ?>
                        <a class="mnu-items" href="#"><?php echo $res['table_data']; ?></a>
                        <?php  } ?>
                    </div>
                </div>        
        </nav>
        <div class="content">
            <h1>Creative Designs KE.</h1>
        </div>
        <!--jQuery functions to manupulate the direction off menu items-->
    <script>
        $('#prior-items').click(function(){
            $(".inner-contents").animate({scrollLeft: "-=300px"});
        });
        $('#next-items').click(function(){
            $(".inner-contents").animate({scrollLeft: "+=300px"});
        });
     </script>
</body>
</html>

简而言之，我们的菜单是以最佳的可见度水平显示的。

我们的菜单的UI箭头符号位于左边和右边。当我们在菜单上移动时，添加了一个悬停效果来帮助可视化。

我们的菜单实例一目了然。

demo1-picture

正如你所观察到的，来自我们数据库的菜单项像一个数组一样被索引，并且是水平显示的。

它们被嵌入到一个导航栏中，通过点击两个相反的箭头来获取。

解决水平滚动的jQuery脚本

jQuery代码（包含在HTML中）建议水平显示菜单内容。

在jQuery animate()方法的帮助下，CSS的向左滚动属性被应用来帮助菜单的方向，并产生生动的影响。

最后，通过使用点击功能，菜单项在用户想要移动的方向上被水平显示。

// integrating jQuery source file jquery-3.6.0.min.js
        <script src="./jquery-3.6.0.min.js"></script>
        <!--jQuery functions to manupulate the direction off menu items-->
    <script>
        $('#prior-items').click(function(){
            $(".inner-contents").animate({scrollLeft: "-=300px"});
        });
        $('#next-items').click(function(){
            $(".inner-contents").animate({scrollLeft: "+=300px"});
        });
    </script>

通过超文本预处理程序（PHP）和MySQL从数据库中引入菜单对象

我们开始设置与我们的menu2 数据库的连接。

首先，创建变量来解决我们的服务器名称、用户名、密码和数据库凭证。

下一步是通过用以下语句生成一个新的PDO 对象来进行连接。

<?php
try{
mysql:host=$servernme;dbname=menu2", $username, $password)
} catch(Exception $e){
 // echo $e->getMessage();
}

如果连接失败，就会出现错误，执行的流程就会转移到我们的catch method ，显示 "没有建立连接 "的信息。

在建立连接后，我们创建一个查询，从数据库表menu_items ，检索菜单信息。

然后，输出被保存在$result ，之后，数据被打印成数组。

记住，要将其立即保存为connection.php ，或其他任何你喜欢的方式。

<?php
$servernme= "localhost";
$usernme = "root";
$pword = "";
$dbname ="menu2";
try {
  $conn = new PDO("mysql:host=$servernme;dbname=menu2", $usernme, $pword);
  //   error mode exception
} catch(PDOException $e) {
  echo "no established connection: ";
}
// Create connection
$conn = new mysqli($servernme, $usernme, $pword,$dbname);
// Check connection
if ($conn->connect_error) {
  die("no established connection: ". $conn->connect_error);
}
$sql = "SELECT table_data FROM menu_items";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) {
  }
} else {
  echo "no results found";
}

包含在我们上面的HTML代码中的PHP代码获取信息，并将其作为一个列表项数组显示在网页标题区域。

<?php 
foreach($result as $res){ ?>
    <a class="mnu-items" href="#">
        <?php echo $res['table_data']; ?>
    </a>

创建数据库

为了创建一个水平菜单列表，我们需要创建一个数据库并存储菜单项目，这些项目将被访问并呈现在我们的页面上。

首先，我们将创建一个简单的SQL数据库，名为menu2 ，必须以.sql 为扩展名保存。

该数据库有menu_items 和两列：Items_id （我们的主键）和items_name （我们将在这里存储假的菜单项）。

现在我们可以将信息嵌入到我们的数据集后。

在向数据库添加新数据时，项目id列被设置为自动递增。

看一下下面的SQL代码。

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;

SET time_zone = "+00:00";
-- Database: `menu2`
-- Table structure for table `menu_items`
CREATE Database`menu2`;
USE menu2;

CREATE TABLE `menu_items` (
  `item_id` int(11) NOT NULL,
  `table_data` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
-- keying data for table `menu_items`

INSERT INTO `menu_items` (`item_id`, `table_data`) 
VALUES
(0, 'home'),
(1, 'about'),
(2, 'contact'),
(3, 'Info'),
(4, 'services '),
(5, 'Help'),
(6, 'countries'),
(7, 'Cities'),
(8, 'jobs'),
(9, 'calendar '),
(10, 'feed'),
(11, 'dashboard '),
(12, 'login'),
(13, 'clients'),
(15, 'support '),
(16, 'donate ');

-- Indexes for table `menu_items`
ALTER TABLE `menu_items`

  ADD PRIMARY KEY (`item_id`);
-- AUTO_INCREMENT for table `menu_items`

ALTER TABLE `menu_items`
  MODIFY `item_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=25;
COMMIT;

导入数据库和运行代码

在将我们所有的文件保存在XAMPP htdocs文件夹中后，最后一步是导入我们的数据库'menu2'，具体步骤如下。

第一步启动XAMPP。在然后Actions 标签下，点击Start Apache 和MySQL 。

start_xampp

第二步在你启动了Apache和MySQL之后，进入MySQL下的管理员，做以下工作（点击管理员）。

open_in_browser

在你的默认浏览器中，会出现一个新的窗口，就像这样：-

import-menu2

导航到数据库导入部分，从XAMPP htdocs文件夹（你保存项目文件的地方）导入你的'menu2'数据库。

在逐一挑选你的数据库文件后，点击GO ，你就完成了。

第三步

这是最后一步。

点击查看水平菜单，在浏览器中打开一个新标签，在地址栏中输入以下内容。

http://localhost/how-to-create-horizontal-scrolling-menu-using-jquery-and-php/

结果

demo2-picture

总结

菜单是网页设计中必不可少的元素，因为它们代表了一个网站的所有功能。

因此，它们有助于在浏览网站和对其组件进行分类时提供方向。

avatar
文章
阅读
粉丝