Выпадающее меню только с CSS

Goodmorning: DВыпадающее меню только с CSS

Я пытаюсь создать меню для своего сайта. В моем CSS у меня есть .responsive-menuul Я хочу, чтобы показать, когда ширина экрана составляет 750 пикселей. Я сделал для этого @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

Нет, не работает я хочу. меню уйти и показать меню .responsive, когда экран имеет ширину 750 пикселей. –

@ IvinRaj Кажется, вы пытались решить другую проблему, описанную ОП. Если вы не знаете, чего хочет OP, вы должны были спросить в комментарии. См. Также [Можем ли мы немного больше узнать о качестве, а не количестве, пожалуйста?] (Http: //meta.stackoverflow.com/q/316112/1016716) на мета, особенно комментарий, который говорит: «Количество ответов, содержащих« попробуйте это », вдвое больше, чем« использовать это »..._ –

@media Это прекрасно работает, ошибка - это селектор, который вы использовали.

Где вы говорите это, вы только Hidding Ли, а не его родитель .menu:

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

и использовать UL, вы не использовали дисплей: нет; на UL элемент, не .responsive-меню

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

Другое дело: .responsive меню не вложенными: #trigger: проверено. Вложенный элемент в #trigger - это .menu. Так что это не сработает.

В резюме, просто сделать это внутри @media:

.menu{ 
    display:none; 
} 

.responsive-menu ul{ 
    display: block; 
}

Если мой ответ не поможет, дайте мне знать, я объясню лучше

источник

2016-02-05 10:59:16

Выпадающее меню только с CSS

ответ

Смежные вопросы