Меню CSS перекрывает другой контент при открытии
РЕШЕНИЕ
Смотрите отрывок на рабочем примере!
Вопрос
Я действительно не могу сказать, что мне здесь не хватает. Я просто не могу расположить раскрывающееся меню поверх содержимого ниже. Во фрагменте ниже это просто текст, но это может быть что угодно.
Я пробовал применять z-index и position: absolute;, но безуспешно.
Я хочу добиться того, что можно увидеть на изображении ниже, только с помощью вертикального меню. Он перекрывает все. Или наложение - неправильное слово для этого?
$(function(){
$('#menuanimation').click(function(e) {
$(this).toggleClass('anime-menu').toggleClass('change');
});
});html {
height: 100%;
}
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
margin: 0;
padding: 0;
background-color: #E6D9BD;
height: 100%;
width: 100%;
color: #2F1919;
}
.container {
width: 100%;
margin: 0px auto 10px auto;
padding: 0px 0px 0px 0px;
border: 5px solid #2E181A;
background-color: #E6D9BD;
position: relative;
min-height: 100%;
align-content: flex-start;
display: flex;
flex-flow: row wrap;
}
.container p {
font-size: 4vw;
margin: 0px 10px 10px 10px;
padding: 5px;
text-align:left;
color: #2F1919;
white-space: nowrap;
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
/*===== MENU below ======*/
.menu-checkbox {
display: none;
}
.menu-checkbox ~ .menu {
display: none;
}
.menu-checkbox:checked ~ .menu {
display: block;
}
.menu-checkbox:checked ~ .menu ul {
display: block;
}
.menu {
display: none;
float: right;
position: absolute;
border: 0px solid #2E181A;
margin: 39px 0 0 0;
padding: 0px;
font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #E6D9BD;
/* #2E181A */
width: 100%;
background: none;
z-index: 100;
/* #E6D9BD */
}
.menu ul {
background: #E6D9BD;
display: none;
margin: 0 10px 0 0;
padding: 0;
width: 200px;
list-style: none;
border: 5px solid #2E181A;
border-top: none;
float: right;
position: relative;
opacity:0.95;
filter:alpha(opacity=95);/* For IE8 and earlier */
}
.menu li {
padding: 0px 8px 0px 8px;
display: inline-block;
position: relative; /* */
}
.menu li a {
color: #2E181A;
display: block;
font-weight: bold;
padding: 8px 16px;
text-decoration: none;
}
.menu ul li ul {
border: 0;
}
.menu li ul ul {
display: none;
}
.menu li ul li {
display: none;
}
.anime-menu {
display: inline-block;
cursor: pointer;
float: right;
margin: 0 20px 0 0;
}
.anime-bar1, .anime-bar2, .anime-bar3 {
width: 35px;
height: 5px;
background-color: #2E181A;
border-radius: 3px;
margin: 6px 0;
transition: 0.4s;
}
.change {
display: inline-block;
cursor: pointer;
float: right;
margin: 0 20px 0 0;
}
.change .anime-bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .anime-bar2 {opacity: 0;}
.change .anime-bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class = "menu-checkbox" type = "checkbox" id = "menu-checkbox" />
<label for = "menu-checkbox"><div class = "anime-menu" id = "menuanimation">
<div class = "anime-bar1"></div>
<div class = "anime-bar2"></div>
<div class = "anime-bar3"></div>
</div></label>
<div class = "menu">
<ul class = "active">
<li><a href = "#">Frontpage</a></li>
<li><a href = "#">Sales</a></li>
<li><a href = "#">Products</a></li>
<li><a href = "#">Impressum</a></li>
<li><a href = "#">About us</a></li>
<li><a href = "#">Contact us</a></li>
</ul>
</div>
<div class = "container">
<p>
I modsætning til hvad mange tror, er Lorem Ipsum ikke bare tilfældig tekst. Det stammer fra et stykke litteratur på latin fra år 45 f.kr., hvilket gør teksten over 2000 år gammel. Richard McClintock, professor i latin fra Hampden-Sydney universitet i
Virginia, undersøgte et af de mindst kendte ord "consectetur" fra en del af Lorem Ipsum, og fandt frem til dets oprindelse ved at studere brugen gennem klassisk litteratur. Lorem Ipsum stammer fra afsnittene 1.10.32 og 1.10.33 fra "de Finibus Bonorum
et Malorum" (Det gode og ondes ekstremer), som er skrevet af Cicero i år 45 f.kr. Bogen, som var meget populær i renæssancen, er en afhandling om etik. Den første linie af Lorem Ipsum "Lorem ipsum dolor sit amet..." kommer fra en linje i afsnit 1.10.32.
Standardafsnittet af Lorem Ipsum, som er brugt siden 1500-tallet, er gengivet nedenfor for de, der er interesserede. Afsnittene 1.10.32 og 1.10.33 fra "de Finibus Bonorum et Malorum" af Cicero er også gengivet i deres nøjagtige udgave i selskab med
den engelske udgave fra oversættelsen af H. Rackham fra 1914. Standardafsnittet af Lorem Ipsum, som er brugt siden 1500-tallet, er gengivet nedenfor for de, der er interesserede. Afsnittene 1.10.32 og 1.10.33 fra "de Finibus Bonorum et Malorum" af
Cicero er også gengivet i deres nøjagtige udgave i selskab med den engelske udgave fra oversættelsen af H. Rackham fra 1914.
</p>
</div>На самом деле я пытаюсь преобразовать горизонтальное меню в меню для гамбургеров. Мне не нужны подменю, так как их довольно много, и они не будут работать на мобильном устройстве. Их легко скрыть, хотя, поскольку я пытаюсь заставить «новое» раскрывающееся меню работать, оно просто проталкивает контент под ним, а не «накладывает» на контент внизу.
—
02.09.2018 10:34
ну, тогда вы можете а) использовать мой ответ и стилизовать параметры меню так, чтобы они выровнялись по левому краю или расширили их, или б) отображать параметры меню встроенными, а не блочными? Я в отпуске, не хочу тратить на это больше времени. Удачи,,
—
02.09.2018 10:41
@RachelGallen Спасибо, я попробую поиграть с этим. Хороших праздников :)
—
02.09.2018 11:01
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
4
822
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Div с текстом должен иметь position: relative; (означает прикрепить) и .menu { position: absolute; } (означает, что прикрепить).
$('#menuanimation').click(function(e) {
$(this).toggleClass('anime-menu').toggleClass('change');
});.menu-checkbox {
display: none;
}
.menu-checkbox~.animemenu:before {
content: "";
}
.menu-checkbox~.menu {
display: none;
}
.menu-checkbox:checked~.menu {
display: block;
}
.menu {
overflow: hidden;
display: none;
float: right;
position: absolute;
z-index: 1;
border: 0px solid #2E181A;
padding: 0px;
font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #2E181A;
/* #2E181A */
width: 100%;
background: #2E181A;
/* #E6D9BD */
}
.menu ul {
background: #E6D9BD;
display: hidden;
margin: 0;
padding: 0;
width: 200px;
list-style: none;
float: right;
overflow: hidden;
}
.menu li {
padding: 0px 8px 0px 8px;
display: inline-block;
position: relative;
}
.menu li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.menu li ul ul {
display: none;
}
.menu li ul li {
display: none;
}
/* Change the link color on hover */
.menu li a:hover {
background-color: #555;
color: white;
width: 100%;
}
.anime-menu {
display: inline-block;
cursor: pointer;
float: right;
margin: 0 20px 0 0;
}
.anime-bar1,
.anime-bar2,
.anime-bar3 {
width: 35px;
height: 5px;
background-color: #E6D9BD;
margin: 6px 0;
transition: 0.4s;
}
.change {
display: inline-block;
cursor: pointer;
float: right;
margin: 0 20px 0 0;
}
.change .anime-bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .anime-bar2 {
opacity: 0;
}
.change .anime-bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
html {
height: 100%;
}
div .myText {
position: relative;
}
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
margin: 0;
padding: 0;
background-color: #2E181A;
height: 100%;
width: 100%;
color: #2F1919;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class = "menu-checkbox" type = "checkbox" id = "menu-checkbox" />
<label for = "menu-checkbox"><div class = "anime-menu" id = "menuanimation">
<div class = "anime-bar1"></div>
<div class = "anime-bar2"></div>
<div class = "anime-bar3"></div>
</div></label>
<div class = "menu">
<ul class = "active">
<li><a href = "#">Frontpage</a></li>
<li><a href = "#">Sales</a></li>
<li><a href = "#">Products</a></li>
<li><a href = "#">Impressum</a></li>
<li><a href = "#">About us</a></li>
<li><a href = "#">Contact us</a></li>
</ul>
</div>
<div class = "myText" style = "display: block; background: #FFF;">
<p style = "color: blue">
I modsætning til hvad mange tror, er Lorem Ipsum ikke bare tilfældig tekst. Det stammer fra et stykke litteratur på latin fra år 45 f.kr., hvilket gør teksten over 2000 år gammel. Richard McClintock, professor i latin fra Hampden-Sydney universitet i
Virginia, undersøgte et af de mindst kendte ord "consectetur" fra en del af Lorem Ipsum, og fandt frem til dets oprindelse ved at studere brugen gennem klassisk litteratur. Lorem Ipsum stammer fra afsnittene 1.10.32 og 1.10.33 fra "de Finibus Bonorum
et Malorum" (Det gode og ondes ekstremer), som er skrevet af Cicero i år 45 f.kr. Bogen, som var meget populær i renæssancen, er en afhandling om etik. Den første linie af Lorem Ipsum "Lorem ipsum dolor sit amet..." kommer fra en linje i afsnit 1.10.32.
Standardafsnittet af Lorem Ipsum, som er brugt siden 1500-tallet, er gengivet nedenfor for de, der er interesserede. Afsnittene 1.10.32 og 1.10.33 fra "de Finibus Bonorum et Malorum" af Cicero er også gengivet i deres nøjagtige udgave i selskab med
den engelske udgave fra oversættelsen af H. Rackham fra 1914. Standardafsnittet af Lorem Ipsum, som er brugt siden 1500-tallet, er gengivet nedenfor for de, der er interesserede. Afsnittene 1.10.32 og 1.10.33 fra "de Finibus Bonorum et Malorum" af
Cicero er også gengivet i deres nøjagtige udgave i selskab med den engelske udgave fra oversættelsen af H. Rackham fra 1914.
</p>
</div>Спасибо, но что-то в вашем фрагменте работает некорректно. Замена .menu на position: absolute; определенно что-то меняет.
—
02.09.2018 10:05
Ответ принят как подходящий
Вы хотите, чтобы раскрывающийся список отображался над текстом? Если да, то, возможно, это то, что вы хотите ... Я добавил отступ вверху и идентификатор в div, перенеся встроенный стиль div в CSS. Вы можете добавить класс или идентификатор к вашему p, если хотите, чтобы текст был разного цвета в каждом абзаце (и переместите атрибут цвета из блока содержимого). Рекомендуется избегать встроенного стиля.
Надеюсь это поможет!
$('#menuanimation').click(function(e) {
$(this).toggleClass('anime-menu').toggleClass('change');
});html {
height: 100%;
}
body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
margin: 0;
padding: 0;
background-color: #2E181A;
height: 100%;
width: 100%;
color: #2F1919;
}
.menu-checkbox {
display: none;
}
.menu-checkbox~.animemenu:before {
content: "";
}
.menu-checkbox~.menu {
display: none;
}
.menu-checkbox:checked~.menu {
display: block;
}
.menu {
overflow: hidden;
display: none;
float: right;
position: relative;
z-index: 1;
border: 0px solid #2E181A;
padding: 0px;
font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #2E181A;
/* #2E181A */
width: 100%;
background: #2E181A;
/* #E6D9BD */
}
.menu ul {
background: #E6D9BD;
display: hidden;
margin: 0;
padding: 0;
width: 200px;
list-style: none;
float: right;
overflow: hidden;
}
.menu li {
padding: 0px 8px 0px 8px;
display: inline-block;
position: relative;
}
.menu li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
.menu li ul ul {
display: none;
}
.menu li ul li {
display: none;
}
/* Change the link color on hover */
.menu li a:hover {
background-color: #555;
color: white;
width: 100%;
}
.anime-menu {
display: inline-block;
cursor: pointer;
float: right;
margin: 0 20px 0 0;
}
.anime-bar1,
.anime-bar2,
.anime-bar3 {
width: 35px;
height: 5px;
background-color: #E6D9BD;
margin: 6px 0;
transition: 0.4s;
}
.change {
display: inline-block;
cursor: pointer;
float: right;
margin: 0 20px 0 0;
}
.change .anime-bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .anime-bar2 {
opacity: 0;
}
.change .anime-bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
#content p {
padding-top: 65px;
background-color:#ffffff;
}
#content p::after {
position: relative;
display: block;
/*background-color: #FFF;*/
color: blue;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class = "menu-checkbox" type = "checkbox" id = "menu-checkbox" />
<label for = "menu-checkbox"><div class = "anime-menu" id = "menuanimation">
<div class = "anime-bar1"></div>
<div class = "anime-bar2"></div>
<div class = "anime-bar3"></div>
</div></label>
<div class = "menu">
<ul class = "active">
<li><a href = "#">Frontpage</a></li>
<li><a href = "#">Sales</a></li>
<li><a href = "#">Products</a></li>
<li><a href = "#">Impressum</a></li>
<li><a href = "#">About us</a></li>
<li><a href = "#">Contact us</a></li>
</ul>
</div>
<div id = "content">
<p style = "color: blue">
I modsætning til hvad mange tror, er Lorem Ipsum ikke bare tilfældig tekst. Det stammer fra et stykke litteratur på latin fra år 45 f.kr., hvilket gør teksten over 2000 år gammel. Richard McClintock, professor i latin fra Hampden-Sydney universitet i
Virginia, undersøgte et af de mindst kendte ord "consectetur" fra en del af Lorem Ipsum, og fandt frem til dets oprindelse ved at studere brugen gennem klassisk litteratur. Lorem Ipsum stammer fra afsnittene 1.10.32 og 1.10.33 fra "de Finibus Bonorum
et Malorum" (Det gode og ondes ekstremer), som er skrevet af Cicero i år 45 f.kr. Bogen, som var meget populær i renæssancen, er en afhandling om etik. Den første linie af Lorem Ipsum "Lorem ipsum dolor sit amet..." kommer fra en linje i afsnit 1.10.32.
Standardafsnittet af Lorem Ipsum, som er brugt siden 1500-tallet, er gengivet nedenfor for de, der er interesserede. Afsnittene 1.10.32 og 1.10.33 fra "de Finibus Bonorum et Malorum" af Cicero er også gengivet i deres nøjagtige udgave i selskab med
den engelske udgave fra oversættelsen af H. Rackham fra 1914. Standardafsnittet af Lorem Ipsum, som er brugt siden 1500-tallet, er gengivet nedenfor for de, der er interesserede. Afsnittene 1.10.32 og 1.10.33 fra "de Finibus Bonorum et Malorum" af
Cicero er også gengivet i deres nøjagtige udgave i selskab med den engelske udgave fra oversættelsen af H. Rackham fra 1914.
</p>
</div>Спасибо. Кажется, это просто подталкивает нижеприведенный контент. См. Изображение в обновленном вопросе.
—
02.09.2018 10:00
p.s. посмотрите на этот jsfiddle.net/RachGal/knuxedv9 Я уверен, что вы найдете другие примеры меню в стиле бургеров в Интернете
—
02.09.2018 10:42
Спасибо, Рэйчел. Я прочитал об этом и решил это благодаря вам.
—
03.09.2018 13:28
@SimonJensen рад помочь :)
—
03.09.2018 13:31
Другие вопросы по теме
Bootstrap: что делать с iMac по сравнению с типичными размерами ноутбуков?
Как лучше всего разместить все элементы HTML-сайта с помощью CSS?
Встроено несколько видео, первое видео воспроизводится везде, где есть видео
Почему эта HTML-строка такая избыточная?
SVG. Обратное изображение с помощью CSS. Храните изображение в том же месте
Как я могу исправить слайд-шоу, чтобы точки работали автоматически
Создание адаптивной сетки для div с вложенными элементами с помощью CSS
Абсолютное позиционирование беспорядок с max-width при наличии двух изображений друг над другом
Изменение цвета фиксированного изображения в зависимости от фона
Несовместимость в firefox
Похожие вопросы
Как лучше всего разместить все элементы HTML-сайта с помощью CSS?
Mysqli / PHP / HTML дублируют записи вставки при использовании mysqli_insert_id для извлечения недавно автоматически сгенерированных идентификаторов
Вызов jquery api показывает пустой возврат
Встроено несколько видео, первое видео воспроизводится везде, где есть видео
Почему эта HTML-строка такая избыточная?
Количество вариантов выбора элемента в собственном мобильном браузере
Создание адаптивной сетки для div с вложенными элементами с помощью CSS
Как запустить HTML-файл, созданный в Sublime Text, напрямую в Chrome?
Абсолютное позиционирование беспорядок с max-width при наличии двух изображений друг над другом
Несовместимость в firefox
У вас нет подкатегорий? Вы хотите избавиться от бургерного меню в пользу горизонтального меню, и чтобы каждый из этих вариантов выпадал из меню? Ваш вопрос сбивает с толку