我试图让框架工作,其中导航栏框架位于顶部,下面的框架是整个主体,导航栏位于与主体框架不同的 html 文件中。我拥有我想要的样子。但是,我无法单击链接。我所做的一切都不起作用。应该有 2 个下拉菜单和一些常规链接。
索引文件
<!Doctype HTML>
<html>
<head>
<!--Links to the other sheets-->
<link rel="stylesheet" type="text/css" href="style2.css" />
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css'
rel='stylesheet'>
<link rel="icon" type="image/x-icon" href="./images/justpersonlogo.png" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Thats What She Said LLC</title>
</head>
<body>
<header></header>
<div class="menuframe"><!--Menu-->
<iframe src="navbar.html" style="border: none; width: 100%;" sandbox="allow-same-origin allow-popups allow-scripts" name="NavBar"></iframe>
</div>
</header>
<!--Body Content-->
<div class="menutargetframe">
<iframe src="landing.html" name="mainBodyFrame" style="position:absolute; top:0px;" width="100%" height=100% title="Main body Frame"></iframe>
</div>
<script src="script.js"></script>
</body>
</html>
导航栏链接
<!--template for html site-->
<!Doctype HTML>
<html>
<head>
<!--Links to the other sheets-->
<link rel="stylesheet" type="text/css" href="navbar.css" />
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css'
rel='stylesheet'>
<link rel="icon" type="image/x-icon" href="./images/justpersonlogo.png" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>navbar</title>
</head>
<body>
<!--Menu-->
<header id="nav-menu" aria-label="navigation bar">
<div class="container">
<div class="nav-start">
<a class="logo" href="/">
<img
src="./images/TWSS_logo2.png"
width="245"
height="245"
alt="Inc Logo" />
</a>
<nav class="menu">
<ul class="menu-bar">
<li><a class="nav-link" href="/" target="_parent">Home</a></li>
<li>
<button
class="nav-link dropdown-btn"
data-dropdown="dropdown2"
aria-haspopup="true"
aria-expanded="false"
aria-label="subsidiaries">
Subsidiaries
<i class="bx bx-chevron-down" aria-hidden="true"></i>
</button>
<div id="dropdown2" class="dropdown">
<ul role="menu">
<li>
<span class="dropdown-link-title">Businesses</span>
</li>
<li role="menuitem">
<a class="dropdown-link" href="http://www.erotictutors.com" target="_parent">Erotic Tutors</a>
</li>
<li role="menuitem">
<a class="dropdown-link" href="http://www.vocationlocation.co" target="_parent">Vocation Location</a>
</li>
<li role="menuitem">
<a class="dropdown-link" href="#" target="_parent">Welcoming Oppertunities</a>
</li>
<li role="menuitem">
<a class="dropdown-link" href="http://www.OnlyBTCCoins.com" target="_parent">Only Btc Coins</a>
</li>
</ul>
</div>
<li>
<button
class="nav-link dropdown-btn"
data-dropdown="dropdown1"
aria-haspopup="true"
aria-expanded="false"
aria-label="Games">
Games
<i class="bx bx-chevron-down" aria-hidden="true"></i>
</button>
<div id="dropdown1" class="dropdown">
<ul role="menu">
<li>
<span class="dropdown-link-title">PC</span>
</li>
<li role="menuitem">
<a class="dropdown-link" href="https://patreon.com/ThatsWhatSheSaidLLC?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=creatorshare_creator&utm_content=join_link" target="_parent">The Career Coder</a>
</li>
</ul>
</div>
</li>
</li>
<li><a class="nav-link" href="/" target="_parent">Careers</a></li>
<li><a class="nav-link" href="/" target="_parent">News</a></li>
<li><a class="nav-link" href="/" target="_parent">Jokes</a></li>
<li><a class="nav-link" href="/" target="_parent">Contact Us</a></li>
</ul>
</nav>
</div>
<div class="nav-end">
<div class="right-container">
<a class="social" href="/"><img src='./images/social media/linkedin-blu_wh.png' alt="Linked In" /></a>
<a class="social" href="/"><img src='./images/social media/facebook-blu_wh.png' alt="Facebook" /></a>
<a class="social" href="/"><img src='./images/social media/WhatsApp_Logo_1-150x150.png' alt="" /></a>
<a class="social" href="/"><img src='./images/social media/yt_icon_red-310x219.png' alt="" /></a>
<a class="social" href="/"><img src='./images/social media/Twitter_Logo_Blue-150x150.png' alt="" /></a>
<a class="social" href="/"><img src='./images/social media/snap-ghost-yellow.png' alt="" /></a>
<a href="#profile">
<img
src="/assets/images/user.jpg"
width="30"
height="30"
alt="user image" />
</a>
</div>
</div>
</div>
</header>
<script src="script.js"></script>
<!--Body Content-->
</body>
</html>
导航栏的 CSS
/* index.html */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
:root {
--dark-grey: #333333;
--medium-grey: #636363;
--light-grey: #eeeeee;
--ash: #f4f4f4;
--primary-color: #2b72fb;
--white: white;
--border: 1px solid var(--light-grey);
--shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
body {
font-family: inherit;
background-color: var(--white);
color: var(--dark-grey);
letter-spacing: -0.4px;
/* background-image: url("./images/mainbg.jpg");*/
background-size: cover;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
button {
border: none;
background-color: transparent;
cursor: pointer;
color: inherit;
}
.btn {
display: block;
background-color: var(--primary-color);
color: var(--white);
text-align: center;
padding: 0.6rem 1.4rem;
font-size: 1rem;
font-weight: 500;
border-radius: 5px;
}
.icon {
padding: 0.5rem;
background-color: var(--light-grey);
border-radius: 10px;
}
.logo {
margin-right: 1.5rem;
}
#nav-menu {
border-bottom: var(--border);
}
.container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1600px;
margin: 0 auto;
column-gap: 2rem;
height: 90px;
padding: 1.2rem 3rem;
}
.menu {
position: relative;
background: var(--white);
}
.menu-bar li:first-child .dropdown {
flex-direction: initial;
min-width: 480px;
}
.menu-bar li:first-child ul:nth-child(1) {
border-right: var(--border);
}
.menu-bar li:nth-child(n + 2) ul:nth-child(1) {
border-bottom: var(--border);
}
.menu-bar .dropdown-link-title {
font-weight: 600;
}
.menu-bar .nav-link {
font-size: 1rem;
font-weight: 500;
letter-spacing: -0.6px;
padding: 0.3rem;
min-width: 60px;
margin: 0 0.6rem;
}
.menu-bar .nav-link:hover,
.dropdown-link:hover {
color: var(--primary-color);
}
.nav-start,
.nav-end,
.menu-bar,
.right-container,
.right-container .search {
display: flex;
align-items: center;
}
.dropdown {
display: flex;
flex-direction: column;
min-width: 230px;
background-color: var(--white);
border-radius: 10px;
position: absolute;
top: 36px;
z-index: 10;
visibility: hidden;
opacity: 0;
transform: scale(0.97) translateX(-5px);
transition: 0.1s ease-in-out;
box-shadow: var(--shadow);
}
.dropdown.active {
visibility: visible;
opacity: 1;
transform: scale(1) translateX(5px);
}
.dropdown ul {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.2rem;
font-size: 0.95rem;
}
.dropdown-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.15rem;
}
.dropdown-link {
display: flex;
gap: 0.5rem;
padding: 0.5rem 0;
border-radius: 7px;
transition: 0.1s ease-in-out;
}
.dropdown-link p {
font-size: 0.8rem;
color: var(--medium-grey);
}
.right-container {
display: flex;
align-items: center;
column-gap: 1rem;
}
.right-container .social {
position: relative;
}
.right-container img {
border-radius: 50%;
width:25px;
}
#hamburger {
display: none;
padding: 0.1rem;
margin-left: 1rem;
font-size: 1.9rem;
}
@media (max-width: 1100px) {
#hamburger {
display: block;
}
.container {
padding: 1.2rem;
}
.menu {
display: none;
position: absolute;
top: 87px;
left: 0;
min-height: 100vh;
width: 100vw;
}
.menu-bar li:first-child ul:nth-child(1) {
border-right: none;
border-bottom: var(--border);
}
.dropdown {
display: none;
min-width: 100%;
border: none !important;
border-radius: 5px;
position: static;
top: 0;
left: 0;
visibility: visible;
opacity: 1;
transform: none;
box-shadow: none;
}
.menu.show,
.dropdown.active {
display: block;
}
.dropdown ul {
padding-left: 0.3rem;
}
.menu-bar {
display: flex;
flex-direction: column;
align-items: stretch;
row-gap: 1rem;
padding: 1rem;
}
.menu-bar .nav-link {
display: flex;
justify-content: space-between;
width: 100%;
font-weight: 600;
font-size: 1.2rem;
margin: 0;
}
.menu-bar li:first-child .dropdown {
min-width: 100%;
}
.menu-bar > li:not(:last-child) {
padding-bottom: 0.5rem;
border-bottom: var(--border);
}
}
@media (max-width: 600px) {
.right-container {
display: none;
}
}
导航栏的 JavaScript
// dropdown menus
const dropdownBtn = document.querySelectorAll(".dropdown-btn");
const dropdown = document.querySelectorAll(".dropdown");
const hamburgerBtn = document.getElementById("hamburger");
const navMenu = document.querySelector(".menu");
const links = document.querySelectorAll(".dropdown a");
function setAriaExpandedFalse() {
dropdownBtn.forEach((btn) => btn.setAttribute("aria-expanded", "false"));
}
function closeDropdownMenu() {
dropdown.forEach((drop) => {
drop.classList.remove("active");
drop.addEventListener("click", (e) => e.stopPropagation());
});
}
function toggleHamburger() {
navMenu.classList.toggle("show");
}
dropdownBtn.forEach((btn) => {
btn.addEventListener("click", function (e) {
const dropdownIndex = e.currentTarget.dataset.dropdown;
const dropdownElement = document.getElementById(dropdownIndex);
dropdownElement.classList.toggle("active");
dropdown.forEach((drop) => {
if (drop.id !== btn.dataset["dropdown"]) {
drop.classList.remove("active");
}
});
e.stopPropagation();
btn.setAttribute(
"aria-expanded",
btn.getAttribute("aria-expanded") === "false" ? "true" : "false"
);
});
});
// close dropdown menu when the dropdown links are clicked
links.forEach((link) =>
link.addEventListener("click", () => {
closeDropdownMenu();
setAriaExpandedFalse();
toggleHamburger();
})
);
// close dropdown menu when you click on the document body
document.documentElement.addEventListener("click", () => {
closeDropdownMenu();
setAriaExpandedFalse();
});
// close dropdown when the escape key is pressed
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
closeDropdownMenu();
setAriaExpandedFalse();
}
});
hamburgerBtn.addEventListener("click", toggleHamburger);
此时我很失落。我无法让任何事情正常工作。哦,没有汉堡,我把它拿出来了。
我尝试了我能找到或想到的所有选项,顺便说一句,这并不算多。
我采取的每一步都会增加更多我无法解决的问题,
我想做的就是在一个文件中设置一个导航栏,并将其放入另一个文件中,其中所有链接都指向该 bodyframe。
除非我嵌入来自外部网站的内容,否则我不会使用 iframe。相反,我会使用 div 或节标签来创建特定区域。 示例:
<section id="navBar">"ENTER ELEMENTS HERE"</section>
所以在你的情况下,我建议使用以下代码的形式:
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
#navBar {
background: rgb(0, 0, 0, 0.50);
height: 10vh;
width: 100vw;
position: absolute;
text-align: right;
}
.homeButton {
background: transparent;
border: none;
color: white;
cursor: pointer;
padding: 10px;
font-size: 25px;
}
.aboutUsButton {
background: transparent;
border: none;
color: white;
cursor: pointer;
padding: 10px;
font-size: 25px;
}
#header {
background: white;
width: 100vw;
height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Website</title>
<!-- your links -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="navBar">
<h1 style="text-align: left;">My Website</h1>
<a href="index.html"><button class="homeButton">Home</button></a>
<a href="about-us.html"><button class="aboutUsButton">About Us</button></a>
</section>
<section id="header">
<center>
<h1 style="font-size: 100px; color: red;">My Website</h1>
</center>
</section>
</body>
</html>
我将网站标题设置得比应有的要高一些,以显示导航栏位于顶部。