程序员经验分享-hwhale

调整
    的宽度以容纳菜单项

2024-01-07

我有一个包含子菜单的菜单。它的 HTML 源代码如下所示：

<ul id="menu">
  <li>
    <a href="javascript:;">Menu 1</a>
    <ul>
      <li><a href="javascript:;">Item 1<a></li>
      <li>
        <a href="javascript:;">Subitem 1</a>
        <ul>
          <li><a href="javascript:;">Subsubitem 1</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

在使用 Superfish 应用一些 CSS 并按顺序获取 JavaScript 方面的内容后，菜单在浏览器中如下所示：

第二个菜单项太大，无法容纳其空间，因此剩余的文本将渲染到下一个菜单项的文本上。有没有办法放大<ul>确保文本合适？

Update：这是相关的CSS代码：

ul#menu {
    position: relative;
    top: 160px;
    left: 130px;
    width: 700px;
}
ul#menu, ul#menu ul {
    list-style-type: none;
}
ul#menu > li {
    display: block;
    float: left;
    background: url(img/menuitem.png) top left;
    width: 104px;
    height: 37px;
    margin-right: 5px;
    text-align: center;
}
ul#menu > li:hover {
    background-position: bottom left;
}
ul#menu > li > a {
    height: 100%;
    padding-top: 10px;
    font-size: 80%;
    font-weight: bold;
    color: white;
}
ul#menu > li > a, ul#menu > li > ul a {
    display: block;
    text-decoration: none;
}
ul#menu > li ul {
    min-width: 150px;
}
ul#menu > li > ul li {
    color: black;
    font-size: 10pt;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    height: 30px;
    line-height: 30px;
    background: url(img/menubg.png) repeat;
}
ul#menu > li > ul li:hover {
    background-color: #9c938c;
}
ul#menu > li > ul a {
    color: black;
}
ul#menu > li ul {
    position: relative;
    top: -10px;
}
ul#menu > li li.hoverItem > ul {
    position: relative;
    top: -30px;
}
ul#menu > li > a > span.sf-sub-indicator {
    display: none;
}
ul#menu > li > ul > li a > span.sf-sub-indicator {
    float: right;
    margin-right: 5px;
}

span.sf-sub-indicator and li.hoverItem由 Superfish 使用。sf-sub-indicator用于指示将鼠标悬停在菜单项上将导致打开子菜单，如下所示：

<li>
  <a href="javascript:;" class="sf-with-ul">Menu item with submenu<span class="sf-sub-indicator"> »</span></a>
  <ul>
    <!-- Etc -->
  </ul>
</li>

li.hoverItem应用于您为到达鼠标所在菜单而传递的所有菜单项，以及鼠标当前悬停在其上的菜单项。


好的，我使用您上面发布的相同 css 定义将一些内容放在一起。这对我有用 - 自动检测最大元素的大小并调整相关的 CSS。

您需要调整 li 元素以获得可预测的命名方案，以便它可以找到最大的一个。根据您的字体，您可能需要调整*5newSize 的分配部分。

<html>
  <head>
    <title></title>
    <meta content="">
<script type="text/javascript">
function changeSize() {
  var html = document.getElementById("item"+1).innerHTML;
  var newSize = html.length*5;
  var num_menu_items = 3;
  for (i=2; i<=num_menu_items; i++) {
    var temp = document.getElementById("item"+i).innerHTML;
    if (temp.length > newSize / 5)
        newSize = temp.length*5;
  }
  var theRules = new Array();
  var rule;
  if (document.styleSheets[0].cssRules)
    theRules = document.styleSheets[0].cssRules
  else if (document.styleSheets[0].rules)
    theRules = document.styleSheets[0].rules
  for (i = 0; i<theRules.length; i++) {
    if (theRules[i].selectorText.indexOf("ul#menu > li ul") > -1) {
      rule = theRules[i];
    }
  }
  rule.style.setProperty('min-width',newSize+"px",null);
}
</script>
  </head>
  <body onload='changeSize();'>
<ul id="menu">
  <li>A-one</li>
  <li>A-two</li>
  <li>A-three
    <ul>
      <li id='item1'>B-one</li>
      <li id='item2'>B-two-is-really-really-really-really-really-really-really-really-really-really-really-really long</li>
      <li id='item3'>B-three</li>
    </ul>
  </li>

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

javascript

html

css

menu

调整
    的宽度以容纳菜单项 的相关文章

  • 多个链接 dc.js 图表的 d3-tooltips

    我正在寻找修改 dc js 的开箱即用工具提示 似乎有一个解决方案使用d3 js 工具提示 https github com Caged d3 tip as in 这个问题 https stackoverflow com questions

  • 继承子节点的高度（A内的IMG）

    我的电脑上有一个漂亮的 CSS a 标签 放一个 img 链接内部使图像粘在链接外部 a 块 尽管它仍然可以点击 但看起来很愚蠢 改变 a to display block or float left修复了这个问题 但有一个不良的情况not

  • 如何将身份验证详细信息传递给 iframe 内的应用程序？

    我有一个网页 想在其中显示詹金斯的网页 因此使用iframe like But http xxx xxx xx xx 8080 view Nightly 20Builds 20 打开登录页面 因此无法直接显示内容 其实我想在没有登录的情况下

  • 跳过测试文件 Jest 中的一项测试

    我正在使用 Jest 框架并有一个测试套件 我想关闭 跳过其中一项测试 谷歌搜索文档没有给我答案 您知道答案或需要检查的信息来源吗 我在这里找到了答案 https devhints io jest https devhints io jes

  • Node.js 中的 SetTimeout 问题

    我有以下代码 它在 Chrome V8 下运行良好 但在节点内失败 var id id setTimeout TimeoutHandler 10 console log SET function TimeoutHandler clearTi

  • 如何在 CSS 中使用 3 位颜色代码而不是 6 位颜色代码？

    我最近检查了我的 CSS 文件 并将所有六位十六进制代码转换为简单的三位数代码 例如 我的 FDFEFF被缩短为 FFF 它呈现的颜色与以前几乎完全相同 在我看来 中间部分相当无用 删除它们在我的 CSS 文件中节省了整整 300 个字节

  • 缩放对象上的弹跳动画

    拥有对象比例 然后在返回到原始比例因子之前以该比例因子执行弹跳动画的最佳方法是什么 我意识到我可以做一些事情 比如将其缩放到 2 2 然后 1 8 然后 2 0 但我正在寻找一种方法 您只需在比例因子上执行弹跳动画 因为我的比例因子会改变

  • this 关键字是构造函数中的窗口对象

    好吧 所以我以为我理解了这一点 没有双关语的意思 但显然不是 var Constructor function var internalFunction function return this window this myMethod f

  • 在 Promise 中中止 ajax 请求

    我正在构建一个表单验证并学习承诺 我决定使用承诺模式实现异步验证函数 var validateAjax function value return new Promise function resolve reject ajax data

  • 使用 CSS 网格布局跨越所有列/行的项目

    随着 CSS 网格布局模块很快在 Firefox 和 Chrome 中发布 我想我应该尝试了解如何使用它 我尝试用一 个项目创建一个简单的网格a跨越所有行的左侧 其他项目 b c d e等 跨越各个行的右侧 跨越行右侧的项目数量是可变的 因

  • Internet Explorer 10，最大 div 大小为 1.533.917 像素

    我需要制作一个非常大的 div 以百万像素为单位 搜索我发现这个线程证明 IE 可以管理最多 10 000 000 px 确定最大可能的 DIV 高度 https stackoverflow com questions 7719273 de

  • 如何使 Flexbox 父级具有其子级的宽度？

    我有一个父元素 里面有两个元素 div class parent div class child one div div class child two div div 目前 parent 的宽度为 100 我希望它只是两个孩子的宽度 pa

  • 如何取消 ComponentWillUnmount 中的所有请求？

    根据docs https facebook github io react docs react component html componentwillunmount ComponentWillUnmount 能够取消请求 我有一个页面发

  • 动态添加项目到放大弹出画廊

    有没有办法动态添加图库项目华丽的弹出窗口 http dimsemenov com plugins magnific popup 那已经开放了 或更新当前项目 找不到关于 in 的任何内容插件文档 http dimsemenov com pl

  • Google 脚本过滤一个值的范围

    我想过滤第 1 列中仅包含 Bob 特定值的行的 google 工作表范围 到目前为止 我的代码允许我过滤out第 1 列中有 Bob 的行 我需要相反 我想返回第 1 列中只有 Bob 的行 因此 其中 filterSettings 不是

  • 在CSS中重置Margins/Padding时使用*是错误的吗？

    应该避免以下内容 还是应该因其简单性而受到赞扬 作为记录 我在我构建的每个站点中都使用它 但我注意到它并不存在于许多主流 CSS 重置框架中 他们是否也不使用它 margin 0 padding 0 最好不要使用它 因为它会导致表单元素出现

  • 有条件地使用 Node.js 提供两个 React 构建

    我有两个基于设备向客户端提供服务的 React 应用程序 我使用 Node js 和 Express 来实现这一点 我借了static资产处理部分来自这个问题在这里 https stackoverflow com questions 644

  • 将 ERB 与 Handlebars 模板结合使用

    我有一个使用 ajax 创建新标签的模式 它使用 Tags 参数执行 POST 方法 而无需重新充电视图 因此 我希望根据所选的 price type 参数来呈现一个或另一个价格 div 我使用 Handlebars 所以我想这不是 rub

  • 如何在JAVascript中删除具有相同ID但display='block'和display='none'的div

    我有超过 1 个 div 具有相同的 id 但其中一个具有 display block 和其他人有显示 无 我想删除所有具有 display none 的 div 请告诉最简单的方法 文档中多个元素具有相同的 id 是违反 W3 标准的 请

  • eclipse.ui.menus 的名称过滤器

    我有一个菜单贡献 通过实现org eclipse ui menus扩展点 我想仅为特定文件扩展名 例如 pld 提供此菜单贡献 但我不知道如何使用 visibleWhen 来做到这一点 有任何想法吗 更新 到目前为止我的扩展点

随机推荐

  • 如何在 JavaScript 中将整数格式化为特定长度？

    我在 Javascript 中有一个数字 我知道它小于 10000 并且也是非负的 我想将其显示为四位数字 并带有前导零 还有比下面这个更优雅的吗 if num lt 10 num 000 num else if num lt 100 nu

  • HMS感知服务-集成SDK后返回错误码10011

    我集成了HMS Core Awareness SDK 然后调用getWeatherByDevice接口查询天气数据 出现错误 com huawei hms kit awareness b HHG Error Code 10005 描述 障碍

  • 通过环境变量 docker-compose redis 密码

    我正在尝试使用传递我的 redis 密码docker compose通过环境变量 但它给了我错误 这是我的一部分docker compose yml与 Redis 图像 redis image redis container name re

  • 用标签数据填充 x86_64 指针前十六位？

    由于当前的 x86 64 实现仅能够使用 48 位 虚拟 地址空间来降低 MMU 复杂性 因此前 16 位是否可用于实现安全标签数据 当前的实现是否限制这种使用 即使知道IP和其他段寄存器是完整的六十四位 并将指针的前十六位限制为仅包含虚拟

  • 如何console.log所有继承的属性？

    抱歉 菜鸟问题 我刚刚学习 JavaScript 我有一个简单的对象 var bike wheels 2 我创建了一个新对象 它通过 create 继承所有自行车值 并向新对象添加一些新属性 var raleigh Object creat

  • 为什么C++没有幂运算符？ [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • MYSQL 中的单个等于

    我想知道为什么 MYSQL 在条件语句中使用单个等号而不是更典型的两个等号 这有技术 历史原因吗 谢谢 你好 我想知道为什么 MYSQL 在条件语句中使用单个等号而不是更典型的两个等号 这有技术 历史原因吗 谢谢 比较更常见于SQL比作业

  • Cordova 文件传输：上传到 aws s3 后无法查看图像

    我正在使用 cordova 文件传输将图像上传到我的 s3 存储桶 我设法上传文件 没有任何错误 甚至在 s3 中作为文件可见 但是当我尝试从 s3 下载图像时 我无法查看它 图像已损坏 当做file image png我得到的结果是它是一

  • 根据子值合并数组中的对象

    我有一个填充有对象的数组 当对象具有匹配的特定子值时 如何合并此数组内的对象 我的数组如下所示 var data prod name test1 type 1 color white product id 5 prod name test2

  • Laravel date 不允许我使用 diffForHumans

    我的表设置了时间戳字段 用于在字段中创建和更新 在我的模型中 我这样做 protected dates created at updated at 但是当调用日期时 p gt created at gt diffForHumans I ge

  • TypeScript 泛型在柯里化时不适用于先前的函数，如何处理？

    我有一个咖喱版本map处理承诺 它需要两个参数 一次一个 它需要两个类型参数来让调用者提供无法推断的部分 然而 实际上 调用者总是必须提供它们 因为在它们传入的转换函数中不会推断类型 该函数如下所示 description Like ram

  • Celery工人挂起，没有任何错误

    我有一个用于运行 celery 工作人员的生产设置 用于向远程服务发出 POST GET 请求并存储结果 它每 15 分钟处理大约 20k 任务的负载 问题是工人们无缘无故地变得麻木 没有错误 没有警告 我也尝试过添加多处理 结果相同 在日

  • 通过 getRealPath() 将上传的文件写入磁盘时出现 java.io.FileNotFoundException

    Glassfish 似乎在我也想保存图像文件的路径中添加了额外的内容 是否有某种方法可以仅使用我的 servlet 获得的绝对路径 String appPath request getServletContext getRealPath 我

  • CouchDB 查询性能

    如果文档数量越多 CouchDB 中数据查询是否会变慢 示例场景 我有一个用于客户名称表单的组合框 当用户输入客户名称时 我必须进行自动填充 CouchDB 中将有大约 10k 个客户文档 我知道我必须创建一个视图才能执行相同的操作 Cou

  • DacPac 错误太大 - 但我的文件只有 406kb

    我正在尝试将我的数据库上传到 SQL Azure 我已创建 DCA 包并开始上传过程 但是 我立即收到以下错误 指定的 DacPac 太大 允许的最大 DacPac 大小为 5242880 字节 我不明白为什么上传文件为 406KB 时会出

  • iOS：删除 UINavigationBar 动画

    我们的应用程序有一个 UINavigationBar 上面有图像 当我们转到 推送 到另一个屏幕然后单击后退按钮时 导航栏上的图像在重新出现时似乎会从左到右进行动画处理 这有点让人分心 如何删除这个后退按钮动画 我们尝试更改 segue A

  • 抽屉导航在 Windows Phone 8.1 中有时无法工作[RT] [已关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我正在使用抽屉布局找到代码msdn https code msdn microsoft com windowsapps Windows

  • .NET Core 2.0 中 IServiceCollection 缺少扩展方法 AddJwtBearerAuthentication()

    我已使用以下说明将我的项目从 Core 1 1 更新到 Core 2 0https blogs msdn microsoft com webdev 2017 08 14 announcing asp net core 2 0 https b

  • 如何使用 AWS AppSync 进行无服务器开发？

    我有一个关于开发无服务器应用程序的一般性问题AWS 应用程序同步 https aws amazon com appsync 尤其 我们正在考虑为一个小项目采用无服务器 我想知道人们在创建 无服务器 应用程序时通常如何设置他们的开发环境 我已

  • 调整

    我有一个包含子菜单的菜单 它的 HTML 源代码如下所示 ul li a href Menu 1 a ul li a href Item 1 a a a li li a href Subitem 1 a ul li a href Subsu

热门标签