TechQA.

Trouble with iframe and navbar inside the frame

46 views Asked by At

I am trying to get frames to work where the navbar frame is on top and the frame below is the whole body, the navbar is in a different html file than the body frame. I have it the way I want it to LOOK. however, I cant click the links. Nothing I do is working. There are supposed to be 2 dropdowns, and some regular links.

Index file

<!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>

navbar links

<!--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 for the navbar

/* 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 for navbar

// 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);

i am so lost at this point. I cant get anything to work right. oh and there is no hamburger, i took that out.

I tried every option i can find or think of, which isnt much btw.

Every step i take adds more problems that i cant fix,

all I want to do is have a navbar in one file framed into another, where all the links target that bodyframe.

javascript html css frames
Original Q&A
1

There are 1 answers

0
Nickgaming On

I wouldn't use iframe unless I am embedding something from an external website. Instead, I would use div or section tags to create specific areas. Example:<section id="navBar">"ENTER ELEMENTS HERE"</section> so in your case, I would suggest using a form of the following code:

* {
  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>

I made the website title a bit higher than it should be to show that the navBar is on top. Open the full view of the snippet for better results. Also, just copy the code for the navbar if you want it on all the pages.

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in FRAMES

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions