1

Необходимо сделать чтобы был изображен круг, при наведении на который открывалось выпадающее меню с текстом. Буду рад любой подсказке.

.maindiv{
  background-color: #78a2b7;
  height: auto;
  margin: 5px;
  border-radius: 40px 10px 40px 40px;
}
#maindiv_1{
  width: 25%;	
  float:left;	
}
#ul_1{
  background-color: #0000FF;
  width: 6%;
  height: 3%;
  overflow: hidden;
  border-radius: 40px 40px 40px 40px;
  transition: 5s; 
}
#ul_1:hover{
  width: 100%;
  height: 35%;
  display: list-item;
  transition: 5s;
  border-radius: 40px 10px 40px 40px;
  border-bottom-width: 7px;
}
<div id='maindiv_1' class='maindiv'>
  <div id='ul_1'>
    <ul>
      <li>Номер один</li>
      <li>Номер два</li>
      <li>Номер три</li>
    </ul>
  </div>
</div>

2
  • а что не работает? кроме того что это не круг 22 окт 2018 в 16:45
  • всё работает, нужен только круг) 22 окт 2018 в 16:46

3 ответа 3

1

ul {
  margin: 0;
  padding: 0;
  line-height: 1.5em;
  width: 4.5em;
  height: 4.5em;
  overflow: hidden;
  background: blue;
  border-radius: 2.25em;
  white-space: nowrap;
  color: transparent;
  transition: 3s;
}

ul:hover {
  width: 100%;
  border-radius: 2.25em 10px 2.25em 2.25em;
  color: white;
}

li {
  padding-left: 2.25em;
}
<ul>
  <li>Номер один</li>
  <li>Номер два</li>
  <li>Номер три</li>
</ul>

1
  • всё правильно, только при наведении менюшка должна выпадать вправо и вниз 22 окт 2018 в 17:10
0

Это похоже на круг

.maindiv{
  background-color: #78a2b7;
  height: 200px;
  margin: 5px;
  border-radius: 50%;
  width: 200px;	
  float:left;
}
#ul_1{
  background-color: #0000FF;
  width: 6%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  transition: 5s; 
}
#ul_1:hover{
  width: 100%;
  height: 100%;
  display: list-item;
  transition: 5s;
  border-radius: 50%;
  border-bottom-width: 7px;
}
<div id='maindiv_1' class='maindiv'>
  <div id='ul_1'>
    <ul>
      <li>Номер один</li>
      <li>Номер два</li>
      <li>Номер три</li>
    </ul>
  </div>
</div>

0

Всем спасибо за помощь, в итоге получилось следующее...

HTML

<ul> 
<li id='li_1'>Произвольный текст 1</li> 
<li id='li_2'>Произвольный текст 2</li> 
<li id='li_3'>Произвольный текст 3</li> 
</ul> 

CSS

body{
    background-color: #e6e6fa;
}
@keyframes traffic{
 100%{color: white;}
}
#div_1{
    width: 3%;
    height: 3%;
    background-color: blue;
    color: blue;
    overflow: hidden;
    border-radius: 20px;
    transition-property: width, height;
    transition-delay: 0s, 2s;
    transition-duration: 2s, 3s;    
}
#div_1:hover{
    width: 30%;
    height: 30%;
    border-radius: 20px;
    display: list-item;
    transition-property: width, height;
    transition-delay: 0s, 2s;
    transition-duration: 2s, 3s;
}
#div_1:hover #li_1{
    animation: traffic 5s 5s forwards;
}
#div_1:hover #li_2{
    animation: traffic 5s 7s forwards;
}
#div_1:hover #li_3{
    animation: traffic 5s 9s forwards;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.