Всплывающий/выпадающий слой без JS

Sserg-135 · October 23, 2008

Реально ли сделать такой слой использую только CSS свойства?

Для уточнения: чтобы при клике на ссылку, под ней (или рядом) открылось "окошко" -слой, но не сдвигая вниз уже ранее выведенные элементы, как это происходит при использовании свойств display:none display block или visibilety.

Просмотрев много топиков по сходным вопросам, видел только решения с явскими скриптами.

rus · October 23, 2008

Реально ли сделать такой слой использую только CSS свойства?
Для уточнения: чтобы при клике на ссылку, под ней (или рядом) открылось "окошко" -слой, но не сдвигая вниз уже ранее выведенные элементы, как это происходит при использовании свойств display:none display block или visibilety.
Просмотрев много топиков по сходным вопросам, видел только решения с явскими скриптами.

а нужно что бы именно при клике, или при наведении тоже можно?

Если именно при наведении то на css так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS tooltips - всплывающие подсказки только с помощью CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
body{
margin:20px 100px;
font: normal 12px Verdana;
}
a.tt:hover{
position:relative;
z-index:2;
}
a.tt span{
display:none;
}
a.tt:hover span{
display:block;
position:absolute;
top:20px;
left:150px;
background:#fafafa;
border:1px solid #ccc;
color:#000;
z-index:1;
width:200px;
padding:5px;
font-size:11px;
cursor:pointer;
text-decoration:none;
}
</style>
</head>
<body>
<ul>
	<li><a class="tt" href="#">Какая то там ссылка<span>Пояснение смысла этой ссылки или просто какое-то инфо</span></a></li>
</ul> 
</body>
</html>

А при клике - это по моему уже событие (если не ошибаюсь), надо на js.

Edited October 23, 2008 by rus

hmelii · October 23, 2008

Ни кого не слушай Реально!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
a{ position:relative; cursor:pointer; display:inline-block;}
a:focus span{display:block;}

a span{display:none; left:0; top:100%; position:absolute; background:green; border:1px solid red; color:#fff;}
a:active span{ display:block;}

</style>
</head>

<body>
<div>
<a href="#">


Кликаем чтоб увидеть скрытый слой!
<!--[if lte IE 7]><table><tr><td><![endif]-->
<span>скрытый слой</span>
<!--[if lte IE 7]></td></tr></table><![endif]-->
</a>
</div>
<div>cлой ниже следующий</div>
</body>
</html>

Посетить мою домашнюю страницу

Edited October 23, 2008 by hmelii

Victor Ananiev · October 23, 2008

Ни кого не слушай

Хм, за такое и бан можно получить....

Sserg-135 · October 23, 2008

а нужно что бы именно при клике, или при наведении тоже можно?

Если именно при наведении то на css так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS tooltips - всплывающие подсказки только с помощью CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
body{
margin:20px 100px;
font: normal 12px Verdana;
}
a.tt:hover{
position:relative;
z-index:2;
}
a.tt span{
display:none;
}
a.tt:hover span{
display:block;
position:absolute;
top:20px;
left:150px;
background:#fafafa;
border:1px solid #ccc;
color:#000;
z-index:1;
width:200px;
padding:5px;
font-size:11px;
cursor:pointer;
text-decoration:none;
}
</style>
</head>
<body>
<ul>
	<li><a class="tt" href="#">Какая то там ссылка<span>Пояснение смысла этой ссылки или просто какое-то инфо</span></a></li>
</ul> 
</body>
</html>

А при клике - это по моему уже событие (если не ошибаюсь), надо на js.

Это не совсем то, мне надо чтобы после того как скрытый слой появился - на него можно было наводить мышью и щелкать ссылки, которые расположеы в нем. А в этом коде слой пропадает, после сдвига мыши с сылки

Ни кого не слушай Реально!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
a{ position:relative; cursor:pointer; display:inline-block;}
a:focus span{display:block;}

a span{display:none; left:0; top:100%; position:absolute; background:green; border:1px solid red; color:#fff;}
a:active span{ display:block;}

</style>
</head>

<body>
<div>
<a href="#">


Кликаем чтоб увидеть скрытый слой!
<!--[if lte IE 7]><table><tr><td><![endif]-->
<span>скрытый слой</span>
<!--[if lte IE 7]></td></tr></table><![endif]-->
</a>
</div>
<div>cлой ниже следующий</div>
</body>
</html>

Посетить мою домашнюю страницу

ммм.... работает ... И можно позицировать?

Правда как-то ненадежно и через раз. Честно говоря принцип не очень понял

Edited October 23, 2008 by Sserg-135

Victor Ananiev · October 23, 2008

если уж так надо юзай пхп, или фреймы плавающие.

hmelii · October 24, 2008

Я тебе предложил идею Я за тебя твою работу делать не буду Если тебе надо то код можно заточить и спозиционировать до совершентсва Все там работает четко !

Sserg-135 · October 24, 2008

Я тебе предложил идею Я за тебя твою работу делать не буду Если тебе надо то код можно заточить и спозиционировать до совершентсва Все там работает четко !

За идею огромное спасибо, бум мастерить и доробатывать

vvsh · October 24, 2008

Это лучше сделать на jquery, очень удобно.

mini · October 24, 2008

ну на сколько я понял это нужно использвать табы, так что ищи литературу про табы

Edited October 24, 2008 by mini

rash · October 24, 2008

:focus напрашивался сам собой, но по моему скромному мнению это изврат поболее, чем использование Javascript для этой цели.

Sign In

Всплывающий/выпадающий слой без JS

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information