標題:對應電腦版與手機版的MENU條 出處:A.PAO designSTUDIO BLOG 時間:Mon, 28 May 2018 17:06:27 +0000 作者:apao 地址:https://blog.apao.idv.tw/post/1265/ 內容: 這是針對「Dropdown Menu inside a Navigation Bar」而做改良。這樣可以讓很多網頁真正有手機版與電腦版的Interface區別。為了客戶的案子裡頭使用這個寫法作為基礎,做下筆記。 ▼電腦版介面 點擊在新視窗中瀏覽此圖片 https://blog.apao.idv.tw/attachment.php?fid=2954 ▼手機版介面 (以ICON做區別) 點擊在新視窗中瀏覽此圖片 https://blog.apao.idv.tw/attachment.php?fid=2955 中文範例:點這裡 META部分(讓手機能夠辨識這個網頁與讓手機能維持1:1比例): CSS部分: .navbar { overflow: hidden; background-color:rgba(0,0,0,0.50); font-family: Arial, Helvetica, sans-serif; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { position: relative; font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: red; } .dropdown-content { display: none; position: absolute; top: 50px; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } /*手機版上以以ICON界面呈現*/ @media only screen and (max-width:640px) { .dropbtn{ display:inline-block; background:url(icon_menu_48.png) no-repeat; width: 48px; height: 48px; overflow: hidden; text-indent: -150px; } } HTML部分: 英文範例:點這裡 Generated by Bo-blog 2.1.1 Release