我將所有變更上傳到我的網站寄存服務,並在Google Chrome 上檢查了我的網站(https://cecilia-fornes.tech/accueil.html) 以及我的標題和導覽列(在打開時會轉換為漢堡選單)行動裝置)將無法如預期運作。它們預計位於頁面頂部的一個區塊中,並為行動裝置提供隱藏選單,為大螢幕提供可見選單。然而,它顯示了兩個選單,我找不到原因。而且,當我嘗試從電腦上的資料夾中開啟頁面時,一切似乎都很好。我認為這是一個相容性問題,但我無法弄清楚ts從哪裡來。
這是我的程式碼:
function showResponsiveMenu() { var menu = document.getElementById("topnav_responsive_menu"); var icon = document.getElementById("topnav_hamburger_icon"); var root = document.getElementById("root"); if (menu.className === "") { menu.className = "open"; icon.className = "open"; root.style.overflowY = "hidden"; } else { menu.className = ""; icon.className = ""; root.style.overflowY = ""; } }
/* CSS HEADER CODE */ .title{ font-family: 'lemon_milkbold_italic', 'Times New Roman', 'Arial', serif;; font-size: 150%; text-shadow: 0.01rem 0.01rem $menu-color; color: white; background-color: $p-header-color; margin-top: -40px; margin-left: -8px; height: 85px; width: 100%; z-index: 1; position: absolute; display: block; overflow: hidden; &:before, &:after{ content: ''; position: absolute; top: 0; right: 0; height: 100%; z-index: 1; clip-path: polygon(35% 0, 100% 0%, 100% 100%, 0% 100%); } &:before { background-color: white; animation: showText 1200ms ease-in-out; } &:after { background-color: $menu-color; animation-delay: 500ms; animation: showText 1000ms ease-in-out; } h1{ opacity: 0; animation: animateText 1000ms forwards; } } @keyframes animateText { from { opacity: 0; } to { opacity: 1; } } @keyframes showText{ 0% { width: 0; left: 0; transform: translateX(0); } 50% { width: 100%; transform: translateX(12%); } 100% { transform: translateX(100%); } } /* CSS NAVBAR CODE */ nav { font-size: 2em; float: left; width: 185px; height: 100%; text-align: center; color: black; } nav a { background-color: $menu-color; text-decoration: none; color: black !important; transform: scale(1); transition-property: transform; transition: transform 400ms, background-color 400ms; } .menu { display: inline-block; flex-direction: column; position: relative; text-decoration-line: none; background-color: $menu-color; width: 100%; height: 100%; margin-left: -8px; margin-top: -27px; overflow: auto; text-align: center; top: 0; padding-top: 10%; list-style: none; } .topnav { background-color: $p-header-color; display: flex; align-items: center; width: 100%; } .topnav_link { color: $menu-color; padding: 12px; text-decoration: none; } /* hide responsive menu */ #topnav_hamburger_icon, #topnav_responsive_menu { display: none; } @media only screen and (max-width: 768px) { /* hide classic menu */ #topnav_menu { display: none; } /* position home link at left and hamburger at right */ #home_link { flex-grow: 1; } /* disable horizontal scrolling */ #root { position: relative; overflow-x: hidden; } /* show responsive menu and position at the right of the screen */ #topnav_responsive_menu { display: block; position: absolute; margin: 0; right: 0; top: 0; width: 100vw; height: 100vh; z-index: 99; transform-origin: 0% 0%; transform: translate(200%, 0); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); } #topnav_responsive_menu ul { display: flex; flex-direction: column; position: absolute; margin: 0; right: 0; top: 0; min-width: 50vw; height: 100vh; padding: 56px 0 0; text-align: center; background: $menu-color; list-style-type: none; -webkit-font-smoothing: antialiased; } #topnav_responsive_menu li { padding: 12px 24px; } #topnav_responsive_menu a { white-space: nowrap; color: #333; text-decoration: none; } /* And let's slide it in from the right */ #topnav_responsive_menu.open { transform: none; position: fixed; } /* ******************** HAMBURGER ICON ******************** */ /* define size and position of the hamburger link */ #topnav_hamburger_icon { display: block; position: relative; margin: 16px; width: 33px; height: 28px; z-index: 100; -webkit-user-select: none; user-select: none; cursor: pointer; } /* define the style (size, color, position, animation, ...) of the 3 spans */ #topnav_hamburger_icon span { display: block; position: absolute; height: 4px; width: 100%; margin-bottom: 5px; background: white; border-radius: 3px; z-index: 100; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } /* set the 3 spans position to look like a hamburger */ #topnav_hamburger_icon span:nth-child(1) { top: 0px; -webkit-transform-origin: left top; -moz-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; } #topnav_hamburger_icon span:nth-child(2) { top: 12px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } #topnav_hamburger_icon span:nth-child(3) { top: 24px; -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } /* change color when opening the menu */ #topnav_hamburger_icon.open span { background: #333; } /* the first span rotates 45° \ */ #topnav_hamburger_icon.open span:nth-child(1) { width: 110%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } /* the second span disappears */ #topnav_hamburger_icon.open span:nth-child(2) { width: 0%; opacity: 0; } /* the last span rotates -45° / */ #topnav_hamburger_icon.open span:nth-child(3) { width: 110%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } }
<header> <div id="root"> <div id="topnav" class="topnav"> <a id="homelink" class="topnav_link" href="accueil.html"><h1>CECILIA FORNES GUECHI<br> DEVELOPPEUSE WEB FULLSTACK</h1></a> <nav role="navigation" id="topnav_menu" class ="menu"> <ul class="list-unstyled"> <li><a class="topnav_link" href="accueil.html">Accueil</a></li> <li><a class="topnav_link" href="experiences.html">Expériences</a></li> <li><a class="topnav_link" href="benevolat.html">Bénévolats</a></li> <li><a class="topnav_link" href="formations.html">Formations<a></li> <li><a class="topnav_link" href="certif.html">Certifications</a></li> <li><a class="topnav_link" href="competences.html">Compétences</a></li> <li><a class="topnav_link" href="loisirs.html">Loisirs</a></li> <li><a class="topnav_link" href="contact.html">Contact</a></li> </ul> </nav> <a id="topnav_hamburger_icon" href="javascript:void(0);" onclick="showResponsiveMenu()"> <!-- Some spans to act as a hamburger --> <span></span> <span></span> <span></span> </a> <nav role="navigation" id="topnav_responsive_menu"> <ul class="list-unstyled"> <li><a href="accueil.html">Accueil</a></li> <li><a href="experiences.html">Expériences</a></li> <li><a href="benevolat.html">Bénévolats</a></li> <li><a href="formations.html">Formations<a></li> <li><a href="certif.html">Certifications</a></li> <li><a href="competences.html">Compétences</a></li> <li><a href="loisirs.html">Loisirs</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </div> </div> </header>
我嘗試查看一些選擇器、值和屬性相容性,但一無所獲,看起來就像大海撈針一樣。
我用 Chrome 查了一下...
看起來工作正常!
桌面:
開啟選單的行動裝置: