Question

我提出了三条双轨制,但有两个问题。

it s not right aligned
when I click, navigation doesn t slide into view. Basically nothing happens...

function showImage(imageSrc) {
  const modal = document.getElementById( modal );
  const modalImg = document.getElementById( modal-img );

  modalImg.src = imageSrc;
  modal.style.display =  flex ;
}

function hideImage() {
  const modal = document.getElementById( modal );
  modal.style.display =  none ;
}

function goToIndex() {
  window.location.href =  index.html ;
}


// JavaScript to prevent right-click
document.addEventListener( contextmenu , function(e) {
  e.preventDefault();
});


function toggleMenu() {
  const nav = document.getElementById( main-nav );
  nav.classList.toggle( show );
}


document.addEventListener( DOMContentLoaded , function() {
  const menuToggle = document.querySelector( .menu-toggle );

  menuToggle.addEventListener( click , function() {
    toggleMenu();
  });
});

main {
  display: flex;
  flex-wrap: wrap;
}

body {
  text-align: center;
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #000;
  /* Set background color to black */
  color: #fff;
  /* Set text color to white */
  height: calc(100vh - 60px);
  /* Subtract the height of the header (60px) */
}

.center {
  margin: 0 auto;
  width: 80%;
  text-align: center;
  /* You can adjust the width as needed */
}

.column {
  flex: 1;
  /* Allow columns to grow and shrink equally */
  box-sizing: border-box;
  padding: 10px;
}

.columns-container {
  display: flex;
  justify-content: space-around;
  text-align: center;
  flex-wrap: wrap;
}

.content-container {
  margin: 0 auto;
  max-width: 300px;
  /* Adjust the max-width as needed */
}

h1.center {
  margin: 0 auto;
  width: fit-content;
}

.column p,
.column img {
  margin-bottom: 10px;
  font-size: 20px;
  max-width: 100%;
  /* Ensure images don t exceed their container width */
}

.center-box {
  width: 95%;
  margin: 1% auto;
  padding: 10px;
  background-color: #000;
  /* Adjust background color as needed */
  text-align: left;
  /* Additional styles for the box */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* Optional: Add a box shadow */
  border-radius: 8px;
  /* Optional: Add border radius for rounded corners */
  flex-basis: 80%;
  /* Adjust the width of each column as needed */
  overflow: hidden;
  /* or overflow: auto; */
  word-wrap: break-word;
  /* This property will wrap long words onto the next line */
  display: flex;
  flex-direction: column;
  /* Change to column layout */
  align-items: center;
  /* Center items horizontally */
  justify-content: center;
  /* Center items vertically */
}

.center-box .column {
  text-align: center;
}

.center-box img {
  display: block;
  margin: 0 auto 10px;
}

.thumbnail {
  width: 150px;
  height: 150px;
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}

#modal-img {
  width: 80%;
  max-width: 800px;
  height: auto;
}

header {
  background-color: #333;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  /* Align items horizontally with space in between */
}

.branding {
  /* Adjust the styles based on your design preferences */
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  margin-left: 10px;
  /* Adjust margin as needed */
  text-decoration: none;
  /* Remove underlines from links */
}

.branding h1 {
  margin: 0;
  /* Remove default margin for the h1 element */
}

p {
  font-size: 27px;
  /* Adjust the value as needed */
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.line {
  height: 3px;
  width: 30px;
  background-color: #fff;
  margin: 6px 0;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.social-links a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
  font-size: 25px;
}


/* Style for paragraphs with extra space at the bottom */

.extra-space-bottom {
  margin-bottom: 20px;
  /* Adjust the value as needed */
}


/* Style for paragraphs with extra space at the top */

.extra-space-top {
  margin-top: 50px;
  /* Adjust the value as needed */
}

.prevent-select {
  user-select: none;
}


/* Initially hide the navigation menu off-screen */

nav {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}


/* Show the navigation menu when the  show  class is present */

nav.show {
  transform: translateX(0);
}


/* Initially hide the navigation menu */

nav ul {
  display: none;
}


/* Show the navigation menu when the  show  class is present */

nav.show ul {
  display: flex;
}

nav li {
  margin: 10px 0;
}

nav li.active a {
  text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en" class="prevent-select">

<head>
  <title>Simple</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="assets/main.css" />
  <script src="assets/scripts.js"></script>
</head>

<body>
  <header>
    <!-- Branding on the left -->
    <div class="branding" onclick="goToIndex()" style="cursor: pointer;">
      <h1>Simple</h1>
    </div>
    <div class="menu-toggle" onclick="toggleMenu()">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>

    <nav id="main-nav">
      <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main class="center-box">
    <!-- Your main content goes here -->
    <div>
    </div>
  </main>
</body>

</html>

我是新卜赛人,还审判了聊天会,但没有幸运:

预测点击3条线滑坡,垂直显示导航器。

Answer 1

There are many ways to do this but I find this is the easiest and most mobile friendly. Put your nav in a wrapper and give it display flex with space between. This will automatically put your items as far away from each other as possible. Like so:

HTML:

        <div class="nav-wrapper">
            <div class="branding" onclick="goToIndex()" style="cursor: pointer;">
                <h1>Simple</h1>
            </div>
            <div class="menu-toggle" onclick="toggleMenu()">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
            
            <nav id="main-nav" class="show">
                <ul>
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </div>

增加特别安全局:

.nav-wrapper{
    width:100%;
    display: flex;
    justify-content: space-between;
}

There are several different reasons why this is not working. First, you are calling your toggle menu twice, so it is hiding and unhiding simultaneously. You don t need an event listener if you are directly calling the event by click. So I recommend you remove the even listener code.

Remove JS:

document.addEventListener( DOMContentLoaded , function() {
  const menuToggle = document.querySelector( .menu-toggle );

  menuToggle.addEventListener( click , function() {
    toggleMenu();
  });
});

最后,请注意贵国的编码<>nav.show。很正确,但为了掩盖或显示整个主线,你想要去掉那片。

变革中心:

.show {
  transform: translateX(0);
  display: none;
}

你非常接近你们的解决办法。保持良好的工作。

Answer 2

I think you are looking for something like this: https://www.w3schools.com/howto/howto_js_sidenav.asp OR https://www.w3schools.com/howto/howto_js_off-canvas.asp

You can replace the button with the hamburger in this link : https://www.w3schools.com/howto/howto_css_menu_icon.asp

根据您的宗旨进行研究并共同研究。

友情链接