如何制作可重用的 HTML 导航菜单?

2023-11-24

我相信这个话题一直都会出现
但我似乎无法给出一个简洁的答案。

我有一个垂直菜单栏,我想在网页(> 20)中重复使用它。 这Menu Bar以 HTML 编码并使用:UL, LI, A, <Div>标签和 CSS。我们需要这个:

  1. Reusable
  2. 可维护
  3. Scalable

这样我们就不必每次添加页面时都修改所有页面。

如果可能的话,我们宁愿避免编码方法。我们可以只使用一个根据需要进行编辑的主文件。由于我们正在使用CSS and <div>s,我认为框架不适合我们。我们可以做什么?


如果您不想使用编程语言,那么服务器端包含是一种可行的方法。

它们采用这种形式:

<!--#include virtual="menu.html" -->

并将被插入到页面中您将该标签放置在 HTML 中的任何位置。它需要服务器端解析,因此您的 Web 服务器必须启用服务器端包含。您可以尝试一下,如果不起作用,请联系您的服务器主机以查看是否可以启用它们。如果是 Apache,则有一个启用它们的方法也通过 .htaccess 文件。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何制作可重用的 HTML 导航菜单? 的相关文章

  • Bootstrap 100% 宽度/全宽度

    我想用 Bootstrap 创建一个新网站 我需要它的宽度为 100 但我不希望它是流畅的 至少现在不是 我遇到的问题是 使用 bootstrap 标准将您限制为 960px 并且使用流体布局它是全宽的 但其行为就像流体布局应该通过在窗口尺
  • 使用选择器获取最接近的父元素(不包括当前元素)

    我正在尝试获取元素的最接近的父元素 看着 closest https developer mozilla org en US docs Web API Element closest 如果选择器与元素匹配 它似乎会返回元素本身 Closes
  • 标记对话(或采访)的最语义方式?

    我试图找出最语义化的方式来标记这样的东西 John blah blah Paul blah blah George blah blah Ringo blah blah or John blah blah Paul blah blah Geo
  • 如何仅在表格内应用边框?

    我想弄清楚如何仅在表格内添加边框 当我做 table border 0 table td table th border 1px solid black 边框围绕整个表格以及表格单元格之间 我想要实现的是仅在表格单元格周围的表格内部有边框
  • CSS 选择器:id 或类中的第一个 div

    用于选择类中或具有特定 id 的第一个 div 的正确 CSS 选择器是什么 对于父 子元素来说 这似乎要容易得多 但我还没有找到简单元素的任何内容 更新 解决方案 我发现的最干净 最兼容的解决方案是 class class 它选择前一个类
  • CSS 100% 高度在 React 应用程序中不起作用

    我试图在我的 React 应用程序中使用 Flexbox 创建一个简单的两列网页 占据整个宽度和高度 我可以让它单独使用 HTML 和 CSS 但不能在 React 应用程序中使用 到目前为止我有 root overflow x hidde
  • 如何禁用 mui 文本字段自动完成?

    我正在使用最新版本的 mui 我有一个包含邮政编码字段的用户联系信息表单 如果值为空 我不希望此字段自动完成 但它会随着浏览器中保存的电子邮件自动完成 这是我到目前为止所尝试过的 自动完成 关闭 自动完成 关闭 自动完成 不 这是我的文本字
  • 在两个页面/选项卡之间进行通信

    我想要一个 JavaScript 文件来控制两个 HTML 文件同时地 div div 那是第一页 接下来是第二页 div div
  • 键盘友好的 CSS 菜单

    我的问题是这个问题的续集 键盘可访问的网络下拉菜单 https stackoverflow com questions 3945490 keyboard accessible web dropdown menus 虽然上述问题表明 我们想出
  • 如何使用 javascript 从 Audio Element 录制音频

    我正在使用 HTML5 和 Javascript 制作录音机 并且不想包含任何第三方 API 我的第一步是使用以下命令创建音频检索器和播放器
  • 如何设置 HTML5 表单验证消息的样式? [复制]

    这个问题在这里已经有答案了 我正在使用 必需 的 HTML5 验证 但气泡消息正在我的屏幕中创建滚动条 因为输入字段尺寸很小并且位于右侧 所以我想更改气泡消息以显示输入字段的左侧或更改其样式 HTML5 表单
  • 动态添加导航抽屉中的项目

    我创建了抽屉 但是我想动态设置抽屉的项目列表 意味着从数据库获取数据并设置为抽屉列表 是否可以 是的 比如何 我也知道静态抽屉 尝试这个 final Menu menu navigationView getMenu for int i 1
  • 将表中的行相对于另一个表拖放[关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 嘿 我有两个行数相同的表 例如 如果我尝试对 tableOne 中的一行 例如 row 3 进行排序 则其他表 tabl
  • CSS:悬停在多个 div 上时显示样式

    我有 2 个不同尺寸的 div 一个放在另一个上面 所以有一个共同的交叉区域 这两个 div 都有 CSS hover 规则集 如果我将鼠标悬停在每个 div 上 则规则适用 但是 如果我移过交叉区域 则只会激活顶部 div 悬停 当鼠标悬
  • 在 div 内对齐 2 个图像,一张向右,另一张向左

    我的网页中有 2 张图片 我希望一张图像左对齐 另一张图像右端对齐 The JsFiddle http jsfiddle net NbekW 这是我的 HTML div class header img src Home files ima
  • CSS Hex 到速记十六进制转换

    将十六进制转换为速记十六进制的正确算法是什么 例如 996633很容易被转换为 963 但如果是这样怎么办 F362C3 我的第一个猜测是我只取每种颜色的第一个值并使用它 所以 F362C3变成 F6C 但我不知道如何从数学上证明这种方法的
  • 有没有办法在不托管网站的情况下呈现网站并共享它?

    我正在为一个项目创建一个 repl it 网站 问题是我的老师要求不要发布该网站 这意味着我无法使用 repl it 来托管它 我想知道是否有任何方法可以制作可以通过 Google Chrome 查看的网站副本 而无需连接到主机 我有所有的
  • CSS 可见性动画不起作用

    我想在 CSS 可见性属性上制作基于关键帧的动画 我最初在 显示 上尝试过 但发现不支持 显示 上的动画 但支持 可见性 这个想法是让矩形的可见性不断切换 我不想使用 jquery 并且想在 CSS 中实现整个它 以下是我的代码 但它没有给
  • 带有无序列表的 Flexbox

    我正在尝试学习 Flexbox 我真的很喜欢它 我正在尝试 玩动态宽度 当我这样做时div它有效 如果我尝试这样做li 它也不起作用 我的代码已上线codepen http codepen io jrock2004 pen pjvZJd d
  • 定位分离的 DOM 树内存泄漏

    我在诊断主要使用 Knockout 构建的非常大的单页 Web 应用程序中的分离 DOM 树内存泄漏时遇到问题 我已经调整了应用程序以附加一个假人FooBar对象特定的 HTML 按钮元素 当用户移动到应用程序的不同 页面 时 该元素应该被

随机推荐

  • 使用node.js提示用户输入? [复制]

    这个问题在这里已经有答案了 我正在开发一个使用 node js 运行的 JS 项目 但我不知道如何让提示正确地用于用户输入 我从 npm 安装了它 按照步骤操作 我可以让程序提示用户输入 但无法将结果存储在变量中 我想要的是提示用户每回合的
  • 如何从自定义的QMessageBox中捕获按钮点击?

    如何修改下面自定义 QMessageBox 的代码才能知道用户是否单击 是 或 否 from PySide import QtGui QtCore Create a somewhat regular QMessageBox msgBox Q
  • 没有为带有 ARC 的 MKMapView 释放内存

    我有一个习惯UIView called ActivityDetailView我实例化然后添加到父视图控制器内的滚动视图 当分配此自定义视图时 每次额外的内存都会占用大约 1mb 并且 Instruments 显示内存永远不会被释放 即使视图
  • 欧拉到矩阵以及矩阵到欧拉的转换

    我正在尝试使用 NET C 将欧拉角描述的 3D 旋转转换为矩阵 然后再转换回来 我的约定是 左手系统 x 向右 y 向上 z 向前 旋转顺序 绕 y 航向 绕 x 俯仰 绕 z 倾斜 使用左手定则旋转为正 拇指指向 无穷大 我的试用是 欧
  • Magento:覆盖客户帐户控制器

    您好 我正在尝试覆盖 Mage Customer AccountController 以便我可以扩展 createPostAction 方法 对于我的一生 我似乎无法做到这一点 它要么抛出一个 404 页面 这表明它不是文件的正确路径 要么
  • Java - 需要一个记录堆栈跟踪的日志包

    是否有一个记录器可以轻松记录我的堆栈跟踪 我得到的ex printStackTrace 我搜索了 log4j 文档但什么也没找到 关于记录堆栈跟踪 我可以自己做这个 StringWriter sw new StringWriter ex p
  • 如何防止exoplayer在向后搜索时重新加载?

    我正在使用 exoplayer 播放 mp3 曲目 都好 如果轨道完全缓冲 那么在向前查找的情况下 它不会按预期重新加载 但是 如果向后查找 它会重新加载 我该如何防止这种情况 是exo的bug吗 这并不是一个真正的解决方案 但您可以使用一
  • 如何获得第二个System.Thread.ThreadPool?

    如果我以嵌套方式使用 ThreadPool 我的应用程序将挂起 ThreadPool QueueUserWorkItem state gt ThreadPool QueueUserWorkItem Action 如何获得第二个独立的Thre
  • Eq 和 Ord 实例不一致?

    我有一个大型 Haskell 程序 它运行速度慢得令人沮丧 分析和测试表明 很大一部分时间都花在比较特定大型数据类型的相等性和顺序上 这非常重要 相等是一个有用的操作 这是状态空间搜索 图搜索比树搜索更可取 但我只需要此类的 Ord 实例即
  • 元素的类名中包含(方)括号的原因是什么?

    我对这个说法感到非常惊讶class col xs 12 col sm offset 1 col sm 5 在 bootstrap 3 模板中 我不确定两者之间有什么区别 class col xs 12 col sm offset 1 col
  • sails-mysql 架构数据类型

    任何人使用节点的 sails 框架使用 mysql 作为数据库 https github com balderdashy sails mysql 我陷入模型中 无法创建数据库结构 我需要用来创建架构的数据类型不起作用 我到处搜索了一些文档
  • 用于匹配不同 Unicode 脚本之间边界的正则表达式

    正则表达式引擎有一个 零宽度 匹配的概念 其中一些对于查找单词的边缘很有用 b 存在于大多数引擎中 以匹配单词和非单词字符之间的任何边界 lt and gt 存在于 Vim 中分别仅匹配单词开头和结尾的边界 一些正则表达式引擎中的一个较新的
  • 使用脚本启用与 sql express 的远程连接

    我正在使用 sql server express 2008 部署一个应用程序 在我的应用程序的先决条件部分中 我已包括 因此 当用户安装我的应用程序时 它也会安装 sql express 然后我将能够连接到该数据库引擎 try databa
  • 读取 MIDI 文件

    读取具有多个轨道的 MIDI 文件 按时间顺序 的最佳方法是什么 爪哇 注意 我不想播放 MIDI 文件 只想读取消息 情侣想法 是否可以安全地假设没有比 1 64 音符短的音符事件 或者我应该访问每个轨道并仅在所有其他刻度线之后移动到下一
  • 本机 C# pdf 阅读器 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 我需要从 PDF 文件中提取文本 我找到了 iTextSharp 和 PDFBox 但它们都只是 Java 端口 为了使它们工作 我需要使用大量的附
  • CSS 背景图像在 iPhone 上的渲染方式不同

    我们的页面设计在我尝试过的所有 PC 浏览器中都表现良好 但在 iPhone 或 iPod Touch 上查看时却很奇怪 问题与非常高的居中背景图像有关 content container background image url cont
  • 在 log4net 中使用 smtpAppender 的多个 smtphost 地址

    我希望能够指定多个 smtp 服务器主机地址并实现一种逻辑 如果使用一个 smtp 服务器的电子邮件失败 它会尝试使用下一个 smtp 服务器地址发送 是否可以使用 log4net 我们可以重写 log4net 的一些功能并在其中实现我们自
  • android 设置首选项屏幕的分隔线填充

    我有 PreferenceScreen 包含许多 CheckBox 我通过将其引用到自定义布局来自定义它 如下所示
  • gnuplot 边距在多图模式下如何工作?

    我对 gnuplot 边距有点困惑 首先我不知道这些东西指向什么单位 它们是指向画布坐标还是画布坐标的一部分 它们在 gnuplot 模式和 multiplot 模式下的行为是否相同 在多图模式下绘制一些数据时出现了我的问题 我正在绘制到屏
  • 如何制作可重用的 HTML 导航菜单?

    我相信这个话题一直都会出现但我似乎无法给出一个简洁的答案 我有一个垂直菜单栏 我想在网页 gt 20 中重复使用它 这Menu Bar以 HTML 编码并使用 UL LI A div 标签和 CSS 我们需要这个 Reusable 可维护