下拉菜單隻有CSS

早上好：D下拉菜單隻有CSS

我想爲我的網站做一個菜單。在我的CSS我有一個.responsive-menuul 我希望顯示當屏幕寬度是750px。我爲此做了一個@media，但它不起作用。我試圖只使用CSS，所以我不想使用任何JavaScript。當您在全屏顯示網站時，菜單正在按照我的要求工作，唯一的問題是響應菜單。我正在使用複選框使菜單onclick。

所以，如果屏幕寬度爲750px，比我想.menu走開並顯示.responsive-menu

這是我的HTML：

<html> 
    <head> 
     <link rel="stylesheet" href="stylesheet.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
    </head> 
    <body> 
     <div class="header"> 
      <div class="naam"> 
       <p>Bart van Bussel <i class="fa fa-check"></i></p> 
      </div> 
      <input type="checkbox" id="trigger" /> 
      <div class="menu"> 
       <ul> 
        <li> 
         <label for="trigger"><i class="fa fa-bars"><span class="menu-naam">Menu</span></i></label> 
         <ul class="dropdown"> 
          <li> 
           <a href="">Random stuff</a> 
          </li> 
          <li> 
           <a href="">stuff I made</a> 
          </li> 
          <li> 
           <a href="">About myself</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
      <div class="responsive-menu"> 
       <ul> 
        <li>About myself</li> 
        <li>stuff I made</li> 
        <li>Random stuff</li> 
       </ul> 
      </div> 
     </div> 
    </body> 
</html>

這是我的CSS：

* { 
    padding:0; 
    margin:0; 
    font-family:arial; 
} 

/*--------Header-------*/ 

.header { 
    background-color:#f1f1f1; 
    height:50px; 
    width:100%; 
    position: fixed; 
    box-shadow: inset 0px -200px 16px -200px rgba(0,0,0,0.75); 
} 

.naam p{ 
    font-size:25px; 
    padding:12px; 
    width:100%; 
} 

/*--------Menu-------*/ 

.menu ul li i { 
    float:right; 
    font-size:35px; 
    position:relative; 
    top:-65px; 
    padding:20px; 
    cursor: pointer; 
} 

.menu ul li ul { 
    display:none; 
} 

.menu ul li ul li { 
    display:inline; 
    float:right; 
    position:relative; 
    top:-53px; 
} 

.dropdown li a{ 
    color:black; 
    text-decoration:none; 
    padding:20px; 
} 

.menu-naam { 
    font-family:arial; 
    font-size:25px; 
    padding:8px; 
    position:relative; 
    bottom:3px; 
} 

.responsive-menu ul { 
    display:none; 
    color:black; 
    position:absolute; 
    background-color:rgba(255,255,255,0.8); 
    width:100%; 
    top:50px; 
} 

.responsive-menu ul li { 
    padding:10px; 
    text-align:center; 
} 

#trigger { 
    display: none; 
} 
#trigger:checked + .menu ul li ul { 
    display: block; 
} 

#trigger:checked + .menu ul li { 
    color:gray; 
} 

/*--------Media-------*/ 

@media screen and (max-width:750px) { 
    .background p { 
     font-size:900%; 
    } 
    .menu ul li ul li { 
     display:none; 
    } 
    #trigger:checked + .responsive-menu ul { 
     display:block; 
    } 
}

我希望有人能幫我解決這個問題:)

這是JSfiddle。

來源

2016-02-05 Bart Bussel

問題是與#trigger:checked + .responsive-menu，這是行不通的。 +運算符僅適用於源中彼此相鄰的元素。

解決方案：使用~運算符，如果兩個元素之間有東西，也可以使用。

New fiddle。

來源

2016-02-05 10:49:15

謝謝:)被卡在那幾天！ –

你可以試試這個：

* { 
    padding:0; 
    margin:0; 
    font-family:arial; 
} 

/*--------Header-------*/ 

.header { 
    background-color:#f1f1f1; 
    height:50px; 
    width:100%; 
    position: fixed; 
    box-shadow: inset 0px -200px 16px -200px rgba(0,0,0,0.75); 
} 

.naam p{ 
    font-size:25px; 
    padding:12px; 
    width:100%; 
} 

/*--------Menu-------*/ 

.menu ul li i { 
    float:right; 
    font-size:35px; 
    position:relative; 
    top:-65px; 
    padding:20px; 
    cursor: pointer; 
} 

.menu ul li ul { 
    display:none; 
} 

.menu ul li ul li { 
    display:inline; 
    float:right; 
    position:relative; 
    top:-53px; 
} 

.dropdown li a{ 
    color:black; 
    text-decoration:none; 
    padding:20px; 
} 

.menu-naam { 
    font-family:arial; 
    font-size:25px; 
    padding:8px; 
    position:relative; 
    bottom:3px; 
} 

.responsive-menu ul { 
    display:none; 
    color:black; 
    position:absolute; 
    background-color:rgba(255,255,255,0.8); 
    width:100%; 
    top:50px; 
} 

.responsive-menu ul li { 
    padding:10px; 
    text-align:center; 
} 

#trigger { 
    display: none; 
} 
#trigger:checked + .menu ul li ul { 
    display: block; 
} 

#trigger:checked + .menu ul li { 
    color:gray; 
} 

/*--------Media-------*/ 

@media screen only and (max-width:750px) { 
    .background p { 
     font-size:900%; 
    } 
    .menu ul li ul li { 
     display:none; 
    } 
    #trigger:checked + .responsive-menu ul { 
     display:block; 
    } 
}

DEMO HERE

來源

2016-02-05 10:47:22

沒有。當屏幕寬度爲750px時，菜單將消失並顯示.responsive-menu。 –

@IvinRaj看來你試圖解決OP描述的一個不同的問題。如果您不確定OP的要求，您應該在評論中提出要求。另請參閱[我們是否可以關注質量而不是數量？]（http：//meta.stackoverflow。com/q/316112/1016716）在元，特別是說的評論，_包含「嘗試這個」的答案的數量是「使用這個」的兩倍大......_ –

@media它的工作完美，錯誤是您使用的選擇器。

如果你這樣說，你只hidding 李，而不是他的父母。菜單：

.menu ul li ul li { 
    display:none; 
}

，並使用UL，您使用的顯示：無;在UL元素上，沒有.responsive菜單

#trigger:checked + .responsive-menu ul{ 
    display: block; 
}

其他事情：.responsive-menu不嵌套到：#trigger：檢查。 #trigger的嵌套元素是.menu。所以這不會工作。

在恢復，只是這樣做你@media內：

.menu{ 
    display:none; 
} 

.responsive-menu ul{ 
    display: block; 
}

如果我的回答對您沒有幫助，讓我知道，我解釋說，不工作我想更好的

來源

2016-02-05 10:59:16

下拉菜單隻有CSS

回答

相關問題