#html #jquery #css #sass #less
#HTML #jquery #css #sass #Меньше
Вопрос:
Я пытаюсь создать подменю с несколькими столбцами при наведении курсора меню.
Для достижения этого я использовал column-count: auto; , column-width: 150px; и column-fill: auto; с фиксированной высотой.
Но ширина разделенного столбца не увеличивается. В примере белый фон не масштабируется в соответствии с автоматической шириной столбца. Когда я использую column-count: 2; поскольку жестко закодированное целое число работает нормально, но я не хочу использовать жестко закодированное целое число, оно состоит из нескольких столбцов в зависимости от высоты.
Вот ссылка на скрипку https://jsfiddle.net/1cga0jro/2 /
Почему это не увеличивает ширину, любая помощь, любое предложение?
HTML:
.nav {
background: brown;
/*@media only screen and (max-width: 1087px) {
display: none;
}*/
}
.nav ul.main_navigation {
list-style: none;
margin: 0;
max-width: 1204px;
position: relative;
}
.nav ul.main_navigation a {
text-decoration: none;
}
.nav ul.main_navigation .sub_menu {
list-style: none;
padding: 0;
}
.nav ul.main_navigation .sub_menu li {
font-size: 15px;
font-weight: bold;
line-height: 16px;
letter-spacing: 0.3px;
max-width: 213px;
}
.nav ul.main_navigation .sub_menu li .sub_menu {
list-style: none;
padding: 5px 0 18px;
}
.nav ul.main_navigation .sub_menu li .sub_menu a {
font-size: 12px;
line-height: 15px;
font-weight: normal;
color: #000;
padding-bottom: 5px;
display: block;
}
.nav ul.main_navigation>li {
display: inline-block;
font-size: 16px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.4px;
padding: 30px 10px;
margin: 0 5px;
}
.nav ul.main_navigation>li>a {
color: #fff;
}
/*.nav ul.main_navigation>li>.main_sub_menu {
display: none;
}*/
.nav ul.main_navigation>li:hover {
background: #ededed;
}
.nav ul.main_navigation>li:hover>a {
color: #000;
}
.nav ul.main_navigation>li:hover .main_sub_menu {
display: block;
}
.nav ul.main_navigation>li>.main_sub_menu {
position: absolute;
top: 81px;
list-style: none;
max-width: 999px;
padding: 0;
background: #ededed;
z-index: 9;
}
.nav ul.main_navigation>li>.main_sub_menu .grid {
padding: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
max-height: 250px;
}
.column-auto {
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
}
.nav ul.main_navigation>li>.main_sub_menu .grid .column:last-child {
margin-right: 0;
}
.nav ul.main_navigation>li>.main_sub_menu .grid .col-1,
.nav ul.main_navigation>li>.main_sub_menu .grid .col-2,
.nav ul.main_navigation>li>.main_sub_menu .grid .col-3 {
padding: 10px 10px 0;
background: #fff;
border-radius: 5px;
margin-right: 10px;
}
.center {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="nav">
<ul class="main_navigation">
<li><span href="">PRODUCT</span>
<ul class="main_sub_menu sub_menu">
<div class="grid">
<div class="column col-1">
<li><span>Mobile</span>
<ul class="sub_menu">
<li><a href="">Mobile 1</a></li>
<li><a href="">Mobile 2</a></li>
<li><a href="">Mobile 3</a></li>
</ul>
</li>
</div>
<div class="column col-2 column-auto">
<li><span>Mobile</span>
<ul class="sub_menu">
<li><a href="">Mobile 1</a></li>
<li><a href="">Mobile 2</a></li>
<li><a href="">Mobile 3</a></li>
</ul>
</li>
<li><span>Mobile</span>
<ul class="sub_menu">
<li><a href="">Mobile 1</a></li>
<li><a href="">Mobile 2</a></li>
<li><a href="">Mobile 3</a></li>
</ul>
</li>
<li><span>Mobile</span>
<ul class="sub_menu">
<li><a href="">Mobile 1</a></li>
<li><a href="">Mobile 2</a></li>
<li><a href="">Mobile 3</a></li>
</ul>
</li>
</div>
</div>
</ul>
</li>
</ul>
</div>
</body>
</html>
Комментарии:
1. Вы
div
правыul
, вы не должны этого делать.2. @MaxiGui я попробовал, изменив
div
наul
иli
, но проблема все еще существует…. Вот скрипка jsfiddle.net/1cga0jro/3
Ответ №1:
Потому что перенос divs column-auto
не имеет достаточной ширины. Поэтому он не может найти ширину для автоматического создания столбцов.
Я только что добавил эти строки. Это работает, как и ожидалось.
.main_sub_menu,
.column-auto{
width: 100%; /* or you can use static width */
}
.main_sub_menu {
left: 0;
}
/* added start */
.main_sub_menu,
.column-auto{
width: 100%;
}
.main_sub_menu {
left: 0;
}
/* added end */
.nav {
background: brown;
/*@media only screen and (max-width: 1087px) {
display: none;
}*/
}
.nav ul.main_navigation {
list-style: none;
margin: 0;
max-width: 1204px;
position: relative;
}
.nav ul.main_navigation a {
text-decoration: none;
}
.nav ul.main_navigation .sub_menu {
list-style: none;
padding: 0;
}
.nav ul.main_navigation .sub_menu li {
font-size: 15px;
font-weight: bold;
line-height: 16px;
letter-spacing: 0.3px;
max-width: 213px;
}
.nav ul.main_navigation .sub_menu li .sub_menu {
list-style: none;
padding: 5px 0 18px;
}
.nav ul.main_navigation .sub_menu li .sub_menu a {
font-size: 12px;
line-height: 15px;
font-weight: normal;
color: #000;
padding-bottom: 5px;
display: block;
}
.nav ul.main_navigation>li {
display: inline-block;
font-size: 16px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.4px;
padding: 30px 10px;
margin: 0 5px;
}
.nav ul.main_navigation>li>a {
color: #fff;
}
/*.nav ul.main_navigation>li>.main_sub_menu {
display: none;
}*/
.nav ul.main_navigation>li:hover {
background: #ededed;
}
.nav ul.main_navigation>li:hover>a {
color: #000;
}
.nav ul.main_navigation>li:hover .main_sub_menu {
display: block;
}
.nav ul.main_navigation>li>.main_sub_menu {
position: absolute;
top: 81px;
list-style: none;
max-width: 999px;
padding: 0;
background: #ededed;
z-index: 9;
}
.nav ul.main_navigation>li>.main_sub_menu .grid {
padding: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
max-height: 250px;
}
.column-auto {
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
}
.nav ul.main_navigation>li>.main_sub_menu .grid .column:last-child {
margin-right: 0;
}
.nav ul.main_navigation>li>.main_sub_menu .grid .col-1,
.nav ul.main_navigation>li>.main_sub_menu .grid .col-2,
.nav ul.main_navigation>li>.main_sub_menu .grid .col-3 {
padding: 10px 10px 0;
background: #fff;
border-radius: 5px;
margin-right: 10px;
}
.center {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="nav">
<ul class="main_navigation">
<li><span href="">PRODUCT</span>
<ul class="main_sub_menu sub_menu">
<div class="grid">
<div class="column col-1">
<li><span>Mobile</span>
<ul class="sub_menu">
<li><a href="">Mobile 1</a></li>
<li><a href="">Mobile 2</a></li>
<li><a href="">Mobile 3</a></li>
</ul>
</li>
</div>
<div class="column col-2 column-auto">
<li><span>Mobile</span>
<ul class="sub_menu">
<li><a href="">Mobile 1</a></li>
<li><a href="">Mobile 2</a></li>
<li><a href="">Mobile 3</a></li>
</ul>
</li>
<li><span>Mobile</span>
<ul class="sub_menu">
<li><a href="">Mobile 1</a></li>
<li><a href="">Mobile 2</a></li>
<li><a href="">Mobile 3</a></li>
</ul>
</li>
<li><span>Mobile</span>
<ul class="sub_menu">
<li><a href="">Mobile 1</a></li>
<li><a href="">Mobile 2</a></li>
<li><a href="">Mobile 3</a></li>
</ul>
</li>
</div>
</div>
</ul>
</li>
</ul>
</div>
</body>
</html>
Комментарии:
1. На мобильном вертикальном представлении это не работает … codepen.io/Maxigui/pen/eYzgXNY
2. @MaxiGui, потому что вы используете
max-height: 250px
. Посмотрите на это i.stack.imgur.com/v6Wqu.png3. В приведенном выше коде я просто скопировал ваш код, поэтому я ничего не использую. Я просто указывал на тот факт, что на мобильных устройствах вертикально это не работает. (Я не тот, кто задает вопрос)
Ответ №2:
Я не уверен, сможете ли вы достичь своей цели, как вы это делаете, вместо этого я предлагаю вам следующее решение. Я добавил немного CSS в нижней части вашего CSS и прокомментировал / добавил некоторые .grid
. Я также удаляю класс column-auto
. Идея состоит в том, чтобы использовать flexbox.
ДЕМОНСТРАЦИЯ:
.nav {
background: brown;
/*@media only screen and (max-width: 1087px) {
display: none;
}*/
}
.nav ul.main_navigation {
list-style: none;
margin: 0;
max-width: 1204px;
position: relative;
}
.nav ul.main_navigation a {
text-decoration: none;
}
.nav ul.main_navigation .sub_menu {
list-style: none;
padding: 0;
}
.nav ul.main_navigation .sub_menu li {
font-size: 15px;
font-weight: bold;
line-height: 16px;
letter-spacing: 0.3px;
max-width: 213px;
}
.nav ul.main_navigation .sub_menu li .sub_menu {
list-style: none;
padding: 5px 0 18px;
}
.nav ul.main_navigation .sub_menu li .sub_menu a {
font-size: 12px;
line-height: 15px;
font-weight: normal;
color: #000;
padding-bottom: 5px;
display: block;
}
.nav ul.main_navigation>li {
display: inline-block;
font-size: 16px;
font-weight: bold;
line-height: normal;
letter-spacing: 0.4px;
padding: 30px 10px;
margin: 0 5px;
}
.nav ul.main_navigation>li>a {
color: #fff;
}
/*.nav ul.main_navigation>li>.main_sub_menu {
display: none;
}*/
.nav ul.main_navigation>li:hover {
background: #ededed;
}
.nav ul.main_navigation>li:hover>a {
color: #000;
}
.nav ul.main_navigation>li:hover .main_sub_menu {
display: block;
}
.nav ul.main_navigation>li>.main_sub_menu {
position: absolute;
top: 81px;
list-style: none;
max-width: 999px;
padding: 0;
background: #ededed;
z-index: 9;
}
.nav ul.main_navigation>li>.main_sub_menu .grid {
/* padding: 20px;*/ /*** COMMENTED***/
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
max-height: 250px;
max-width: unset; /** ADDED **/
}
.column-auto {
-webkit-column-count: auto;
-moz-column-count: auto;
column-count: auto;
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
}
.nav ul.main_navigation>li>.main_sub_menu .grid .column:last-child {
margin-right: 0;
}
.nav ul.main_navigation>li>.main_sub_menu .grid .col-1,
.nav ul.main_navigation>li>.main_sub_menu .grid .col-2,
.nav ul.main_navigation>li>.main_sub_menu .grid .col-3 {
padding: 10px 10px 0;
background: #fff;
border-radius: 5px;
/*margin-right: 10px;*/
}
.center {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
/***************** CSS ADDED *****************/
.col-1, .col-2{
border: 20px solid #ededed;
}
li .col-1{
border-right: none;
}
.col-2{
display: flex;
flex-wrap: wrap;
flex-direction: column;
max-height: 100%;
min-width: -webkit-fill-available;
min-width: -moz-available;
}
.col-2 li{
display:block;
margin-left: 5px;
margin-right: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="menu.css" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul class="main_navigation">
<li><span href="">PRODUCT</span>
<ul class="main_sub_menu sub_menu">
<li class="grid">
<ul class="column col-1">
<li><span>Mobile</span>
<ul class="sub_menu">
<li><a href="">Mobile 1</a></li>
<li><a href="">Mobile 2</a></li>
<li><a href="">Mobile 3</a></li>
</ul>
</li>
</ul>
<ul class="column col-2">
<li><span>Mobile</span>
<ul class="sub_menu">
<li><a href="">Mobile 1</a></li>
<li><a href="">Mobile 2</a></li>
<li><a href="">Mobile 3</a></li>
</ul>
</li>
<li><span>Mobile</span>
<ul class="sub_menu">
<li><a href="">Mobile 1</a></li>
<li><a href="">Mobile 2</a></li>
<li><a href="">Mobile 3</a></li>
</ul>
</li>
<li><span>Mobile</span>
<ul class="sub_menu">
<li><a href="">Mobile 1</a></li>
<li><a href="">Mobile 2</a></li>
<li><a href="">Mobile 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><span href="">ITEMS</span>
</li>
</ul>
</div>
</body>
</html>
Комментарии:
1. Ранее я пробовал это решение, но
flex-direction: column;
оно работает некорректно в Firefox. Как только столбец разрывается, он не расширяет ширину так же, какcolumn-count: auto;
2. @Kango это ломается в Mozilla, потому что вам нужно установить
min-width: -moz-available;
, попробуйте еще раз, сейчас. И он также корректно работает в Safari
Ответ №3:
вы можете использовать сетку отображения для coulmn auto для этого желаемого макета.
.column-auto {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 20px;
}
Это даст вам желаемый макет, который вы хотите.
Вот рабочий пример. https://jsfiddle.net/42r5wax6 /