javascript - MS Word 样式的 JS/HTML 下拉菜单(帖子中的图片)-6ren

javascript - MS Word 样式的 JS/HTML 下拉菜单(帖子中的图片)

转载作者：行者123 更新时间：2023-12-03 09:53:54

26

4

所以我想创建一个像这样的下拉菜单(带有缩略图)。我有 5 个 html 元素，我想以这种风格显示。我添加了我的代码，但我不知道如何制作那种风格的下拉菜单。

MS Word

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script type="text/javascript">
    window.onload = function(){

      var c=document.getElementById("leplanner-canvas");
      var ctx=c.getContext("2d");
      ctx.beginPath();
      ctx.moveTo(0, c.height/2);
      ctx.lineTo(c.width, c.height/2);
      ctx.stroke();

  		for(var i =0; i< document.getElementsByClassName('box').length; i++){
  			var box = ".box-"+i;
        console.log(i);
        $(box).draggable({
          grid: [ 72, 12 ],
          stop: function( event, ui ) {
            console.log('dragstart');
          },
          stop: function( event, ui ) {

            var json = [];

            for(var i =0; i< document.getElementsByClassName('box').length; i++){

              var b = {
                x: document.getElementsByClassName('box')[i].offsetLeft,
                y: document.getElementsByClassName('box')[i].offsetTop
                /// see asendada koordinaatidega võrreldes canvasega + juurde veel laius ja muu
                ////http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag
              }

              json.push(b);

            }

            //See on see mis ab'i siis läheb
            document.getElementsByClassName('json')[0].innerHTML = JSON.stringify(json, null, 2);
          },
          drag: function( event, ui ) {
            //http://api.jqueryui.com/draggable/#event-drag
            // siin või jquery ui kaudu tuleks kontrollida, et ei saaks kaste üksteise peale panna
          }

        });

        $(box).resizable({
          grid: [ 72, 12 ]
        });
  		}


    }


  </script>

body,html {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
	  position: center;
    }

    .box {
      height: 71px;
      width: 71px;
      margin: 5px;
	  border: 1px solid gray;
      text-align: center;
      background-color: #fff;
      z-index: 20;
	  display: inline-block;
    }
	
    #leplanner-canvas {
      background-color: lightgray;
      margin: 0 auto;
      position: absolute;
      left: 50%;
      margin-left: -480px;
      z-index: 10;
    }

    .list {
	padding-left:450px;
    margin-top: 20px;
	margin-left: 190px;
	position: float-right:
    height: 100px;
    width: 10%:
	}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LePlanner</title>
  <style media="screen">

    

  </style>
  
</head>
<body>
  <div class="list">
    <div class="box box-0">
      Tekst
    </div>
	<div class="box box-1">
      Youtube
    </div>
	<div class="box box-2">
      Twitter
    </div>
	<div class="box box-3">
      Facebook
    </div>
	<div class="box box-4">
      Google
    </div>
	<div class="box box-5">
      Meetod
    </div>
  </div>
  <canvas id="leplanner-canvas" width="960" height="400"></canvas>
  <div class="json"></div>
</body>
</html>

最佳答案

它是具有固定尺寸和定制滚动功能的 div。

示例:

.menu {
  overflow-x: hidden;
  height: 52px;
  width: 300px;
  border: 1px solid #ddd;
}
.nav {
  float: left;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}
.nav:hover {
  border-color: yellow;
}

<div class="menu">
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
  <div class="nav">MENU</div>
</div>

关于javascript - MS Word 样式的 JS/HTML 下拉菜单(帖子中的图片)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30800458/

26

4

0

文章推荐： javascript - 使用phantomjs检索skyscanner结果的html代码

文章推荐： file - 如何停止.BAT文件的进程？

文章推荐： rest - Strongbox 有 REST API 吗？在哪里可以找到规范？

文章推荐： javascript - 谷歌融合表纬度，经度而不是位置

ms-access - 将 MS Word 表单域导入 MS Access
我已经使用 MS Word 和一大堆表单字段创建了一个应用程序表单，并且我有一个 Access db，可以从这个 Word 文档中导入我需要的所有数据，这要归功于: http://msdn.micro
ms-office - MS Office 应用程序和 MS Office 添加之间有什么区别
我试图找到一种将 Outlook 插件发布到办公商店的方法。但我发现我们只能发布 Office 应用程序，而不能发布 Office 商店的加载项。因此我想知道 Office 应用程序和 Office
ms-access - MS Access 数据库中的 MS Reporting Services 报表查看器
我在 MS Reporting Services 服务器上部署了一份报告，工作正常。我可以使用 Microsoft 的报表查看器组件从 ASPX 页面毫无问题地 Access 它、设置报表参数等。效果
ms-project - MS Project 2007 是否需要 SharePoint？MS Project 对您的开发团队有多大用处？
让我们再试一次。我发布这个是为了回答 2 个问题 MS Project 2007 是否需要 SharePoint(我希望没有)？做你喜欢 MS Project 开发团队 - 它是有用的还是疼痛？
ms-access - ms-access自定义菜单栏和注册表
我正在执行这些星期六上午的任务之一，试图理解为什么为什么要在计算机注册表中搜索某些信息会花费大量时间，甚至迫使我停止该过程。使用这些注册表清理程序之一，我发现该代码花了数十分钟遍历如下行： HKEY_
ms-access - MS Access何时比RDBMS支持的Web应用程序更好？
从多年前开始，我就没有使用Access。它能很好地解决什么样的问题，甚至比真正的RDBMS支持的Web应用程序更好？它仍在积极开发吗？还是MS已经死了？最大的局限性是什么？更新：应该使用什么
ms-access - MS Access组开发
我们计划重新设计一个相当庞大的 MS Access 应用程序。有没有办法在同一应用程序上同时工作，或者是否可以合并同一文件的两个单独实例(不是数据，而是表单和代码)。现在 Access 包含数据，但在
ms-access - MS Access因错误而崩溃
我写了一些SQL命令来更正表中的字段。由于它是如此之小(也许我有点自大)，我什至没有运行过一次，只是将其放入了更新包中供其他用户使用。 Dim SQL As String Dim rs As DAO.
ms-access - MS Access值得学习吗？
它是Office自带的，是一个“中规中矩”的数据库，到今天这里有800多个问题，但我从来没有关注过它。我失去了一些有趣的东西？我说的是 MS-Access 作为用于快速原型(prototype)制
ms-access - MS-Access添加其他链接表
我有一个MS-Access数据库，该数据库已通过使用“用于Access的Microsoft SQL Server迁移助手2008”(aka SSMA)转换为使用SQL表并创建了链接表(因此，MS-Ac
excel - 通过 MS Project 导入功能保持 MS Project 和 MS Excel 文件同步
我有一个 Excel 文件，其中包含从 Access 数据库(主数据库)导出的任务。然后，此 Excel 文件用作 MS Project 的导入文件。随后，MS Project 用于实际跟踪和报告，并
ms-project - 将 MS Project 2010 连接到 MS Project Server 2010
我正在尝试获取有关如何将 MS Project 2010 连接到 MS Project Server 2010 的教程或分步说明。我已经在我的服务器上安装了 Server 2008 R2(64 位)
ms-access - MS Access 交叉表查询参数
有没有办法像选择查询一样在查询中引用表单的组合框/文本框？我通常在选择查询的条件中使用类似这样的东西: like forms!frmMain.qTitleofSomething&* (acces
ms-access - MS Access 创建双数据类型的列
我想创建一个表，其中包含 DOUBLE 实数类型的列。我可以在表设计 View 中找到数据类型 Number，但是没有 Double 或 single，Float.. 如何实现..？我还需要 SQL
ms-access - 表字段说明 - MS Access
我环顾四周，发现了一些关于如何从字段的“描述”框中获取描述的 VBA 代码，但没有找到如何在表单属性中使用它的方法。我希望出现一个 ControlTip，其中包含从数据库中的描述中带来的该字段的描述
ms-access - MS Access 无法链接到加密的后端数据库
我有一个难题。我已经开发了一个 Access 应用程序，我正准备分发它。我刚刚拆分了数据库。 (我知道，有人说我应该从一开始就把它分开开发……我没有)我也刚刚加密了后端数据库。在前端，我已链接到后端并
ms-access - MS Access 报告中的超链接
我制作了一个 MS Access 2013 数据库来跟踪有关交易网站的所有通信。与此问题相关的表和列是具有列 ID(编号)和链接(超链接)的广告，以及具有列广告的注释，其中包含广告 ID。链接字段包含
ms-access - MS Access 将记录移动到字段中
我与我不拥有且无法更改的数据库建立了 ODBC 连接。我要做的是使相关记录合并为一条记录。关系是一对多。我有一个学生管理系统，想要导出一个提供自动标注服务(由调用收费)的调用列表。如果有多个学生住在
ms-access - MS Access 表单文本框不可编辑
我在 Access 的表单中设置了一个文本框。该表单链接到一个表格。但是它自己的文本框是未绑定(bind)的，它用于简单地收集用户输入。但是，我无法编辑它所查看的值。文本框未锁定。文本框可以在 VB
ms-access - ms-access 中的日期格式
很难说出这里问的是什么。这个问题是模棱两可的、模糊的、不完整的、过于宽泛的或修辞的，无法以目前的形式得到合理的回答。如需帮助澄清这个问题以便重新打开它，visit the help center .

首页

博学

6Ren·AI

商城

javascript - MS Word 样式的 JS/HTML 下拉菜单(帖子中的图片)