1. Python技术站首页
  2. jquery

JQuery实现绚丽的横向下拉菜单

• jquery

JQuery实现绚丽的横向下拉菜单可以分为以下几个步骤：

1. HTML结构

首先，在HTML中需要构建一个基本的结构来包容下拉菜单的内容，这个结构如下所示：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a>
      <ul>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Instagram</a></li>
      </ul>
    </li>
    <li><a href="#">Blog</a>
      <ul>
        <li><a href="#">Popular Posts</a></li>
        <li><a href="#">Recent Posts</a></li>
        <li><a href="#">Archives</a></li>
      </ul>
    </li>
  </ul>
</nav>

其中，nav标签代表整个导航栏的区域，ul和li标签代表菜单项，下拉菜单的内容则使用嵌套ul和li标签来实现。

2. CSS样式

接下来，需要定义菜单项以及下拉菜单的样式。以下是一个基本的CSS样式表：

nav {
  background: #333;
  text-align: center;
  font-size: 0;
}

ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  position: relative;
  margin-right: 20px;
  font-size: 16px;
}

a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 12px 20px;
}

ul ul {
  display: none;
  position: absolute;
  top: 48px;
  left: 0;
  background: #333;
}

ul ul li {
  display: block;
  margin: 0;
}

ul ul li a {
  padding: 10px 20px;
  display: block;
}

li:hover > ul {
  display: block;
}

其中，nav的背景颜色为灰色，菜单项使用display: inline-block来实现横向排列，每个菜单项后面留有一定的间距。菜单项使用position: relative来方便之后下拉菜单的绝对定位。下拉菜单使用display: none先隐藏，并设置其position属性为absolute实现相对于父元素绝对定位。当鼠标经过菜单项时，其对应的下拉菜单会显示出来。

3. JQuery实现

最后，可以使用JQuery来实现菜单项的鼠标事件，并在鼠标悬停时显示下拉菜单。以下是基本的JQuery代码：

$(document).ready(function() {
  $('nav li').hover(
    function() {
      $('ul', this).slideDown(100);
    },
    function() {
      $('ul', this).slideUp(100);
    }
  );
});

这段代码实现了鼠标悬停显示下拉菜单的效果。当鼠标悬停在菜单项上时，其下属的下拉菜单会显示出来，使用slideDown函数来实现；当鼠标离开菜单项时，下拉菜单会隐藏，使用slideUp函数来实现。

示例1

以下是一个完整的示例代码，实现了横向下拉菜单，包括HTML结构、CSS样式和JQuery代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Horizontal Dropdown Menu</title>
  <style type="text/css">
    nav {
      background: #333;
      text-align: center;
      font-size: 0;
    }

    ul {
      display: inline-block;
      margin: 0;
      padding: 0;
    }

    li {
      display: inline-block;
      position: relative;
      margin-right: 20px;
      font-size: 16px;
    }

    a {
      color: #fff;
      text-decoration: none;
      display: block;
      padding: 12px 20px;
    }

    ul ul {
      display: none;
      position: absolute;
      top: 48px;
      left: 0;
      background: #333;
    }

    ul ul li {
      display: block;
      margin: 0;
    }

    ul ul li a {
      padding: 10px 20px;
      display: block;
    }

    li:hover > ul {
      display: block;
    }
  </style>
  <script type="text/javascript" src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('nav li').hover(
        function() {
          $('ul', this).slideDown(100);
        },
        function() {
          $('ul', this).slideUp(100);
        }
      );
    });
  </script>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a>
        <ul>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Instagram</a></li>
        </ul>
      </li>
      <li><a href="#">Blog</a>
        <ul>
          <li><a href="#">Popular Posts</a></li>
          <li><a href="#">Recent Posts</a></li>
          <li><a href="#">Archives</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
</html>

示例2

以下是另一个例子，在上面的基础上增加了页面动态效果，鼠标悬停显示菜单下划线：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Horizontal Dropdown Menu with Underline</title>
  <style type="text/css">
    nav {
      background: #333;
      text-align: center;
      font-size: 0;
    }

    ul {
      display: inline-block;
      margin: 0;
      padding: 0;
    }

    li {
      display: inline-block;
      position: relative;
      margin-right: 20px;
      font-size: 16px;
    }

    a {
      color: #fff;
      text-decoration: none;
      display: block;
      padding: 12px 20px;
      position: relative;
    }

    a:hover {
      text-decoration: none;
    }

    /* 菜单项下划线 */
    a:after {
      content: '';
      position: absolute;
      height: 3px;
      left: 50%;
      bottom: 0;
      background: #fff;
      transition: transform 0.2s, width 0.2s, left 0.2s cubic-bezier(0.17, 0.67, 0.52, 0.97) 0.1s;
      transform: translateX(-50%) scaleX(0.1);
      width: 0;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
    }

    /* 鼠标悬停时菜单项下划线 */
    a:hover:after {
      transform: translateX(-50%) scaleX(1);
      width: 100%;
      left: 0;
    }

    ul ul {
      display: none;
      position: absolute;
      top: 48px;
      left: 0;
      background: #333;
    }

    ul ul li {
      display: block;
      margin: 0;
    }

    ul ul li a {
      padding: 10px 20px;
      display: block;
    }

    li:hover > ul {
      display: block;
    }
  </style>
  <script type="text/javascript" src="//code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('nav li').hover(
        function() {
          $('ul', this).slideDown(100);
        },
        function() {
          $('ul', this).slideUp(100);
        }
      );
    });
  </script>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a>
        <ul>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Instagram</a></li>
        </ul>
      </li>
      <li><a href="#">Blog</a>
        <ul>
          <li><a href="#">Popular Posts</a></li>
          <li><a href="#">Recent Posts</a></li>
          <li><a href="#">Archives</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
</html>

在这个例子中，我们使用了CSS的transition属性和transform属性，实现了鼠标悬停时菜单项下划线的动态效果。这个效果使用了transition属性来定义变换动画，而transform属性则被用来移动和缩放元素。cubic-bezier函数用于定义变换速度曲线，可以让菜单项下划线的动态效果更流畅。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JQuery实现绚丽的横向下拉菜单 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • jQuery中将函数赋值给变量的调用方法

    当将函数赋值给变量时，可以通过变量名来调用函数。在jQuery中，将函数赋值给变量通常用于定义插件或给事件绑定回调函数。下面是具体步骤和示例说明： 步骤： 定义函数并将其赋值给变量：使用var关键字定义一个变量，并将函数表达式赋值给该变量。函数表达式允许我们创建没有函数名称的匿名函数。 javascript var myFunc = function() {…

    jquery 2023年5月27日
    00

  • JQuery中getJSON的使用方法

    针对“JQuery中getJSON的使用方法”的完整攻略，以下是详细讲解。 什么是getJSON 在开始讲解使用方法之前，需要先了解一下getJSON。getJSON是JQuery中常用的一种基于AJAX的请求方式，用于获取JSON格式的数据。 getJSON的语法 $.getJSON(url,[data],[callback]) 参数解释： url：必须参…

    jquery 2023年5月27日
    00

  • jQuery实现金额录入框

    下面是关于“jQuery实现金额录入框”的完整攻略，包含以下几个步骤： 创建HTML代码。创建一个包含input输入框的HTML代码。这可以通过以下代码实现: <label>请输入金额：</label> <input type="text" id="money"> 添加jQuery库…

    jquery 2023年5月28日
    00

  • 如何在jQuery中使一个flash元素

    下面是如何在jQuery中操作Flash元素的攻略： 1. 将Flash嵌入页面 首先，我们需要将Flash嵌入到网页中。这可以通过使用标准的HTML <object> 标签来完成。例如： <object id="myFlash" width="320" height="240" …

    jquery 2023年5月12日
    00

  • 在 Angular 中获取当前日期的方法

    Angular中获取当前日期的方法有以下几种方式： 1. DatePipe Angular提供了一个内置的pipe：DatePipe来处理日期。我们可以将DatePipe注入到组件中，然后使用它的transform方法来获取当前日期。 import { Component } from ‘@angular/core’; import { DatePipe }…

    jquery 2023年5月27日
    00

  • jQuery Mobile panel classes.contentFixedToobar选项

    jQuery Mobile是一个基于jQuery框架的移动Web应用程序的UI框架。其中面板面板被设计为提供一个灵活的导航系统，它可以移动打开或关闭，并提供应用程序导航，设置，搜索等内容。在jQuery Mobile中，面板由”panel”，”panel内部”和”panel外部”组成。 以面板中的“contentFixedToobar”选项为例，这个选项可以…

    jquery 2023年5月12日
    00

  • instanceof和typeof运算符的区别详解

    instanceof 和 typeof 运算符的区别详解 在 JavaScript 中，instanceof 和 typeof 都是用于判断变量类型的运算符，但它们的使用场景和结果判断方式却有很大的不同。 typeof 运算符 typeof 运算符返回一个用于表示变量类型的字符串。它的语法如下： typeof operand 其中 operand 是用于进行…

    jquery 2023年5月27日
    00

  • jQuery 使用手册(一)

    以下是详细讲解“jQuery 使用手册(一)”的完整攻略： jQuery 使用手册(一) 什么是 jQuery？ jQuery 是一种流行的 JavaScript 库，用于简化 HTML 文档的遍历、事件处理、动画和 Ajax 操作。它被设计为易于使用的操作 DOM 元素的工具。 如何使用 jQuery？ 在使用 jQuery 之前，我们需要先引入 jQue…

    jquery 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部