06.10.2013 14:27:45 Выдвигающееся меню Сообщение #1
Дмитрий184
Мастер
Дата регистрации:
29.06.2012 08:48:56
Сообщений: 225
Здравствуйте!
Я сделал меню на CSS. При наведении на пункт "Второй" - справа появляется подменю. Подменю появляется резко, т.е. его не было, а потом оно сразу появилось. А как можно сделать, чтобы подменю плавно выезжало слева на право? Можно это сделать на одном CSS или надо подключить какой-то скрипт?
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style type="text/css">
ul {
list-style: none;
padding: 0;
width: 150px;
}
li {
position: relative;
cursor: pointer;
}
span {
display: block;
border: 1px solid #00f;
padding: 10px 30px;
}
#submenu {
display: none;
}
#main-menu li:hover #submenu {
display: block;
position: absolute;
left: 150px;
top: 0;
}
</style>
</head>
<body>
<ul id="main-menu">
<li>
<span>Первый</span>
</li>
<li>
<span>Второй</span>
<ul id="submenu">
<li>
<span>1 Пункт</span>
</li>
<li>
<span>2 Пункт</span>
</li>
<li>
<span>3 Пункт</span>
</li>
</ul>
</li>
<li>
<span>Третий</span>
</li>
</ul>
</body>
Я сделал меню на CSS. При наведении на пункт "Второй" - справа появляется подменю. Подменю появляется резко, т.е. его не было, а потом оно сразу появилось. А как можно сделать, чтобы подменю плавно выезжало слева на право? Можно это сделать на одном CSS или надо подключить какой-то скрипт?
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style type="text/css">
ul {
list-style: none;
padding: 0;
width: 150px;
}
li {
position: relative;
cursor: pointer;
}
span {
display: block;
border: 1px solid #00f;
padding: 10px 30px;
}
#submenu {
display: none;
}
#main-menu li:hover #submenu {
display: block;
position: absolute;
left: 150px;
top: 0;
}
</style>
</head>
<body>
<ul id="main-menu">
<li>
<span>Первый</span>
</li>
<li>
<span>Второй</span>
<ul id="submenu">
<li>
<span>1 Пункт</span>
</li>
<li>
<span>2 Пункт</span>
</li>
<li>
<span>3 Пункт</span>
</li>
</ul>
</li>
<li>
<span>Третий</span>
</li>
</ul>
</body>
