28172 sujets

CSS et mise en forme, CSS3

Header autorétractable

Bonjour,

J'ai construit mes pages XHTML avec l'architecture suivante :

<div id="header">
</div>
<div id="menusbar">
   <ul>
      <li>...</li>
      <li>...</li>
      ...
   </ul>
</div>
<div id="main">
...
</div>
<div id="footer">
...
</div>


l'élèment menusbar occupe toute la largeur de l'écran et l'élément ul s'affiche dans le sens de la largeur et représente un menu du même genre que celui de developpez.com

j'ai écrit des fonctions javascript pour rétracter ou rendre visible le header
Ces fonctions sont appelées sur les évènements du menusbar :
<div id="menusbar" onmouseover="ShowHeader();" onmouseout="HideHeader();">


Ci dessous le code grossier du rétract :
function HideHeader()
{
        if(header.offsetTop + header.offsetHeight > 0)
       {
						header.style.marginTop = header.offsetTop - 1;
	timerHeader = setTimeout("HideHeader()", 20);
       }
       else
	clearTimeout(timerHeader);
}


Je souhaite que ShowHeader et HideHeader ne soient pas appelées lorsque l'utilisateur clique sur une menu (l'élément ul) et que donc ces fonctions ne soient appelées que lorsque la souris se trouve sur le div menusbar non recouvert par le ul?
Comment faire? Faut-il ajouter un div après le ul pour créer la zone sensible?

Merci pour votre aide
Imaginons :

<div> contient un <ul>. Si on passe la souris sur <div>, alors <h1> s'affiche. Le but serait que si on passe la souris sur <ul>, <h1> disparaisse, même si <ul> est dans <div> (et donc que div.onmouseover, qui fait apparaître <h1>, soit de mise).

J'ai essayé divers trucs, et on dirait bien que si on agit sur la même propriété, par exemple la propriété "display", ce soit impossible :
div.onmouseover = function() { h1.style.display = 'block' }
ul.onmouseover = function() { h1.style.display = 'none' } // ne fait pas apparaître le h1


En revanche, on peut agir sur d'autres propriétés, et donc je pense que tu peux feinter pour obtenir ce que tu veux. Par exemple, on peut passer h1 en visible:hidden, et height:0 pour le faire "disparaître" d'une autre manière que display:none.

À toi de bidouiller pour arriver à tes fins.

Personnellement, voici ce que j'ai (à copier-coller dans un test.html) :
<!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" lang="fr" xml:lang="fr">
	<head>
		<title>Page</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<script type="text/javascript">
		<!--
		window.onload = function()
		{
			var h1 = document.getElementById('h1');
			h1.style.display = 'none';
			
			var div = document.getElementById('div');
			var ul = div.getElementsByTagName('ul')[0];
			
			ul.onmouseover = function()
			{
				h1.style.visibility = 'hidden';
				h1.style.height = 0;
			}
			ul.onmouseout = function()
			{
				h1.style.visibility = 'visible';
				h1.style.height = '100px'; // même valeur que la hauteur de #h1 définie dans le CSS
			}
			div.onmouseover = function()
			{
				h1.style.display = 'block';
			}
			div.onmouseout = function()
			{
				h1.style.display = 'none';
			}
		}
		-->
		</script>
		<style type="text/css">
		<!--
		#div
		{
			background: yellow;
			padding: 3em;
		}
		#div ul
		{
			background: skyblue;
		}
		#h1
		{
			background: red;
			height: 100px;
		}
		-->
		</style>
	</head>
	<body>
	<div id="div">
		<ul>
			<li>Element</li>
			<li>Element</li>
			<li>Element</li>
			<li>Element</li>
		</ul>
	</div>
	<h1 id="h1">Hide</h1>
	<p>Nec piget dicere avide magis hanc insulam populum Romanum invasisse quam iuste. Ptolomaeo enim rege foederato nobis et socio ob aerarii nostri angustias iusso sine ulla culpa proscribi ideoque hausto veneno voluntaria morte deleto et tributaria facta est et velut hostiles eius exuviae classi inpositae in urbem advectae sunt per Catonem, nunc repetetur ordo gestorum.</p>
	</body>
</html>

Modifié par Oracle (05 Nov 2009 - 03:28)
On dirait bien que le forum a un bug avec mon message.


Ah non je crois que c'était moi le bug. Smiley edit Modifié par Oracle (05 Nov 2009 - 03:29)[/edit]
Le problème est que dans un cas je veux appeler la fonction et dans l'autre cas je ne veux rien faire et le code suivant ne marche pas Smiley biggol 

<div id="menusbar" onmouseover="DisplayHeader(true);" onmouseout="DisplayHeader(false);">
   <ul onmouseover="function(){}" onmouseout="function(){}">
      <li>...</li>
      <li>...</li>
      ...
   </ul>
</div>


Donc je cherche une solution pour mettre une zone sensible après le ul

<div id="menusbar">
   <ul>
      <li>...</li>
      <li>...</li>
      ...
   </ul>
   <div id="zonesensible" onmouseover="DisplayHeader(true);" onmouseout="DisplayHeader(false);">&nbsp</div>
</div>

Mais comment faire pour dire à "zonesensible" d'utiliser toute la largeur restante après le ul? car tel quel il se place dessous Smiley bawling
Modifié par lhoudusse (05 Nov 2009 - 16:13)
Sujet clos
Aller à