html - 无论视口大小如何变化,都试图使下拉菜单与标题边缘保持一致
问题描述
我有一个有点移动响应的标题,但是有一些下拉菜单我想保持与标题元素的边缘齐平,而不管标题调整时视口大小的变化。
我尝试将这些下拉列表放在它们自己的元素中,例如 div 或部分,并从各个选择器中添加所有相同的 css,但我没有在那里取得进展。
// The Dropdown for New-units
const newUnitDropdown = document.querySelector(".new_units");
newUnitDropdown.innerHTML = `
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<i class="fas fa-circle"></i>
<span>New Units</span>
<span class="icon is-small">
<!--fontawesome required for the icon-->
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
</div>
`;
// The Dropdown for Overlay
const overlayDropdown = document.querySelector(".overlay");
overlayDropdown.innerHTML = `
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Select Overlay</span>
<span class="icon is-small">
<!--fontawesome required for the icon-->
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
</div>
`;
// The Dropdown for Cities
const cityDropdown = document.querySelector(".cities");
cityDropdown.innerHTML = `
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Choose a city</span>
<span class="icon is-small">
<!--fontawesome required for the icon-->
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href='#' data-value="oak" class='oak dropdown-item'>
Oakland, CA
</a>
<a href='#' data-value="san" class='san dropdown-item'>
San Francisco, CA
</a>
</div>
</div>
</div>
`;
const dropdown = document.querySelector(".dropdown");
document.querySelector(".dropdown-trigger").addEventListener("click", (e) => {
dropdown.classList.toggle("is-active");
});
document.addEventListener(
"click",
(event) => {
// event.preventDefault();
if (event !== null && event.target instanceof HTMLElement) {
const element = event.target;
if (element.matches(".dropdown-item.oak")) {
console.log("Oakland was clicked");
customMap.addOakland();
data.forEach((label) => customMap.addCircleMarker(label));
console.log("inside the if conditional", data);
dropdown.classList.toggle("active");
}
if (element.matches(".dropdown-item.san")) {
console.log("San Francisco was clicked");
customMap.addSanFran();
data.forEach((label) => customMap.addCircleMarker(label));
dropdown.classList.toggle("active");
}
}
},
false
);
// Checkbox Menu
const checkboxMenu = document.querySelector(".checkbox");
checkboxMenu.innerHTML = `
<nav class="panel">
<div class="panel-block">
<p class="control has-icons-left">
<input class="input" type="text" id="myInput" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<ul id="myUL">
<li><a class="panel-block is-active">
<input type="checkbox" id="density" name="density" value="density">
Density
<span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
</a></li>
<li><a class="panel-block">
<input type="checkbox" id="holc" name="" value="holc">
HOLC
<span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
</a></li>
<li><a class="panel-block">
<input type="checkbox" id="tcac" name="" value="tcac">
TCAC
<span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
</a></li>
<li><a class="panel-block">
<input type="checkbox" id="population" name="" value="population">
Population
<span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
</a></li>
<li><a class="panel-block">
<input type="checkbox" id="zoning" name="" value="zoning">
Zoning
<span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
</a></li>
</ul>
</nav>
`;
const fetchLabel = () => {
let input, filter, ul, li, a, i, textValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
textValue = a.textContent || a.innerText;
if (textValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
};
const input = document.querySelector("input");
input.addEventListener("input", (event) => {
fetchLabel();
});
.checkbox {
position: absolute;
z-index: 2;
top: 200px;
left: 200px;
}
.cales {
width: 250px;
}
.cities {
position: absolute;
z-index: 2;
top: 95px;
left: 350px;
border: 1px solid black;
}
.container {
display: flex;
}
.fas.fa-circle {
color: #fe0302;
padding: 2px;
}
.hero {
background-color: #e5e7e9;
}
.hero-body {
padding: 12px;
}
/* style the map box */
#map {
width: 100%;
height: 500px;
overflow: auto !important;
position: relative;
/* z-index: -2; */
}
.navbar-item {
font-weight: bold;
}
.new_units {
position: absolute;
z-index: 2;
top: 95px;
/* left: 100px; */
display: flex;
border: 1px solid black;
}
.overlay {
position: absolute;
z-index: 2;
top: 95px;
left: 180px;
border: 1px solid black;
}
.panel {
background-color: white;
border: 1px solid black;
}
.title {
font-size: 4rem;
}
.title:not(:last-child) {
margin-bottom: 0;
margin-right: 1.5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.min.css"
/>
<link rel="stylesheet" href="src/custom.css">
<title>CALES Maps POC</title>
</head>
<body>
<section class="hero">
<div class="hero-body">
<div class="container">
<h1 class="title">
CALES
</h1>
<span class="cales">Comprehensive Assessment of Land Use Entitlements</span>
<div class="navbar-brand">
<span class="navbar-burger" data-target="navbarMenuHeroA">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenuHeroA" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item">
Map & Data
</a>
<a class="navbar-item">
Rankings
</a>
<a class="navbar-item">
Topics
</a>
<a class="navbar-item">
Cities
</a>
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Updates
</a>
</div>
</div>
</div>
</nav>
</div>
</section>
<div id="map" style="height: 100vh;"></div>
<div class="new_units"></div>
<div class="overlay"></div>
<div class="checkbox"></div>
<div class="cities"></div>
<script type="text/javascript" src="./src/index.ts"></script>
</body>
</html>
S Fiddle 并没有做到这一点。我会将其复制到代码编辑器并使用浏览器。我有一个朋友在 JS Fiddle 中对其进行了调整,在其中使用display: inline-block
修复它...在 JS Fiddle 中,而不是在浏览器中。
这是它在 iPad Pro 中的样子:
因此,无论 iPad Pro 视图如何,我都试图让该下拉菜单与灰色导航栏保持一致。我现在主要只担心 iPad Pro 的视图。
希望该徽标在调整大小时不会像那样破裂。这一切都来自布尔玛 CSS。
解决方案
只是一点点 CSS 调整和整合。我删除了为这四个浮动元素中的每一个设置的单独样式,并将它们添加到一个.fixed_under_header
类元素中。
这个 CSS 应该可以解决问题:
.hero-body {
position: relative;
}
.fixed_under_header {
display: flex;
justify-content: flex-start;
position: absolute;
top: 100%;
z-index: 2;
}
.fixed_under_header > div {
border: 1px solid black;
height: fit-content;
}
.fixed_under_header > div + div {
margin-left: 10px;
}
这是完整的工作解决方案:
// The Dropdown for New-units
const newUnitDropdown = document.querySelector(".new_units");
newUnitDropdown.innerHTML = `
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<i class="fas fa-circle"></i>
<span>New Units</span>
<span class="icon is-small">
<!--fontawesome required for the icon-->
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
</div>
`;
// The Dropdown for Overlay
const overlayDropdown = document.querySelector(".overlay");
overlayDropdown.innerHTML = `
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Select Overlay</span>
<span class="icon is-small">
<!--fontawesome required for the icon-->
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
</div>
`;
// The Dropdown for Cities
const cityDropdown = document.querySelector(".cities");
cityDropdown.innerHTML = `
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Choose a city</span>
<span class="icon is-small">
<!--fontawesome required for the icon-->
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href='#' data-value="oak" class='oak dropdown-item'>
Oakland, CA
</a>
<a href='#' data-value="san" class='san dropdown-item'>
San Francisco, CA
</a>
</div>
</div>
</div>
`;
const dropdown = document.querySelector(".dropdown");
document.querySelector(".dropdown-trigger").addEventListener("click", (e) => {
dropdown.classList.toggle("is-active");
});
document.addEventListener(
"click",
(event) => {
// event.preventDefault();
if (event !== null && event.target instanceof HTMLElement) {
const element = event.target;
if (element.matches(".dropdown-item.oak")) {
console.log("Oakland was clicked");
customMap.addOakland();
data.forEach((label) => customMap.addCircleMarker(label));
console.log("inside the if conditional", data);
dropdown.classList.toggle("active");
}
if (element.matches(".dropdown-item.san")) {
console.log("San Francisco was clicked");
customMap.addSanFran();
data.forEach((label) => customMap.addCircleMarker(label));
dropdown.classList.toggle("active");
}
}
},
false
);
// Checkbox Menu
const checkboxMenu = document.querySelector(".checkbox");
checkboxMenu.innerHTML = `
<nav class="panel">
<div class="panel-block">
<p class="control has-icons-left">
<input class="input" type="text" id="myInput" placeholder="Search">
<span class="icon is-left">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
</p>
</div>
<ul id="myUL">
<li><a class="panel-block is-active">
<input type="checkbox" id="density" name="density" value="density">
Density
<span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
</a></li>
<li><a class="panel-block">
<input type="checkbox" id="holc" name="" value="holc">
HOLC
<span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
</a></li>
<li><a class="panel-block">
<input type="checkbox" id="tcac" name="" value="tcac">
TCAC
<span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
</a></li>
<li><a class="panel-block">
<input type="checkbox" id="population" name="" value="population">
Population
<span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
</a></li>
<li><a class="panel-block">
<input type="checkbox" id="zoning" name="" value="zoning">
Zoning
<span class="icon"><i class="fa fa-question-circle" style="color:#b19cd9"></i></span>
</a></li>
</ul>
</nav>
`;
const fetchLabel = () => {
let input, filter, ul, li, a, i, textValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
textValue = a.textContent || a.innerText;
if (textValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
};
const input = document.querySelector("input");
input.addEventListener("input", (event) => {
fetchLabel();
});
.hero-body {
position: relative;
}
.fixed_under_header {
display: flex;
justify-content: flex-start;
position: absolute;
top: 100%;
z-index: 2;
}
.fixed_under_header > div {
border: 1px solid black;
height: fit-content;
}
.fixed_under_header > div + div {
margin-left: 10px;
}
.cales {
width: 250px;
}
.container {
display: flex;
}
.fas.fa-circle {
color: #fe0302;
padding: 2px;
}
.hero {
background-color: #e5e7e9;
}
.hero-body {
padding: 12px;
}
/* style the map box */
#map {
width: 100%;
height: 500px;
overflow: auto !important;
position: relative;
/* z-index: -2; */
}
.navbar-item {
font-weight: bold;
}
.panel {
background-color: white;
border: 1px solid black;
}
.title {
font-size: 4rem;
}
.title:not(:last-child) {
margin-bottom: 0;
margin-right: 1.5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.min.css"
/>
<link rel="stylesheet" href="src/custom.css">
<title>CALES Maps POC</title>
</head>
<body>
<section class="hero">
<header class="hero-body">
<div class="container">
<h1 class="title">
CALES
</h1>
<span class="cales">Comprehensive Assessment of Land Use Entitlements</span>
<div class="navbar-brand">
<span class="navbar-burger" data-target="navbarMenuHeroA">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenuHeroA" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item">
Map & Data
</a>
<a class="navbar-item">
Rankings
</a>
<a class="navbar-item">
Topics
</a>
<a class="navbar-item">
Cities
</a>
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Updates
</a>
</div>
</div>
</div>
</nav>
<div class="fixed_under_header">
<div class="new_units"></div>
<div class="overlay"></div>
<div class="checkbox"></div>
<div class="cities"></div>
</div>
</header>
</section>
<div id="map" style="height: 100vh;"></div>
<script type="text/javascript" src="./src/index.ts"></script>
</body>
</html>
推荐阅读
- mongoose - 无法在 NestJs 中使用 MongooseModule.forFeature() 运行应用程序
- search - 所选单词周围的白色方块
- airflow - Airflow DAG 由调度程序触发两次。每周 DAG
- neo4j - 如何对 Graph 数据运行 100 条规则?
- php - 为什么 concat 函数在执行 mysql 查询的 php 代码中不起作用?
- python - python访问循环内的下一行
- javascript - 如何在选择中创建禁用选项作为占位符
- javascript - 如何使用 Set 和 react 的 useState?
- reactjs - 与模拟作斗争
- node.js - 在 EJS 模板中的 response.render 上显示警报,如果语句在 EJS 中不起作用