28172 sujets

CSS et mise en forme, CSS3

Mouvement d'un menu en CSS

j'ai fait un menu qui est attaché a mes page web.

www.dovelakeglobal.com/test.html

ce que je n'arrive pas a faite est :

qaund l'utilisateur descend avec l'ascenseur et et que le menu arrive en haut de la page.
c'est que le menu descende en même temps pour, le but est d'avoir tous les thème possible que le visiteur soit en haut ou bas de page.
 
a {
	text-decoration: none;
}
a:hover {
}
p{
	font-size: 18px;
	text-align: justify;
	font-family: "Comic Sans MS";
	font-style: italic;
}
 
ul#navmenu, ul#navmenu li, ul#navmenu ul {
	margin: 0;
	border: 0 none;
	padding: 0;
	width: 160px; /*For KHTML*/
	list-style: none;
}
ul#navmenu li {
	display: block !important; /*For GOOD browsers*/
	display: inline; /*For IE*/
	position: relative;
}
/* Root Menu */
ul#navmenu a {
	border: 1px solid #FFF;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	padding: 0 6px;
	display: block;
	text-decoration: none;
	height: auto !important;
	height: 100%; /*For IE*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 22px;
	font-weight: bold;
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a {
	background-image: url(../images/img-menu.gif);
}
/* 2nd Menu */
ul#navmenu li:hover li a, ul#navmenu li.iehover li a {
 
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a {
 
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a {
 
}
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a {
	background: #CCC;
	color: #FFF;
}
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a, ul#navmenu li.iehover li.iehover li.iehover li a {
	background: #EEE;
	color: #666;
}
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover, ul#navmenu li.iehover li.iehover li.iehover li a:hover {
	background: #CCC;
	color: #FFF;
}
ul#navmenu ul, ul#navmenu ul ul, ul#navmenu ul ul ul {
	display: none;
	position: absolute;
	top: 0;
	left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul {
	display: none;
}
ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul {
	display: block;
}
en fin de compte il faut que je fasse du java script mais ce que j'ai fait ne fonctionne toujous pas

<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

  <div id="sidebar1">
    <!-- mise en plece du menu -->
    <ul id="navmenu">
      <li><a href="index.html">    HOME PAGE</a></li>
      <li><a href="#">    Children's Page</a>
      <ul>
      	 <li><a href="#">Children Of Dove Lake</a></li>
          <li><a href="#">Pen Pals</a></li>
           <li><a href="#">Smiles & Fun Page</a></li>
           </ul>
      </li>
      <li><a href="#">    Housing</a></li>
      <li><a href="#">    Education</a>
<!-- meme schema jusqu'a a fin des menu -->
</div>

</layer>


<script type="text/javascript">

var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
	var startX = 3,
	startY = 150;
	var ns = (navigator.appName.indexOf("Netscape") != -1);
	var d = document;
	function ml(id)
	{
		var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
		if(d.layers)el.style=el;
		el.sP=function(x,y){this.style.left=x;this.style.top=y;};
		el.x = startX;
		if (verticalpos=="fromtop")
		el.y = startY;
		else{
		el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		el.y -= startY;
		}
		return el;
	}
	window.stayTopLeft=function()
	{
		if (verticalpos=="fromtop"){
		var pY = ns ? pageYOffset : document.body.scrollTop;
		ftlObj.y += (pY + startY - ftlObj.y)/8;
		}
		else{
		var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
		ftlObj.y += (pY - startY - ftlObj.y)/8;
		}
		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 10);
	}
	ftlObj = ml("divStayTopLeft");
	stayTopLeft();
}
JSFX_FloatTopDiv();
</script>
Sujet clos
Aller à