Есть горизонтальное меню. Однако, мне надо сделать так, чтобы при нажатии кнопки подменю плавно выезжало, может тут нужны библиотеки 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
css transform
илиjquery animate
- это самые простые способы