1

Есть горизонтальное меню. Однако, мне надо сделать так, чтобы при нажатии кнопки подменю плавно выезжало, может тут нужны библиотеки JQuery, но в этом я плохо разбираюсь. И еще одна вещь: для показа меню требуется держать кнопку, как сделать так, чтобы оно сохранялось при нажатии, и уже при повторном нажатии скрывалось?

ul {
  width: 30px;
  hidth: 30px;
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 10pt;
}

li ul {
  position: relative;
  display: none;
  margin-left: 150px;
  margin-top: -25px;
}

li a {
  display: block;
  padding: 5px;
  color: #ffffff;
  border-bottom: none;
}

li a:hover {
  color: #ffe;
  background-color: #5488af;
}

li:active ul {
  display: block;
}
<ul class="menu">
  <li>
    <a class="button" style="cursor: pointer width:20px; background-color:#0000FF">
      <font color="#FFFFFF">X</font>
    </a>
    <font color="#FFFFFF"><span style="background-color: #0000FF">
	</span></font>
    <ul>
      <li><a href="linkr1.html"><span style="background-color: #0000FF">
		<font color="#FFFFFF">Ссылка </font></span> </a>
        <font color="#FFFFFF">
          <span style="background-color: #0000FF"></li> 
		</span></font>
        <ul>
          <li><a href="linkr1.html"><span style="background-color: #0000FF">
		<font color="#FFFFFF">Ссылка</font></span></a>
            <font color="#FFFFFF"><span style="background-color: #0000FF"></li>
     	</span></font>
            <ul>
              <li><a href="linkr1.html"><span style="background-color: #0000FF">
		<font color="#FFFFFF">Ссылка </font></span> </a>
                <font color="#FFFFFF">
                  <span style="background-color: #0000FF"></li>
   		</span></font>
              </li>
            </ul>
            </body

1
  • гуглите css transform или jquery animate - это самые простые способы 27 апр 2019 в 20:19

1 ответ 1

2

Можно сделать вот так, через :focus

ul {
  width: 30px;
  height: 30px;
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 10pt;

}

a ~ ul {
transition:300ms;
  transform: translate(-1000px,0);
  }

li ul {
  position: relative;
  margin-left: 150px;
  margin-top: -25px;
}

li a {
  display: block;
  padding: 5px;
  color: #ffffff;
  border-bottom: none;
}

li a:hover {
  color: #ffe;
  background-color: #5488af;
}

a:focus ~ ul {
  transform: translate(0,0);
}
<ul class="menu">
  <li>
    <a class="button" tabindex="0" style="cursor: pointer width:20px; background-color:#0000FF">
      <font color="#FFFFFF">X</font>
    </a>
    <font color="#FFFFFF"><span style="background-color: #0000FF">
	</span></font>
    <ul>
      <li><a href="linkr1.html"><span style="background-color: #0000FF">
		<font color="#FFFFFF">Ссылка </font></span> </a>
        <font color="#FFFFFF">
          <span style="background-color: #0000FF"></li> 
		</span></font>
        <ul>
          <li><a href="linkr1.html"><span style="background-color: #0000FF">
		<font color="#FFFFFF">Ссылка</font></span></a>
            <font color="#FFFFFF"><span style="background-color: #0000FF"></li>
     	</span></font>
            <ul>
              <li><a href="linkr1.html"><span style="background-color: #0000FF">
		<font color="#FFFFFF">Ссылка </font></span> </a>
                <font color="#FFFFFF">
                  <span style="background-color: #0000FF"></li>
   		</span></font>
              </li>
            </ul>
            </body


если так не устраивает можно поменять a на input type=checkbox

ul {
  width: 30px;
  height: 30px;
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 10pt;

}

label[for="button"]{
  display:block;
  width:30px;
  color:white;
}

input ~ ul {
  transition:300ms;
  transform: translate(-1000px,0);
}

li ul {
  position: relative;
  margin-left: 150px;
  margin-top: -25px;
}

li a {
  display: block;
  padding: 5px;
  color: #ffffff;
  border-bottom: none;
}

li a:hover {
  color: #ffe;
  background-color: #5488af;
}

input:checked ~ ul {
  transform: translate(0,0);
}
<ul class="menu">
  <li>
    <label for="button" style="cursor: pointer width:20px; background-color:#0000FF">X</label>
    <input type="checkbox" id="button" style="display:none"/>
    <font color="#FFFFFF"><span style="background-color: #0000FF">
	</span></font>
    <ul>
      <li><a href="linkr1.html"><span style="background-color: #0000FF">
		<font color="#FFFFFF">Ссылка </font></span> </a>
        <font color="#FFFFFF">
          <span style="background-color: #0000FF"></li> 
		</span></font>
        <ul>
          <li><a href="linkr1.html"><span style="background-color: #0000FF">
		<font color="#FFFFFF">Ссылка</font></span></a>
            <font color="#FFFFFF"><span style="background-color: #0000FF"></li>
     	</span></font>
            <ul>
              <li><a href="linkr1.html"><span style="background-color: #0000FF">
		<font color="#FFFFFF">Ссылка </font></span> </a>
                <font color="#FFFFFF">
                  <span style="background-color: #0000FF"></li>
   		</span></font>
              </li>
            </ul>
            </body

1
  • @НикитаБорискевич добавил второй сниппет 27 апр 2019 в 20:35

Ваш ответ

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

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