При наведении курсора на меню выпадающее подменю
Я пытаюсь сделать это там, где при наведении курсора на меню оно переходит в выпадение подменю, но оно не работает. Я установил высоту выпадающего меню на 0 пикселей, и при наведении курсора я хочу, чтобы оно было 650 пикселей, чтобы оно выглядело так, как будто оно перемещается вниз. Мне нужна помощь, пожалуйста.
<div class = "dropdownform">
<div class = "firstdropdown">
<div class = "firstblock">Background</div>
<div class = "firstblock">Goals</div>
<div class = "firstblock">Achievments</div>
</div>
<div class = "seconddropdown">
<div class = "secondblock">Future</div>
<div class = "secondblock">College</div>
<div class = "secondblock">Hot 50 Flyer</div>
</div>
<div class = "thirddropdown">
<div class = "thirdblock">Letter To Freshmen</div>
<div class = "thirdblock">Letter of Recommendation</div>
<div class = "thirdblock">Scholarship Essay</div>
</div>
</div>
.dropdownform {
display: flex;
flex-direction: row;
position: relative;
left: 5px;
justify-content: space-between;
margin-right: 712px;
bottom: 35px;
}
.firstdropdown {
position: relative;
width: 250px;
height: 0px;
background-color: black;
right: 2.5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
justify-content: space-around;
border-bottom-right-radius: 35px;
border-bottom-left-radius: 35px;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
overflow: hidden;
}
.seconddropdown {
position: relative;
width: 250px;
height: 0px;
background-color: black;
right: .3px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
justify-content: space-around;
border-bottom-right-radius: 35px;
border-bottom-left-radius: 35px;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
overflow: hidden;
}
.thirddropdown {
position: relative;
width: 250px;
height: 0px;
background-color: black;
left: 1.8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
justify-content: space-around;
border-bottom-right-radius: 35px;
border-bottom-left-radius: 35px;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
overflow: hidden;
}
.firstblock {
position: relative;
width: 200px;
height: 50px;
background-color: white;
border-radius: 35px;
display: flex;
justify-content: center;
align-items: center;
}
.secondblock {
position: relative;
width: 200px;
height: 50px;
background-color: white;
border-radius: 35px;
display: flex;
justify-content: center;
align-items: center;
}
.thirdblock {
position: relative;
width: 200px;
height: 50px;
background-color: white;
border-radius: 35px;
display: flex;
justify-content: center;
align-items: center;
}
.first:hover + .firstdropdown {
height: 650px;
transition: .5s ease-in-out;
}
Вот справочное изображение: изображение
Я знаю, что это может быть дубликат, но я не нашел ничего подходящего для моей ситуации.
Как насчет того, чтобы следовать хорошим руководствам, таким как этот в школах W3C?
srry не смог добавить весь код, но здесь есть .first: <section class = "mainbackground"> <div class = "mainform"> <div class = "sliderform"> <div class = "first"> First </div> <div class = "second"> Второй </div> <div class = "third"> Третий </div> </div>
@AltafAria можно ли создать jsfidde, используя весь код, который у вас есть, чтобы сделать его раскрывающимся ?, найдите jsfiddle здесь www.jsfiddle.net
есть еще кто-нибудь?
примечание сбоку: учтите, что когда вы открываете раскрывающиеся списки, увеличивая их высоту, они выталкивают остальную часть вашей страницы вниз
На данный момент я просто хочу закончить, у меня всего пара часов, лол.
поскольку .firstdropdown ur div находится не внутри, а ниже .first, используйте вместо этого jquery .mouseover или .mouseenter. код будет выглядеть примерно так: $(function(){ let x = (".first"); let c = (".firstdropdown"); $(x).mouseover(function(){ $(c).css('height', '650px'); }); $(x).mouseleave(function(){ $(c).css('height', '0'); }); });
@RamondeVries, могу я просто скопировать и вставить это, если да, куда. Srry, я очень тороплюсь.
@AltafAria, вы можете скопировать вставку и поместить ее в файл javascript или просто добавить ее в <script></script> в html, не забудьте добавить jquery lib в ur html. Обратите внимание, что с этим кодом могут возникнуть проблемы, поскольку он проверяет только, находится ли ваша мышь над x, а не над c. это означает, что при наведении курсора на раскрывающийся список он закроется, поскольку для этого нет действия при наведении курсора. только для .first
@RamondeVries Я знаю, что прошу многого, но не могли бы вы сделать так, чтобы при наведении курсора на подменю оно не закрылось. Пожалуйста, мне это нужно для школы. У меня осталось всего 3 часа, поэтому я не думаю, что смогу выучить jquery за такое короткое время. Спасибо, несмотря ни на что.
@AltafAria я стараюсь изо всех сил, обратите внимание, что мы здесь, чтобы помочь, а не писать код для вас
@AltafAria Follow this Structure сделает вашу работу. проверить это codepen.io/summitpattel/pen/QzEayp
Ответы 1
Поскольку вы сказали, что не знаете, как использовать jquery, я изменил свое решение на css, вот код:
.mainbackground {
position: absolute;
width: 100%;
height: 100%;
background-color: #1CADF8;
left: 0;
top: 0;
}
.first {
position: relative;
width: 250px;
height: 50px;
background-color: #321896;
border-radius: 35px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.second {
position: relative;
width: 250px;
height: 50px;
background-color: #321896;
border-radius: 35px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.third {
position: relative;
width: 250px;
height: 50px;
background-color: #321896;
border-radius: 35px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.mainform {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 5px 2.5px 0px 2.5px;
}
.form {
position: relative;
width: 250px;
height: 50px;
background-color: white;
border-radius: 35px;
}
.form {
display: flex;
}
.search {
position: relative;
background: transparent;
outline: none;
border: none;
top: 1px;
left: 10px;
}
.searchbutton {
display: flex;
position: relative;
width: 48px;
height: 48px;
border-radius: 35px;
background: #321896;
border: none;
outline: none;
left: 43px;
top: 1px;
justify-content: center;
align-items: center;
}
.search {
font-size: 25px;
width: 158px;
}
.loading {
position: relative;
border: 2px solid white;
width: 25px;
height: 25px;
border-radius: 35px;
border-style: dotted;
animation: test 3s infinite;
display: flex;
justify-content: center;
}
@keyframes test {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.pi {
color: white;
animation: test2 3s infinite;
padding-top: 1.5px;
}
@keyframes test2 {
0% {
transform: rotate(0deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotate(-360deg);
opacity: 0;
}
}
.logout {
position: relative;
width: 250px;
height: 50px;
background-color: #E70D0D;
border-radius: 35px;
}
.navform {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 2;
}
.sliderform {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-right: 150px;
flex: 3;
}
.dropdownform {
display: flex;
flex-direction: row;
position: relative;
left: 5px;
justify-content: space-between;
margin-right: 712px;
bottom: 35px;
}
.firstdropdown {
position: absolute;/* < new code */
top: 50px;/* < new code */
width: 250px;
height: 0px;
background-color: black;
right: 2.5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
justify-content: space-around;
border-bottom-right-radius: 35px;
border-bottom-left-radius: 35px;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
overflow: hidden;
}
.seconddropdown {
position: absolute;/* < new code */
top: 50px;/* < new code */
width: 250px;
height: 0px;
background-color: black;
right: .3px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
justify-content: space-around;
border-bottom-right-radius: 35px;
border-bottom-left-radius: 35px;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
overflow: hidden;
}
.thirddropdown {
position: absolute;/* < new code */
top: 50px;/* < new code */
width: 250px;
height: 0px;
background-color: black;
left: 1.8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
justify-content: space-around;
border-bottom-right-radius: 35px;
border-bottom-left-radius: 35px;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
overflow: hidden;
}
.firstblock {
position: relative;
width: 200px;
height: 50px;
background-color: white;
border-radius: 35px;
display: flex;
justify-content: center;
align-items: center;
color: #000;/* < new code */
}
.secondblock {
position: relative;
width: 200px;
height: 50px;
background-color: white;
border-radius: 35px;
display: flex;
justify-content: center;
align-items: center;
color: #000;/* < new code */
}
.thirdblock {
position: relative;
width: 200px;
height: 50px;
background-color: white;
border-radius: 35px;
display: flex;
justify-content: center;
align-items: center;
color: #000;/* < new code */
}
.first:hover .firstdropdown {/* < new code */
height: 650px;
transition: .5s ease-in-out;
}
.second:hover .seconddropdown {/* < new code */
height: 650px;
transition: .5s ease-in-out;
}
.third:hover .thirddropdown {/* < new code */
height: 650px;
transition: .5s ease-in-out;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel = "stylesheet" type = "text/css" href = "/css/main.css">
</head>
<body>
<section class = "mainbackground">
<div class = "mainform">
<div class = "sliderform">
<div class = "first">
<h3>
First
</h3>
<div class = "firstdropdown">
<div class = "firstblock">Background</div>
<div class = "firstblock">Goals</div>
<div class = "firstblock">Achievments</div>
</div>
</div>
<div class = "second">
<h3>Second</h3>
<div class = "seconddropdown">
<div class = "secondblock">Future</div>
<div class = "secondblock">College</div>
<div class = "secondblock">Hot 50 Flyer</div>
</div>
</div>
<div class = "third">
<h3>Third</h3>
<div class = "thirddropdown">
<div class = "thirdblock">Letter To Freshmen</div>
<div class = "thirdblock">Letter of Recommendation</div>
<div class = "thirdblock">Scholarship Essay</div>
</div>
</div>
</div>
<div class = "navform">
<div class = "form">
<input type = "text" placeholder = "#CODE" class = "search">
<a href = "main.html" class = "searchbutton">
<div class = "loading">
<div class = "pi">π</div>
</div>
</a>
</div>
<a href = "" class = "logout"></a>
</div>
</div>
</section>
</body>
</html>Вы абсолютный святой. Большое спасибо.
вы используете
.first, но нет класса с именем.first, мы пропустили какой-то код или ваш код неправильный?