JS实战篇之收缩菜单表单布局

JS实战篇之收缩菜单表单布局是一篇介绍如何使用Javascript制作收缩菜单表单布局的一篇技术文章。下面我们来详细讲解一下其完整攻略。

一、需求分析和技术选型

在开始制作收缩菜单表单布局前，我们需要先确定需求和技术选型。本文实现的基本功能如下：

页面初始状态：左侧为菜单栏，右侧为表单内容。
点击菜单中的选项，右侧展示相应表单内容。
点击展开按钮，菜单栏收缩隐藏，表单内容占据整个页面。

技术选型：由于本文实现的功能依赖于DOM操作，因此我们选用纯JavaScript实现。

二、HTML结构和CSS样式

在按照以上需求确定好技术选型后，我们需要在HTML结构和CSS样式中确定开发的基本风格。可以参照如下示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JS实战篇之收缩菜单表单布局</title>
  <style>
    * {margin: 0; padding: 0;}
    body {font-family: 'Arial', sans-serif;}
    .container {width: 100%; margin: 0 auto; overflow: hidden;}
    .menu {float: left; width: 20%; background-color: #f5f5f5; height: 100vh;transition:width 1s;}
.menu a{display: block; padding: 12px; text-decoration: none; color: #222; }
    .menu a:hover {background-color: #dcdcdc;}

    .content {float: right; width: 80%; background-color: #fff; height: 100vh; padding: 20px;}
    .open {display: none; position: absolute; top: 0; left: 0; background-color: #f5f5f5; width: 20%; height: 100vh; z-index: 1;}
    .btn {position: absolute; top: 10px; left: 10px; width: 32px; height: 32px; background: url('open.png') no-repeat center center; background-size: contain; z-index: 2;}
  </style>
</head>

<body>
  <div class="container">
    <div class="menu" id="menu">
      <h2>菜单</h2>
      <a href="#" data-id="form1">表单1</a>
      <a href="#" data-id="form2">表单2</a>
      <a href="#" data-id="form3">表单3</a>
    </div>
    <div class="content">
      <h2>内容</h2>
      <form id="form1" class="forms" style="display:none;">表单1的内容…</form>
      <form id="form2" class="forms" style="display:none;">表单2的内容…</form>
      <form id="form3" class="forms" style="display:none;">表单3的内容…</form>
      <div class="open"></div>
      <div class="btn"></div>
    </div>
  </div>

  <script src="index.js"></script>
</body>
</html>

三、实现交互效果

在完成HTML结构和CSS样式后，接下来我们需要使用JavaScript来实现交互效果。可以参照如下示例：

var menu = document.querySelector('#menu');
var forms = document.querySelectorAll('.forms');
var open = document.querySelector('.open');
var btn = document.querySelector('.btn');

// 初始化
forms[0].style.display = 'block';
menu.querySelector('a').classList.add('selected');

// 菜单点击事件
menu.addEventListener('click', function (event) {
  event.preventDefault();

  var target = event.target;
  if (target.tagName !== 'A') {
    return;
  }

  // 显示对应表单内容
  for (var i = 0; i < forms.length; i++) {
    if (forms[i].id === target.dataset.id) {
      forms[i].style.display = 'block';
    } else {
      forms[i].style.display = 'none';
    }
  }

  // 样式修改
  for (var i = 0; i < menu.children.length; i++) {
    if (menu.children[i].querySelector('a').dataset.id === target.dataset.id) {
      menu.children[i].querySelector('a').classList.add('selected');
    } else {
      menu.children[i].querySelector('a').classList.remove('selected');
    }
  }
});

// 打开菜单
btn.addEventListener('click', function () {
  if (menu.style.width === '20%') {
    menu.style.width = '5%';
    open.style.display = 'block';
  } else {
    menu.style.width = '20%';
    open.style.display = 'none';
  }
});

以上代码实现了如下功能：

页面加载时，初始化第一个表单被选中，其他表单隐藏。
菜单的a标签绑定点击事件，用于显示对应表单内容和修改样式。
点击打开菜单按钮时，菜单栏收缩隐藏，右侧内容区域撑满整个屏幕。

四、总结

以上就是JS实战篇之收缩菜单表单布局的完整攻略。通过HTML结构、CSS样式与JavaScript代码的交互组合，可以完成一个漂亮实用的收缩菜单表单布局。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实战篇之收缩菜单表单布局 - Python技术站

JS实战篇之收缩菜单表单布局

一、需求分析和技术选型

二、HTML结构和CSS样式

三、实现交互效果

四、总结

相关文章