html - 添加图像会破坏我的导航栏下拉菜单-6ren

html - 添加图像会破坏我的导航栏下拉菜单

转载作者：太空宇宙更新时间：2023-11-04 01:46:03

26

4

我正在为某人创建网站。在顶部，我有一个带有链接和下拉菜单的栏，左侧有一个 Logo 。出于某种原因，图像不断弄乱下拉菜单。它功能齐全，但在视觉上是困惑的。要明白我的意思，请将鼠标悬停在下拉菜单上，按钮会扩展到栏外。

我试过将图像包装在一个 div 中，为图像设置边距和填充，并使用不同的图像，但都没有用。如果我将图像指向一个无效的 URL，它会起作用，但显然我想要一个真实的图像。

代码:

function hide(element) {
  element.className += " hidden";
}

function unhide(element) {
  element.className = element.className.replace(/\bhidden\b/, "");
}

function toggle(button) {
  var list = document.getElementById(button.getAttribute("data-list"));
  (list.className.search(/\bhidden\b/) > -1) ? unhide(list): hide(list);
  window.onclick = function(e) {
    if (!e.target.matches(".drop-button") && !e.target.matches(".drop-choices")) {
      hide(list);
    }
  };
}

#back-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50px;
  background-color: green;
}

#bar-top {
  position: absolute;
  display: table;
  height: 50px;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  background-color: green;
}

.nav-link {
  text-decoration: none;
}

.nav-option {
  display: table-cell;
  font-size: 16px;
  top: 0;
  color: white;
  width: 200px;
  cursor: pointer;
}

#nav-logo {
  width: 40px;
  height: 40px;
  top: 2px;
  padding: 0;
}

.drop-button {
  margin: 0;
  font-size: 16px;
  color: white;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
  text-align: left;
  background-color: inherit;
}

.nav-option:hover,
.nav-option:active,
.nav-option:focus,
.drop-button:hover,
.drop-button:active,
.drop-button:focus {
  background-color: blue;
  outline: none;
}

.drop-choices {
  font-size: 16px;
  overflow: auto;
  max-height: calc(100vh - 50px);
  display: block;
  position: absolute;
  background-color: lightgray;
  min-width: 140px;
  z-index: 5;
}

.drop-choices p {
  color: black;
  padding-top: 6px;
  padding-bottom: 6px;
  cursor: pointer;
  margin: 0;
  width: 188px;
  text-align: left;
}

.drop-choices p:hover,
.drop-choices p:focus {
  background-color: blue;
  outline: none;
}

p.drop-title {
  cursor: initial;
}

p.drop-title:hover {
  background-color: #f9f9f9;
}

.hidden {
  display: none;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Home - Jessica Keirns</title>
  <link type="text/css" rel="stylesheet" href="topbar.css" />
</head>

<body>
  <div id="back-top">
    <div id="bar-top">
      <a href="/main.xhtml" class="nav-link">
        <img src="https://www.thsp.co.uk/wp-content/uploads/2016/11/Icon-Placeholder.png" alt="Home" width="40px" height="40px" />
      </a>
      <div class="nav-option drop-down" data-list="test" onclick="toggle(this)">
        <button class="drop-button">Dropdown</button>
        <div id="test" class="drop-choices hidden">
          <p tabindex="0" id="choice1">choice1</p>
          <p tabindex="0" id="choice2">choice2</p>
        </div>
      </div>
      <a href="/about.xhtml" class="nav-option nav-link">About Me</a>
    </div>
  </div>
  <script type="application/javascript" src="drop.js"></script>
</body>

</html>

最佳答案

添加vertical-align: middle;使居中对齐。

但是，我不建议您使用您曾经使用过的 css 样式编写代码。你应该study关于 table、table-row、inline-block 和 table-cell，然后再开始。因为表格应该采用适当的格式，例如 table-cell 应该只在 table-row 内，而 table-row 应该只在 table 内。如果您感到困惑，只需使用 inline-block 即可，这很容易理解

function hide(element) {
  element.className += " hidden";
}

function unhide(element) {
  element.className = element.className.replace(/\bhidden\b/, "");
}

function toggle(button) {
  var list = document.getElementById(button.getAttribute("data-list"));
  (list.className.search(/\bhidden\b/) > -1) ? unhide(list): hide(list);
  window.onclick = function(e) {
    if (!e.target.matches(".drop-button") && !e.target.matches(".drop-choices")) {
      hide(list);
    }
  };
}

#back-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50px;
  background-color: green;
}

#bar-top {
  position: absolute;
  display: table;
  height: 50px;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  background-color: green;
}

.nav-link {
  text-decoration: none;
}

.nav-option {
  display: table-cell;
  font-size: 16px;
  top: 0;
  color: white;
  width: 200px;
  cursor: pointer;
  vertical-align: middle;
}

#nav-logo {
  width: 40px;
  height: 40px;
  top: 2px;
  padding: 0;
}

.drop-button {
  margin: 0;
  font-size: 16px;
  color: white;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
  text-align: left;
  background-color: inherit;
}

.nav-option:hover,
.nav-option:active,
.nav-option:focus,
.drop-button:hover,
.drop-button:active,
.drop-button:focus {
  background-color: blue;
  outline: none;
}

.drop-choices {
  font-size: 16px;
  overflow: auto;
  max-height: calc(100vh - 50px);
  display: block;
  position: absolute;
  background-color: lightgray;
  min-width: 140px;
  z-index: 5;
}

.drop-choices p {
  color: black;
  padding-top: 6px;
  padding-bottom: 6px;
  cursor: pointer;
  margin: 0;
  width: 188px;
  text-align: left;
}

.drop-choices p:hover,
.drop-choices p:focus {
  background-color: blue;
  outline: none;
}

p.drop-title {
  cursor: initial;
}

p.drop-title:hover {
  background-color: #f9f9f9;
}

.hidden {
  display: none;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Home - Jessica Keirns</title>
  <link type="text/css" rel="stylesheet" href="topbar.css" />
</head>

<body>
  <div id="back-top">
    <div id="bar-top">
      <a href="/main.xhtml" class="nav-link">
        <img src="https://www.thsp.co.uk/wp-content/uploads/2016/11/Icon-Placeholder.png" alt="Home" width="40px" height="40px" />
      </a>
      <div class="nav-option drop-down" data-list="test" onclick="toggle(this)">
        <button class="drop-button">Dropdown</button>
        <div id="test" class="drop-choices hidden">
          <p tabindex="0" id="choice1">choice1</p>
          <p tabindex="0" id="choice2">choice2</p>
        </div>
      </div>
      <a href="/about.xhtml" class="nav-option nav-link">About Me</a>
    </div>
  </div>
  <script type="application/javascript" src="drop.js"></script>
</body>

</html>

关于html - 添加图像会破坏我的导航栏下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44511592/

26

4

0

文章推荐： javascript - 在背景 url 更改时触发动画

文章推荐： node.js - 使用 Homebrew 安装 Node 版本后如何更改它？

文章推荐： python - 使用 Matplotlib Python 绘图时跳过丢失的时间戳

文章推荐： c - 强行打印垃圾字符

jquery - 桌面上的非 Canvas 菜单，手机上的 Accordion 菜单 [Foundation 6.3]
使用 Foundation 6.3.1，我希望在桌面上显示 Canvas 外菜单，在移动设备上显示 Accordion 菜单。例如 This is the desktop view with a co
Javascript 菜单
function HideandUNhideObj(ThisObj) { var nav = document.getElementById(ThisObj).style if (nav.displ
JavaScript 菜单
我正在处理一个页面，该页面有一个显示“更新”的链接。当用户单击此链接时，我希望表单使用幻灯片效果并显示在链接下方。提交表单后，它会更新数据库，并且菜单会显示。我知道这可以用 JavaScript 来
带图标的 Gtk 菜单
这是我的运行时创建菜单的关键部分: GtkWidget *menu, *menu_item; menu = gtk_menu_new(); menu_item = gtk_image_menu_ite
Css3 donut 菜单
您好，我想实现一个像这样的 donut 菜单 http://dribbble.com/shots/610433-Wheel-Nav我知道有一种在 css3 中制作 donut 的简单方法。 .doug
SwiftUI 菜单 - 菜单实际打开时的操作
我的应用程序中有一个菜单，当菜单打开时我会触发触觉反馈(来自 onTagGesture Action )。然而有时当我点击菜单打开触发器时，菜单实际上不会打开，但我仍然收到触觉反馈。我只在菜单实际
悬停时带有边框半径的 CSS 菜单
也许这是一个简单的解决方案，但我坚持了下来。这里有我的代码 http://jsbin.com/ejomuv纯CSS菜单我想要做的是在悬停时在下拉按钮底部设置 0px 边框半径，但仅在下拉菜单上设置
controls - 寻找替代品或改进网站上的下拉列表/菜单
下拉列表、菜单和组合框都是非常常见的用户界面元素。用户习惯于在 native 应用程序和 Web 应用程序中看到这些元素，但它们存在一些问题。您必须瞄准鼠标。当您将鼠标移开时，有些菜单会折叠，而有些
基于角色的 Laravel 菜单？
我有 codeigniter 背景。现在，我正在学习 Laravel。所以，我处于这种情况(示例)，我正在尝试创建一个具有多个用户的 web 应用程序。用户类型 A ，他们可以访问菜单 a、菜单 b
显示一个框的 JQuery 菜单
我正在学习 JQuery 的基础知识，我的老师显示的 menu() 看起来根本不像我的。这是我创建的菜单的 LAF: 代码: Hello Hi Welcome World
jquery如何隐藏

首页

博学

6Ren·AI

商城

html - 添加图像会破坏我的导航栏下拉菜单