#html #css
#HTML #css
Вопрос:
Я пытаюсь создать подменю в меню, однако с немного более сложным дизайном. Везде я нахожу предложения по использованию <LI> </LI> , но почему-то я не заставляю его работать. Вот изображение текущего дизайна, включая ожидаемый результат:
Я включил свой CSS / HTML-код ниже.
Пока я предполагаю , что мне придется построить еще одну часть дерева внутри третьей href . В основном замена третьего href на следующее:
<a href="#" class="menu-item">
<nav class="menu-2">
<input type="checkbox" href="#" class="menu-open-2" name="menu-open-2" id="menu-open-2"/>
<a href="#submenulinks1" target="_parent" class="menu-item-2"> </a>
<a href="#submenulinks2" target="_parent" class="menu-item-2"> </a>
<a href="#submenulinks3" target="_parent" class="menu-item-2"> </a>
</nav>
</a>
Однако простое выполнение этого испортит весь дизайн, и оригинал не будет функционировать по-прежнему. Простое переименование частей CSS с помощью ‘-2’ и путаница с координатами для элементов меню подменю не подойдет.
@import "compass/css3";
body {
background: transparent;
color: white;
text-align: center;
}
a {
color: inherit;
}
.menu-item .fa {
padding-top: 30px!important;
}
.menu-item .fa-cog {
display: none!important;
}
.menu {
filter: url('#shadowed-goo');
}
.menu-item, .menu-open-button {
background: #53C4C9;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: 0px;
position: absolute;
top: 20px;
color: white;
text-align: center; //center
//line-height: 80px!important; //negeert hij als ik m ctrl-c naar HTML blokje
transform: translate3d(0, 0, 0);
transition: transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
transition: transform 200ms;
}
.hamburger-1 {
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
transform: translate3d(0, 8px, 0);
}
.menu-open:checked .menu-open-button .hamburger-1 {
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked .menu-open-button .hamburger-2 {
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked .menu-open-button .hamburger-3 {
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 0%;
margin-left: 0px;
padding-top: 0px;
padding-left: 1%;
width: 650px;
height: 150px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
}
.menu-item:hover {
background: black;
color: #53C4C9;
}
.menu-item:nth-child(3) {
transition-duration: 180ms;
}
.menu-item:nth-child(4) {
transition-duration: 180ms;
}
.menu-item:nth-child(5) {
transition-duration: 180ms;
}
.menu-item:nth-child(6) {
transition-duration: 180ms;
}
.menu-open-button {
z-index: 2;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-duration: 400ms;
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked .menu-open-button {
transition-timing-function: linear;
transition-duration: 200ms;
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
transition-duration: 190ms;
transform: translate3d(0, 90px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
transition-duration: 290ms;
transform: translate3d(0, 190px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
transition-duration: 390ms;
transform: translate3d(0, 290px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
transition-duration: 490ms;
transform: translate3d(0, 390px, 0);
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="https://www.cyantist.nl/" target="_parent" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
<a href="#" target="_parent" class="menu-item"> </a>
<a href="#" target="_parent" class="menu-item"> <i class="fa fa-music"></i> </a>
<a href="#" target="_parent" class="menu-item"> <i class="fa fa-envelope"></i> </a>
</nav>
<!-- filters -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="shadowed-goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
<feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2" result="shadow" />
<feOffset in="shadow" dx="1" dy="1" result="shadow" />
<feComposite in2="shadow" in="goo" result="goo" />
<feComposite in2="goo" in="SourceGraphic" result="mix" />
</filter>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feComposite in2="goo" in="SourceGraphic" result="mix" />
</filter>
</defs>
</svg>
<style>
</style> Есть предложения, чего мне здесь не хватает?
Ответ №1:
Добавлены следующие стили
.submenu-item {
right: 0;
display: none;
}
.menu-item:hover .submenu-item {
display: block;
right: -92px;
transition-property: margin-left;
transition-duration: 9s;
}
.submenu-item {
background: #53C4C9;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: 98px;
position: absolute;
top: 0;
/* left: 98px; */
color: white;
text-align: center;
line-height: 80px !important;
transform: translate3d(0, 0, 0);
transition: transform ease-out 200ms;
}
А также следующий html:
<a href="#" target="_parent" class="menu-item">
<div target="_parent" class="submenu-item">submenu</div>
</a>