css-меню не работает должным образом

Я работаю над новой версией веб-сайта. Сейчас я почти доволен результатами, кроме одной проблемы. Веб-сайт состоит из заголовка (с логотипом и меню) и содержимого. Я хочу, чтобы он работал как на больших, так и на маленьких экранах.css-меню не работает должным образом

На маленьком экране я сталкиваюсь с одной проблемой. Когда я расширяю меню, он находится поверх части контента, но часть контента по-прежнему доступна для кликов, поэтому параметры меню не доступны для кликов, и меню не работает правильно.

Я хочу, чтобы это было следующим образом (для маленького экрана, то есть смартфона): - Когда я нажимаю «Показать меню», все параметры меню будут отображаться (Меню1, Меню2, Меню3, Меню4) и можно щелкнуть. Исходный текст (div 'page') не отображается (исчезает под опциями меню). - Когда я нажимаю один из параметров меню, все параметры в подменю будут отображаться и доступны для просмотра. Исходный текст (div 'page') не отображается.

Я уже искал и пробовал много вариантов, но не с ожидаемым результатом.

Заранее спасибо за любые подсказки :)

Мой HTML выглядит следующим образом:

<body> 
    <div id="wrapper"> 
    <div id="logo"> 
     <img src="#" style="width:180px;height:50px;"> 
    </div> 
    <div id="menu"> 
     <label for="show-menu" class="show-menu">Show Menu</label> 
     <input type="checkbox" id="show-menu" role="button"> 
     <ul id="menu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Menu1 &#65516;</a> 
      <ul class="hidden"> 
      <li><a href="#">Submenu11</a></li> 
      <li><a href="#">Submenu12</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Menu2 &#65516;</a> 
      <ul class="hidden"> 
      <li><a href="#">Menu21</a></li> 
      <li><a href="#">Menu22</a></li> 
      <li><a href="#">Menu23</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Menu3 &#65516;</a> 
      <ul class="hidden"> 
      <li><a href="#">Menu31</a></li> 
      <li><a href="#">Menu32</a></li> 
      <li><a href="#">Menu33</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Menu4 &#65516;</a> 
      <ul class="hidden"> 
      <li><a href="#">Menu41</a></li> 
      <li><a href="#">Menu42</a></li> 
      <li><a href="#">Menu43</a></li> 
      <li><a href="#">Menu44</a></li> 
      <li><a href="#">Menu45</a></li> 
      <li><a href="#">Menu46</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    <div id="header"> 
     <h3>Header</h3><hr> 
    </div> 
    <div id="pageliquid"> 
     <div id="page">Page-text<br /> 
     </div> 
    </div> 
    </div> 
</body>

Мой CSS выглядит следующим образом:

body { 
    margin: 20px; 
    font-family: Tahoma, Arial; 
    font-size: 12pt; 
    color: #001245; 
} 

#wrapper { 
    width: 100%; 
    min-width: 1000px; 
    max-width: 2000px; 
    margin: 0 auto; 
} 

#logo { 
    height: 50px; 
    width: 100%; 
    position: static; 
} 

#menu { 
    height: 50px; 
    width: 100%; 
    position: static; 
} 

#header { 
    height: 75px; 
    width: 100%; 
    position: static; 
} 

#pageliquid { 
    width: 100%; 
    position: static; 
} 

#page { 
    top: 200px; 
    max-width: 100%; 
    position: absolute; 
    overflow: scroll; 
    bottom: 1px; 
    left: 20px; 
    right: 0px; 
} 

ul, img { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    position: absolute; 
} 

li { 
    display:inline-block; 
    float: left; 
    margin-right: 1px; 
} 

li a { 
    display:block; 
    min-width:200px; 
    height: 50px; 
    text-align: center; 
    line-height: 50px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: small; 
    color: #fff; 
    background: #0b0b3b; 
    text-decoration: none; 
} 

li:hover a { 
    background: #0b0b3b; 
} 

li:hover ul a { 
    background: #08088a; 
    color: #d8d8d8; 
    height: 40px; 
    line-height: 40px; 
} 

li:hover ul a:hover { 
    background: #08088a; 
    color: #ffffff; 
} 

li ul { 
    display: none; 
} 

li ul li { 
    display: block; 
    float: none; 
} 

li ul li a { 
    width: 160px; 
    min-width: 100px; 
    padding: 0 20px; 
} 

ul li a:hover + .hidden, .hidden:hover { 
    display: block; 
} 

.show-menu { 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    text-decoration: none; 
    color: #fff; 
    background: #19c589; 
    text-align: center; 
    padding: 10px 0; 
    display: none; 
} 

input[type=checkbox] { 
    display: none; 
    -webkit-appearance: none; 
} 

input[type=checkbox]:checked ~ #menu{ 
    display: block; 
} 

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

    #wrapper { 
    min-width: 0px; 
    margin: 0; 
    } 

    #header { 
    position: absolute; 
    } 

    #page { 
    left: 0px; 
    } 

    ul { 
    position: absolute; 
    width: 100%; 
    display: none; 
    } 

    li { 
    margin-bottom: 1px; 
    margin-right: 0px; 
    } 

    ul li, li a { 
    width: 100%; 
    } 

    li ul li a { 
    width: 100%; 
    padding: 0 0px; 
    } 

    .show-menu { 
    display:block; 
    } 
}

источник

2017-01-06 Michiel Kromhout van der Meer

Там много чего происходит там, что мы должны представить. Ваш вопрос может быть более понятным и простым в разрешении, если вы разместите демо или ссылку? – sol

Проблема с г-индекс меню, поскольку оно находится под нижними элементами на странице из-за фиксированной высоты и естественной высоты #menu и абсолютного позиционирования этого меню. У вас есть дубликат ID здесь, но заставляя более высокий z-index на #menu помещает навигацию над другими элементами на странице. Это также требует изменения position: static; до position: relative; на #menu. Вот демо - http://codepen.io/anon/pen/MJwoOL (PS - там были какие-то пересекающиеся проблемы с вашим вложенным li х и ul о том, что я подправил немного в медиа-запросе, тоже, но не имеет отношение к вашему вопросу здесь)

источник

2017-01-06 22:50:39

Спасибо большое! Мне потребовалось несколько часов, чтобы понять это, но без успеха. Вы сделали это :) –

@MichielKromhoutvanderMeer приветствую вас! –

css-меню не работает должным образом

ответ

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