想要使Superfish垂直菜單響應

Question

我使用超級魚垂直菜單，但它不響應響應視圖。需要解決這個響應。

Answer 1

媒體查詢將幫助你把它響應 看一看這個codepen在this question

下面的代碼給出另一個很好的例子是從codepen這使得菜單響應服用。

@media screen and (max-width: 768px) { 
    body { 
     margin: 0; } } 

@media screen and (max-width: 768px) { 
    header.global nav #hamburger { 
     display: block; } } 
header.global nav ul { 
    margin: 0; 
    padding: 0 25px; 
    display: block; } 
@media screen and (max-width: 768px) { 
    header.global nav ul { 
     display: none; 
     margin: 7px 0; 
     padding: 0; } } 

@media screen and (max-width: 768px) { 
    header.global nav ul li { 
     width: 100%; 
     background: #2d2d2d; 
     border-left: none; 
     border-right: none; 
     border-top: 1px solid #474747; 
     border-bottom: 1px solid #141414; } 
    header.global nav ul li:first-child { 
     border-top: none; } 
    header.global nav ul li:last-child { 
     border-bottom: none; } } 

@media screen and (min-width: 768px) { 
    header.global nav ul li:hover > a { 
     position: relative; } 
    header.global nav ul li:hover > a:after { 
     content: ""; 
     position: absolute; 
     left: 20px; 
     top: 40px; 
     border-width: 0 8px 8px; 
     border-style: solid; 
     border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ef3636; 
     display: block; 
     width: 0; 
     z-index: 999; } } 
@media screen and (max-width: 768px) { 
    header.global nav ul li ul { 
     width: 100% !important; 
    } 
} 
@media screen and (min-width: 768px) { 
    header.global nav ul li ul li:hover a:after { 
     border: none; } }