0
私は誰かのためのサイトを作成しています。一番上には、リンクとドロップダウンメニューを持つバーと、左側にロゴがあります。何らかの理由で、画像がドロップダウンを台無しにしています。それは完全に機能していますが、視覚的にはうんざりしています。私が何を意味するのかを見るには、ドロップダウンにカーソルを合わせ、ボタンをバーの外に広げます。画像を追加すると、ナビゲーションバーのドロップダウンが破損する
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>
私は 'テーブル-row'を認識していませんでした。私はこれと同じようなコードをどこかに見つけて、コードを基にしました。情報をありがとう、私はすぐにそれを試してみます。 'inline-block'は要素を連続して配置しますか？私はそれを知らなかったので、私はそれを試していない。 – PorygonZRocks
@PorygonZRocks申し訳ありませんが、スニペットでCSSを更新するのを忘れていました。今私はそれを更新しました – jafarbtech