#html #css #flexbox
#HTML #css — код #гибкий ящик
Вопрос:
Я пытаюсь создать горизонтальную навигационную панель с логотипом слева и пунктами меню справа от навигационной панели. Я могу найти базовую настройку для этого, но чего я не могу найти, так это как создавать подменю из некоторых родительских ссылок: (вот что у меня есть до сих пор, я вроде как новичок — поэтому, пожалуйста, если можете, будьте нежны k 🙂
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: green;
}
header {
height: 100px;
background-color: white;
padding: 10px 0;
}
.menu-wrap {
display: flex;
justify-content: space-between;
padding: 0 15px;
}
.logo-img {
height: 79px;
}
.menu-icon {
font-size: 2.4em;
color: #ffffff;
line-height: 50px;
}
nav {
position: absolute;
background-color: #3D4852;
top: 70px;
left: 0;
width: 100%;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 0 15px;
}
nav ul li a {
display: inline-block;
padding: 12px;
/* Add your custom styles below to change appearance of links */
color: black;
text-decoration: none;
letter-spacing: 0.05em;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
#checkbox {
display: none;
}
#checkbox:checked~nav ul {
max-height: 200px;
padding: 15px 0;
transition: all 0.5s;
}
@media (min-width: 768px) {
.menu-icon {
display: none;
}
nav {
position: relative;
top: -10px;
background-color: transparent;
}
nav ul {
max-height: 70px;
padding: 15px 0;
text-align: right;
}
nav ul li {
display: inline-flex;
padding-left: 20px;
}
<header class="menu">
<div class="menu-wrap">
<img src="logoHOLD.gif" class="logo-img" alt="Logo">
<input type="checkbox" id="checkbox">
<label for="checkbox"><i class="fa fa-bars menu-icon"></i></label>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Topics</a>
<ul>
<li><a href="#">Item One</a>
<li><a href="#">Item Two</a>
<li><a href="#">Item Three</a>
</ul>
</li>
<li><a href="#">Commentaries</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Something</a></li>
</ul>
</nav>
</div>
</header>
Ответ №1:
Что вам нужно сделать, это назначить класс или идентификатор родительскому ul, у которого есть другой ul, который вы хотите отобразить в виде выпадающего списка, и присвоить ему относительное положение. Затем укажите дочернему элементу ul (выпадающий элемент) абсолютное позиционирование и поиграйте со значениями transform / top / opacity. Это один из способов сделать это.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: green;
}
header {
height: 100px;
background-color: white;
padding: 10px 0;
}
.menu-wrap {
display: flex;
justify-content: space-between;
padding: 0 15px;
}
.logo-img {
height: 79px;
}
.menu-icon {
font-size: 2.4em;
color: #ffffff;
line-height: 50px;
}
nav {
position: absolute;
background-color: #3D4852;
top: 70px;
left: 0;
width: 100%;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 0 15px;
}
nav ul li a {
display: inline-block;
padding: 12px;
/* Add your custom styles below to change appearance of links */
color: black;
text-decoration: none;
letter-spacing: 0.05em;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
#checkbox {
display: none;
}
#checkbox:checked~nav ul {
max-height: 200px;
padding: 15px 0;
transition: all 0.5s;
}
@media (min-width: 768px) {
.menu-icon {
display: none;
}
nav {
position: relative;
top: -10px;
background-color: transparent;
}
nav ul {
max-height: 70px;
padding: 15px 0;
text-align: right;
}
nav ul li {
display: inline-flex;
padding-left: 20px;
}
.dd-parent {
position: relative;
}
.dd-list {
position: absolute;
top: 25px;
left: 0;
width: 100%;
transform: scaleY(0);
opacity: 0;
transition: .3s all ease;
transform-origin: top;
}
.dd-list li {
text-align: left;
background: DarkOrchid;
color: white;
}
.dd-list li:not(:first-of-type) {
border-top: 2px solid black;
}
.dd-parent:hover > .dd-list {
transform: none;
opacity: 1;
}
<header class="menu">
<div class="menu-wrap">
<img src="logoHOLD.gif" class="logo-img" alt="Logo">
<input type="checkbox" id="checkbox">
<label for="checkbox"><i class="fa fa-bars menu-icon"></i></label>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="dd-parent"><a href="#">Topics</a>
<ul class="dd-list">
<li><a href="#">Item One</a>
<li><a href="#">Item Two</a>
<li><a href="#">Item Three</a>
</ul>
</li>
<li><a href="#">Commentaries</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Something</a></li>
</ul>
</nav>
</div>
</header>
Комментарии:
1. хорошо, спасибо @Yerme — я смотрю на то, что вы предложили, и попытаюсь это реализовать — я никогда не думал, что сделать это будет так сложно! Я попытался поддержать предложенное вами решение, но они говорят мне, что у меня еще недостаточно очков ?!
2. Нет проблем, я надеюсь, что решение сработает для вас.
3. ваше решение сработало потрясающе, и после того, как я выяснил, что мое ядро было во многом испорчено, и переделал все это, теперь оно работает потрясающе! Спасибо!
4. рад, что смог помочь!