缩小菜单Html/CSS/JavaScript

问题描述 投票：0回答：1

我是一个初学者（代码和英语......！），所以请原谅我困扰我的问题，对于一个优秀的开发人员来说可能很容易！

我编写了一个导航栏，当用户向下滚动时该导航栏会收缩，而当用户向上滚动时该导航栏会恢复正常。 显然，它确实有效。 因此，我开始将菜单代码复制到网站其他页面的页面开头。 问题：当我们单击另一个页面的链接时，我们会转到此页面，但新页面中的菜单项从屏幕右侧移动到正确的位置，这是不受欢迎的。

这是index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sacramento&family=Signika:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Accueil</title>
</head>
<body>

<header id="main-header" class="shrink">
  <nav>
  <a href="index.php"><img id="logo" src="assets/ART_T_Blanc.svg"></a>
    <ul>
      <li><a href="moi.php">Who I am</a></li>
      <li><a href="#">Our Products</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Ethics</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section class="Desktop">
  <div class="contentAccueil">
    <p>Content 01</p>
    <p>Content 02</p>
    <p>Content 03</p>
</div>


<footer class="FooterDesktop">
  <hr />
  <p><small><em>Created by iDamira using tutsplus.com tutorial.</em></small></p>
</footer>

<section>
    


<script src="script.js"></script>
</body>
</html>

这是 moi.php 页面，菜单代码相同：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sacramento&family=Signika:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Accueil</title>
</head>
<body>

<header id="main-header" class="shrink">
  <nav>
  <a href="index.php"><img id="logo" src="assets/ART_T_Blanc.svg"></a>
    <ul>
      <li><a href="moi.php">Qui suis-je?</a></li>
      <li><a href="#">Pratique de l'Art-Thérapie</a></li>
      <li><a href="#">Mes Actualités</a></li>
      <li><a href="#">Tarifs</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section class="Desktop">
  <div class="contentAccueil">
    <p>Moi 01</p>
    <p>Moi 02</p>
    <p>Moi 03</p>
</div>


<footer class="FooterDesktop">
  <hr />
  <p><small><em>Created by iDamira using tutsplus.com tutorial.</em></small></p>
</footer>

<section>
    


<script src="script.js"></script>
</body>
</html>

这是CSS：



* {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
  
body {
    color: #333;
}
  
hr {
    margin: 3em 0;
    background-color: #ccc;
    height: 1px;
    border: none;
}
  
p {
    margin-bottom: 3em;
}
  
a{
    text-decoration: none;
    color: #555;
    text-transform: uppercase;
    font-size: 85%;
    font-weight: bold;
}
  
  /* header */
  
header {

    
    padding: 0 2em;
    position: fixed;
    top: 0;
    background: #333;
    border-bottom: 2px solid #ccc;
    width: 100%;
    height: 6.5em;
    transition: all .8s ease-in-out;
}


header #logo {

    width: 100px; /* Taille initiale du logo */
    height: 100px;
    vertical-align: middle;
 
 
    transition: width 0.8s ease-in-out, height 0.8s ease-in-out; /* Ajoutez la transition pour la largeur et la hauteur du logo */
}
  
  nav ul {
    float: right;
    margin: 0;  
}
  
nav ul li {
    display: inline;
    margin-left: 1em;
    list-style: none;
    line-height: 6em;
    transition: all .8s ease-in-out;
}
  
/* #logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
} */



/* Reduction Menu: */

.contentAccueil p {
    height: 100vh;
}
          
header.shrink {
    height: 4.5em;
    transition: all .8s ease-in-out;
}
          
header.shrink nav ul li {
    line-height: 4em; 
    transition: all .8s ease-in-out;
}


header.shrink #logo {
    width: 70px; /* Nouvelle largeur du logo lorsque l'en-tête est réduit */
    height: 70px; /* Nouvelle hauteur du logo lorsque l'en-tête est réduit */
    transition: all .8s ease-in-out;
    
  }
        


/* Fin Menu Desktop */



  
/* ContentAccueil */
  
.contentAccueil{
    margin: 10em auto 0;
    width: 75%;
    text-align: center;
}

还有 script.js 代码：

var windowElement = window;
var mainHeader = document.getElementById("main-header");

windowElement.addEventListener("scroll", function() {
    if (windowElement.scrollY > 100) {
        mainHeader.classList.add("shrink");
    } else if (mainHeader.classList.contains("shrink")) {
        mainHeader.classList.remove("shrink");
    }
});

有人可以帮助我吗？

我不知道该尝试什么..

谢谢您！

javascript css hyperlink menu navbar
1个回答
0
投票

所以我会首先解释为什么会出现这个问题。 您想要前后进行转换，因此您放置了很多转换，其中一些发生在“初始”代码中。 css 中的过渡意味着您添加的 css 出现在动画中，如果您将过渡放在标题上或已在 html 中分配的类上，那么它将出现在屏幕的过渡运动中。

解决此问题的方法是确保首次加载页面时应出现的任何标记或类上没有过渡样式。

我尝试删除并更改您当前的 CSS、HTML 和 JavaScript，以便阻止页面加载中的这种转换。

这是当前的 HTML： 在 HTML 中，我基本上只是从标头中删除了收缩类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sacramento&family=Signika:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Accueil</title>
</head>
<body>

<header id="main-header" class="">
  <nav>
  <a href="index.html"><img id="logo" src="assets/ART_T_Blanc.svg"></a>
    <ul>
      <li><a href="moi.html">Who I am</a></li>
      <li><a href="#">Our Products</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Ethics</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<section class="Desktop">
  <div class="contentAccueil">
    <p>Content 01</p>
    <p>Content 02</p>
    <p>Content 03</p>
</div>


<footer class="FooterDesktop">
  <hr />
  <p><small><em>Created by iDamira using tutsplus.com tutorial.</em></small></p>
</footer>

<section>
    


<script src="script.js"></script>
</body>
</html>

这是当前的CSS： 我在评论中留下了不需要的过渡。

* {
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}
  
body {
    color: #333;
}
  
hr {
    margin: 3em 0;
    background-color: #ccc;
    height: 1px;
    border: none;
}
  
p {
    margin-bottom: 3em;
}
  
a{
    text-decoration: none;
    color: #555;
    text-transform: uppercase;
    font-size: 85%;
    font-weight: bold;
}
  
  /* header */
  
header {

    
    padding: 0 2em;
    position: fixed;
    top: 0;
    background: #333;
    border-bottom: 2px solid #ccc;
    width: 100%;
    height: 6.5em;
    /* transition: all .8s ease-in-out; */
}

header #logo {

    width: 100px; /* Taille initiale du logo */
    height: 100px;
    vertical-align: middle;
 
 
    /* transition: width 0.8s ease-in-out, height 0.8s ease-in-out; Ajoutez la transition pour la largeur et la hauteur du logo */
}
  
  nav ul {
    float: right;
    margin: 0;  
}
  
nav ul li {
    display: inline;
    margin-left: 1em;
    list-style: none;
    line-height: 6em;
    /* transition: all .8s ease-in-out; */
}
  
/* #logo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
} */



/* Reduction Menu: */

.contentAccueil p {
    height: 100vh;
}
          
header.shrink {
    height: 4.5em;
    transition: all .8s ease-in-out;
}
          
header.shrink nav ul li {
    line-height: 4em; 
    transition: all .8s ease-in-out;
}


header.shrink #logo {
    width: 70px; /* Nouvelle largeur du logo lorsque l'en-tête est réduit */
    height: 70px; /* Nouvelle hauteur du logo lorsque l'en-tête est réduit */
    transition: all .8s ease-in-out;
    
  }
        


/* Fin Menu Desktop */



  
/* ContentAccueil */
  
.contentAccueil{
    margin: 10em auto 0;
    width: 75%;
    text-align: center;
}

这是当前的 JavaScript： 我很确定它是一样的，但无论如何。

var windowElement = window;
var mainHeader = document.getElementById("main-header");

windowElement.addEventListener("scroll", function() {
    if (windowElement.scrollY > 100) {
        mainHeader.classList.add("shrink");
    } else if (mainHeader.classList.contains("shrink")) {
        mainHeader.classList.remove("shrink");
    }
});

希望这有帮助。

顺便说一句，可能还有很多其他更简单、更适合实践的方法。我建议您在互联网上搜索其他尝试创建相同效果的人，这可能会改善您的最终结果。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.