創建響應式網頁標題的方法不太笨拙？
[英]Less clunky way of creating a responsive web header?
問題描述
我目前有一個網站標題，可以在桌面上正常運行。 我最初計划將內容堆疊起來，以便頁面隨后顯示在徽標下。 我看到了用於下拉菜單的漢堡包菜單，這是我最終想要實現的，同時保留了左側的徽標。
我知道這可能會花費一些時間，但我想我快到了。 我只是認為讓相同的元素具有響應性比創建兩個單獨的標題和切換可見性要容易得多。
所以目前我有這個：
body, html { max-width: 100%; padding: 0vw; margin: 0vw; } .header { background-color: #ffffff; position: fixed; top: 0%; left: 0%; right: 0%; height: 10vh; z-index: 1; border-bottom: solid; } .headerfill { height: 10vh; border: none; } .header-container { width: 100%; height: auto; display: flex; flex-flow: row nowrap; justify-content: center; margin: auto; margin-left: auto; margin-right: auto; } .logo-container { float: left; width: 40%; padding-left: 1vh; display: flex; flex-flow: row nowrap; justify-content: left; } .navigation-container { width: 60%; display: flex; flex-flow: row nowrap; //justify-content: space-evenly; margin: auto; margin-left: auto; margin-right: auto; text-align: center; } .space-evenly { justify-content: space-evenly; } .logo { height:8vh; max-width: 80vw; padding-top:1vh; padding-bottom:1vh; padding-left:4vh; display: block; object-fit: contain; } .mobile-header-container { width: 100%; height: auto; display: flex; flex-flow: row nowrap; justify-content: center; margin: auto; margin-left: auto; margin-right: auto; } .mobile-logo-container { float: left; width: 60%; padding-left: 1vh; display: flex; flex-flow: row nowrap; justify-content: left; } .mobile-navigation-container { width: 20%; display: flex; flex-flow: row nowrap; //justify-content: space-evenly; margin: auto; margin-left: auto; margin-right: auto; text-align: center; } .space-evenly { justify-content: space-evenly; } .mobile-logo { height:8vh; max-width: 60vw; padding-top:1vh; padding-bottom:1vh; padding-left:2vh; display: block; object-fit: contain; } @media only screen and (max-width: 500px) { .header { visibility: hidden; } } @media only screen and (max-width: 500px) { .header-container { visibility: hidden; } } @media only screen and (max-width: 500px) { .logo-container { visibility: hidden; } } @media only screen and (max-width: 500px) { .navigation-container { visibility: hidden; } } @media only screen and (max-width: 500px) { .logo { visibility: hidden; } } @media only screen and (min-width: 501px) { .mobileheader { visibility: visible; } } @media only screen and (min-width: 501px) { .mobile-header-container { visibility: visible; } } @media only screen and (min-width: 501px) { .mobile-logo-container { visibility: visible; } } @media only screen and (min-width: 501px) { .mobile-navigation-container { visibility: visible; } } @media only screen and (min-width: 501px) { .mobile-logo { visibility: hidden; } } img{ -webkit-user-drag: none; } .nav { font-family: 'Roboto', serif; font-size: 2vw; text-align: center; margin-top: auto; margin-bottom: auto; color: #000000; padding-left: auto; padding-right: auto; line-height: 1em; object-fit: contain; text-decoration: none; } @media only screen and (max-width: 500px) { .nav { font-family: 'Roboto', serif; font-size: 2.5vw; text-align: center; margin-top: auto; margin-bottom: auto; color: #000000; padding-left: auto; padding-right: auto; line-height: 1em; object-fit: contain; text-decoration: none; } } .nav:hover { color: #096e67; } a:link { color: #000000; text-decoration: none; } h1 { font-family: 'Roboto', serif; font-size: 4vw; text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; padding-left: 4vh; padding-right: 2vh; padding-bottom: 0.5vh; line-height: 1em; } @media only screen and (max-width: 500px) { h1 { font-family: 'Roboto', serif; font-size: 8vw; text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; padding-left: 2vh; padding-right: 2vh; padding-bottom: 0.5vh; line-height: 1em; } }
<html lang="en-GB"> <head> <meta charset="utf-8"/> <title>Website Header</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link rel="stylesheet" href="./stylesheet.css"> </head> <body> <div class="header"> <div class="header-container"> <div class="logo-container"> <img class="logo" src="/logo.png" alt="Logo"> </div> <div class="navigation-container space-evenly"> <p class="nav">Page1</p> <p class="nav">Page2</p> <p class="nav">Page3</p> <p class="nav">Page4</p> </div> </div> </div> <div class="mobile-header"> <div class="mobile-header-container"> <div class="mobile-logo-container"> <img class="mobile-logo" src="/logo.png" alt="Logo"> </div> <div class="mobile-navigation-container space-evenly"> <p class="nav">Page1</p> <p class="nav">Page2</p> <p class="nav">Page3</p> <p class="nav">Page4</p> </div> </div> </div> <div class="headerfill"> </div>
看起來不錯，適合桌面使用。 我只需要它們在移動元素時以某種方式做出響應即可。
圖標不必切換，我知道可以根據需要使用事件偵聽器來完成。 只是不確定如何在不創建兩個單獨的標頭的情況下使原始元素在移動設備上具有不同的格式。
希望圖像能對我的目標有足夠的了解。 第一次，我嘗試嘗試這種下拉導航，所以在此先感謝:)
UPDATE
body, html { max-width: 100%; padding: 0vw; margin: 0vw; } .header { background-color: #ffffff; position: fixed; top: 0%; left: 0%; right: 0%; height: 10vh; z-index: 1; border-bottom: solid; } .headerfill { height: 10vh; border: none; } .header-container { width: 100%; height: auto; display: flex; flex-flow: row nowrap; justify-content: center; margin: auto; margin-left: auto; margin-right: auto; } .logo-container { float: left; width: 40%; padding-left: 1vh; display: flex; flex-flow: row nowrap; justify-content: left; } .navigation-container { width: 60%; display: flex; flex-flow: row nowrap; //justify-content: space-evenly; margin: auto; margin-left: auto; margin-right: auto; text-align: center; } .space-evenly { justify-content: space-evenly; } .logo { height:8vh; max-width: 80vw; padding-top:1vh; padding-bottom:1vh; padding-left:4vh; display: block; object-fit: contain; } img{ -webkit-user-drag: none; } .nav { font-family: 'Roboto', serif; font-size: 2vw; text-align: center; margin-top: auto; margin-bottom: auto; color: #000000; padding-left: auto; padding-right: auto; line-height: 1em; object-fit: contain; text-decoration: none; } @media only screen and (max-width: 500px) { .nav { font-family: 'Roboto', serif; font-size: 2.5vw; text-align: center; margin-top: auto; margin-bottom: auto; color: #000000; padding-left: auto; padding-right: auto; line-height: 1em; object-fit: contain; text-decoration: none; } } .nav:hover { color: #096e67; } a:link { color: #000000; text-decoration: none; } h1 { font-family: 'Roboto', serif; font-size: 4vw; text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; padding-left: 4vh; padding-right: 2vh; padding-bottom: 0.5vh; line-height: 1em; } @media only screen and (max-width: 500px) { h1 { font-family: 'Roboto', serif; font-size: 8vw; text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; padding-left: 2vh; padding-right: 2vh; padding-bottom: 0.5vh; line-height: 1em; } }
<html lang="en-GB"> <head> <meta charset="utf-8"/> <title>Website Header</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link rel="stylesheet" href="./stylesheet3.1.css"> </head> <body> <div class="header"> <div class="header-container"> <div class="logo-container"> <img class="logo" src="/logo.png" alt="Logo"> </div> <div class="navigation-container space-evenly"> <p class="nav">Page1</p> <p class="nav">Page2</p> <p class="nav">Page3</p> <p class="nav">Page4</p> </div> </div> </div>
希望這可以幫助。 我需要找到一種方法，將該設計（使用我已有的代碼）與@Nyan的答案相結合。 我刪除了媒體查詢以及單獨的移動和桌面標題。 無法解決這個問題。
let menu = document.querySelector('nav') document.querySelector('button') .addEventListener('click', e => { menu.classList.toggle('active') })
header{ position: relative; display: flex; background: #ccc; justify-content: space-between; } nav{ display: flex; } nav a{ display: block; padding: 10px; background: #ddd; border: 1px solid #aaa; } button{ display: none; } @media (max-width: 400px) { nav{ position: absolute; top: 100%; left: 0; right: 0; text-align: right; display: none; } nav.active{ display: block; } button{ display: block; } }
<header> <a href="" class="logo">logo</a> <button>menu</button> <nav> <a href="">Page1</a> <a href="">Page2</a> <a href="">Page3</a> <a href="">Page4</a> </nav> </header>
這樣運行，具有該結構，但保留初始設計。 （上圖）
1 個解決方案
解決方案1
-1 2018-08-11 17:49:53
您可以創建僅在大屏幕上隱藏而在小屏幕上可見的按鈕，並在其上監聽單擊事件。 或者，如果您根本不想創建新元素，則可以使用::after和::before並進行監聽。
偵聽器可以例如在列表上切換active類。
列表本身可以絕對定位在標題的底部，並且在沒有active類時可以隱藏。
let menu = document.querySelector('nav') document.querySelector('button') .addEventListener('click', e => { menu.classList.toggle('active') })
header{ position: relative; display: flex; background: #ccc; justify-content: space-between; } nav{ display: flex; } nav a{ display: block; padding: 10px; background: #ddd; border: 1px solid #aaa; } button{ display: none; } @media (max-width: 400px) { nav{ position: absolute; top: 100%; left: 0; right: 0; text-align: right; display: none; } nav.active{ display: block; } button{ display: block; } }
<header> <a href="" class="logo">logo</a> <button>menu</button> <nav> <a href="">one</a> <a href="">two</a> <a href="">three</a> <a href="">four</a> </nav> </header>
此步驟中的哪一個引起您更多問題？
尋找在多維對象中創建層次結構數據的較為簡單的方法
[英]Looking for a less verbose way of creating hierarchical data in a multidimensional object
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.