Всплывающее меню без использования js

emperio · July 22, 2012

??<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<meta name="description" content="" />
<meta name="keywords" content="" />

<style type="text/css">
.tt span {
	display			: none; 
	padding			: 2px 3px; 
	margin-left		: 8px; 
}
.tt:hover span {
	background:#fafafa;
	border:1px solid #7d8891;
	color:#000;
	display			: inline; 
	position		: absolute; 
	padding:1px 3px 1px 3px;
	font-size:11px;
	cursor:pointer;
	text-decoration:none;

}
.chat{border: 1px #d6e0e7 solid;padding:3px;background:#ffffff;height:138px;overflow: auto;text-align: left;font:11px arial, sans-serif;color:#000000;word-wrap: break-word;}
.chat div{font:11px arial, sans-serif;color:#000000;}
.chat b{font:11px arial, sans-serif;color:#000000;font-weight: bold}
</style>

</head>
<body style="padding:17px 5% 0px 5%">

<div class="chat">

<div style="white-space:pre-wrap">

<div><span class="tt"><b class="cht0">Блок 1</b><span class="tt1">меню 1</span></span>В детстве Питер Паркер был оставлен своими родителями, и поэтому воспитывался дядей и тётей. Шли годы, Питер был обычным примерным школьником, подвергался нападкам хулиганов и был влюблён в свою одноклассницу Гвен Стэйси, которая сама втайне отвечала ему взаимностью. Но после укуса генетически изменённого паука, Питер получает невероятные сверхспособности и его жизнь меняется навсегда.

Однако его не перестаёт мучить вопрос о том, что случилось с его родителями. Он знакомится с давним другом и партнёром своего отца — генетиком Куртом Коннорсом, который вместе с отцом Питера разрабатывал формулу регенерации. Питер помогает её закончить, а Коннорс, всю жизнь мечтавший восстановить свою правую руку, вводит формулу себе и становится Ящером. Осознавая свою вину, Питер начинает новую жизнь в образе таинственного супергероя Человека-паука и становится грозой преступников, одновременно пытаясь найти способ остановить Коннорса.</div>

<div><span class="tt"><b class="cht0">Блок 2</b><span class="tt1">меню 2</span></span>> После приключений под землей прошло семь лет. Случился дрейф континентов. Главные герои мультфильма, отделённые от стада, вынуждены использовать айсберг в качестве плота. Они пересекают океан и попадают в неизвестные им ранее земли с экзотическими животными и пиратами, враждебно настроенными к ним. Скрэту удаётся получить свой жёлудь, но он перемещается в новые для него земли.</div><br/><br/></div>

<div><span class="tt"><b class="cht0">Блок 3</b><span class="tt1">меню 3</span></span>В детстве Питер Паркер был оставлен своими родителями, и поэтому воспитывался дядей и тётей. Шли годы, Питер был обычным примерным школьником, подвергался нападкам хулиганов и был влюблён в свою одноклассницу Гвен Стэйси, которая сама втайне отвечала ему взаимностью. Но после укуса генетически изменённого паука, Питер получает невероятные сверхспособности и его жизнь меняется навсегда.

Однако его не перестаёт мучить вопрос о том, что случилось с его родителями. Он знакомится с давним другом и партнёром своего отца — генетиком Куртом Коннорсом, который вместе с отцом Питера разрабатывал формулу регенерации. Питер помогает её закончить, а Коннорс, всю жизнь мечтавший восстановить свою правую руку, вводит формулу себе и становится Ящером. Осознавая свою вину, Питер начинает новую жизнь в образе таинственного супергероя Человека-паука и становится грозой преступников, одновременно пытаясь найти способ остановить Коннорса.</div>

<div><span class="tt"><b class="cht0">Блок 4</b><span class="tt1">меню 4</span></span>> После приключений под землей прошло семь лет. Случился дрейф континентов. Главные герои мультфильма, отделённые от стада, вынуждены использовать айсберг в качестве плота. Они пересекают океан и попадают в неизвестные им ранее земли с экзотическими животными и пиратами, враждебно настроенными к ним. Скрэту удаётся получить свой жёлудь, но он перемещается в новые для него земли.</div><br/><br/></div>
</div>

</body>
</html>

Пытаюсь сделать всплывающее меню без использования javascript. Написал вышеприведенный код.

Всплывающий элемент имеет позицию absolute, а родительский relative.

В документации написано "Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.", однако у меня почему-то это не так. Я прокручиваю родительский объект, а всплывающий объект остается на месте, хотя должен быть всегда рядом с родительским.

Искал в инете, о такой ошибке нигде не сообщается. По логике при position: absolute позиция должна вычисляться динамически, иначе получается явное нарушение стандарта...

Что в моем коде неправильно?

SilentImp · July 22, 2012

Код вызывает в мозгу выражение «многабукав».

Скопировал в jsfiddler. Что ты хотел получить не понятно. Соответственно непонятна и проблема.

http://jsfiddle.net/zKE4j/ — вот код простого purecss меню. Помедитируй над ним, возможно на тебя снизойдет озарение. Или даже голый грек в ванной который что то там нашел. Хотя что можно найти голому в ванной?

Edited July 22, 2012 by SilentImp

Sign In

Всплывающее меню без использования js

Question

emperio

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

SilentImp

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information