SwitchMenu 2 RollOver
Hi there, my first post here
I've been coding in css a web site and they wanted a Dynamic Menu non-flash based. Then I saw that nice http://www.dynamicdrive.com/dynamici...witchmenu2.htm on this web site.
I had to modify the code so when the menu drop down, 3 other div get down too.
THE PROBLEM IS: The top menu are link to other page, so when the user click on the menu to drop it down, a new page apear...
I am asking to get a rollOver event instead of the click to drop the menu. This way the user should be able to navigate thru the entire page.
Optional: Is it possible to load a page and is apropriate section goes automaticly extend?
http://wws.soluxd.com/ide (under construction)
Here's the JS Script:http://wws.soluxd.com/ide/menu.js
and Here's the html code on the page:PHP Code:/************************************************************************
Author: Eric Simmons
Contact: info@jswitch.com
Website: http://www.jswitch.com
Version: 1.0 4/2005
Browser Target: Mozilla 6+/FireFox Netscape 6+, IE 5.0+
Type : XP style sliding dropdown menus (aka Switch Menu II on Dynamicdrive.com)
Note: Modification by Dynamicdrive.com to dynamically determine sub menus widths
DISCLAIMER:
THIS SOFTWARE IS PROVIDED "AS IS" AND WITHOUT
ANY EXPRESS OR IMPLIED WARRANTIES, JSWITCH.COM
IS NOT RESPONSIBLE FOR ANY ADVERSE AFFECTS TO
YOUR COMPUTER OR SYSTEMS RUNNING THIS SCRIPT.
LICENSE:
YOU ARE GRANTED THE RIGHT TO USE THE SCRIPT
PERSONALLY OR COMMERCIALLY. THE AUTHOR, WEBSITE LINKS
AND LICENSE INFORMATION IN THE HEADER OF THIS SCRIPT
MUST NOT BE MODIFIED OR REMOVED.
v 1.0
XP style sliding Menu Bar
MODIFIED BY FRANCIS FONTAINE
CONTACT ME AT: FRANCISFONTAINE@GMAIL.COM FOR INFO.
***********************************************************************/
var TIMER_SLIDE = null;
var OBJ_SLIDE;
var OBJ_VIEW;
var PIX_SLIDE = 10; //this is the amount of slide/DELAY_SLIDE
var NEW_PIX_VAL;
var DELAY_SLIDE = 30; //this is the time between each call to slide
var DIV_HEIGHT = 22; //value irrelevant
var SUB_MENU_NUM =0;
var RE_INIT_OBJ = null;
var bMenu = document.getElementById("curMenu");
var MainDiv,SubDiv
//Francis Fontaine added Variable
var OBJ_MENUCONTENT_HEIGHT = 120;
var OBJ_MENU_17_TOP = 434;
var OBJ_MENUTEXT_TOP = 457;
//DD added code
document.write('<div id="tempcontainer" class="mainDiv" style="visibility: hidden; position: absolute"></div>')
function Init(objDiv)
{
if (TIMER_SLIDE == null)
{
SUB_MENU_NUM = 0;
MainDiv = objDiv.parentNode;
SubDiv = MainDiv.getElementsByTagName("DIV").item(0);
SubDiv.onclick = SetSlide;
OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1)
OBJ_VIEW = OBJ_SLIDE.getElementsByTagName("DIV").item(0);
//Francis Fontaine Modified Code Begin
OBJ_MENUCONTENT = document.getElementById("menuContent");
OBJ_MENU_17 = document.getElementById("menu_17");
OBJ_MENUCALENDAR = document.getElementById("menuCalendar");
OBJ_MENUTEXT = document.getElementById("menuText");
//Initialize (if not) heigh and top value
if(!OBJ_MENUCONTENT.style.height){OBJ_MENUCONTENT.style.height = OBJ_MENUCONTENT_HEIGHT + "px";}
if(!OBJ_MENU_17.style.top){OBJ_MENU_17.style.top = OBJ_MENU_17_TOP + "px";}
if(!OBJ_MENUTEXT.style.top){OBJ_MENUTEXT.style.top = OBJ_MENUTEXT_TOP + "px";}
//Francis Fontaine Modified Code End
document.getElementById("tempcontainer").innerHTML=MainDiv.getElementsByTagName("DIV").item(2).innerHTML //DD added code
DIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight //DD added code
for (i=0;i<OBJ_VIEW.childNodes.length;i++)
{
if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN")
{
SUB_MENU_NUM ++;
OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle;
OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle;
}
}
NEW_PIX_VAL = parseInt(MainDiv.getAttribute("state"));
}
}
function SetSlide()
{
if (window.TIMER_SLIDE) {
clearInterval(TIMER_SLIDE);
}
if (TIMER_SLIDE == null && this.parentNode == MainDiv){
TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
} else {
RE_INIT_OBJ = this;
setTimeout('ReInit()', 200);
}
}
function ReInit(obj)
{
Init(RE_INIT_OBJ);
TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
RE_INIT_OBJ = null;
}
function RunSlide()
{
if (OBJ_VIEW.getAttribute("state") == 0)
{
NEW_PIX_VAL += PIX_SLIDE;
OBJ_SLIDE.style.height = NEW_PIX_VAL;
//Francis Fontaine Added Code Begin
OBJ_MENUCONTENT.style.height = (parseInt(OBJ_MENUCONTENT.style.height.replace(/px/,"")) + PIX_SLIDE) + "px";
OBJ_MENU_17.style.top = (parseInt(OBJ_MENU_17.style.top.replace(/px/,"")) + PIX_SLIDE) + "px";
OBJ_MENUTEXT.style.top = (parseInt(OBJ_MENUTEXT.style.top.replace(/px/,"")) + PIX_SLIDE) + "px";
//Francis Fontaine Added Code End
if (NEW_PIX_VAL >= DIV_HEIGHT) //DD modified code
{
clearInterval(TIMER_SLIDE);
TIMER_SLIDE = null;
OBJ_VIEW.style.display = 'inline';
OBJ_VIEW.setAttribute("state","1")
MainDiv.setAttribute("state",NEW_PIX_VAL);
}
} else
{
OBJ_VIEW.style.display = 'none';
NEW_PIX_VAL -= PIX_SLIDE;
if(NEW_PIX_VAL > 0)
{
OBJ_SLIDE.style.height = NEW_PIX_VAL;
//Francis Fontaine Added Code Begin
OBJ_MENUCONTENT.style.height = (parseInt(OBJ_MENUCONTENT.style.height.replace(/px/,"")) - PIX_SLIDE) + "px";
OBJ_MENU_17.style.top = (parseInt(OBJ_MENU_17.style.top.replace(/px/,"")) - PIX_SLIDE) + "px";
OBJ_MENUTEXT.style.top = (parseInt(OBJ_MENUTEXT.style.top.replace(/px/,"")) - PIX_SLIDE) + "px";
//Francis Fontaine Added Code End
}
if (NEW_PIX_VAL <= 0)
{
NEW_PIX_VAL = 0;
OBJ_SLIDE.style.height = NEW_PIX_VAL;
//Francis Fontaine Added Code Begin
OBJ_MENUCONTENT.style.height = (parseInt(OBJ_MENUCONTENT.style.height.replace(/px/,"")) - PIX_SLIDE) + "px";
OBJ_MENU_17.style.top = (parseInt(OBJ_MENU_17.style.top.replace(/px/,"")) - PIX_SLIDE) + "px";
OBJ_MENUTEXT.style.top = (parseInt(OBJ_MENUTEXT.style.top.replace(/px/,"")) - PIX_SLIDE) + "px";
//Francis Fontaine Added Code End
clearInterval(TIMER_SLIDE);
TIMER_SLIDE = null;
OBJ_VIEW.setAttribute("state","0")
MainDiv.setAttribute("state",NEW_PIX_VAL);
}
}
}
function ChangeStyle()
{
if (this.className == this.getAttribute("classOut"))
this.className = this.getAttribute("classOver");
else
this.className = this.getAttribute("classOut");
}
Thx for your timePHP Code:<table>
<tr>
<td style="height: 23px; vertical-align: top;">
<a href="#" class="topItem">Accueil</a>
</td>
</tr>
<tr>
<td>
<div class="mainDiv" state="0">
<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this);" ><a class="topItem" href="conseillers.htm">Profils des conseillers</a></div>
<div class="dropMenu" >
<div class="subMenu" state="0">
<span class="subItem" classOut="subItem" classOver="subItemOver"><a class="subItem" href="carriere.htm">Carrière</a></span><BR />
<span class="subItem" classOut="subItem" classOver="subItemOver"><a class="subItem" href="equipe.htm">Équipe</a></span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="mainDiv" state="0">
<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this);" ><a class="topItem" href="services.htm">Nos produits et services</a></div>
<div class="dropMenu" >
<div class="subMenu" state="0">
<span class="subItem" classOut="subItem" classOver="subItemOver"><a class="subItem" href="#">Formation et programmes</a></span><BR />
<span class="subItem" classOut="subItem" classOver="subItemOver"><a class="subItem" href="#">Calendrier de formation</a></span>
</div>
</div>
</div>
</td>
</tr>
</table>
CSS Codes
Reply With Quote
Bookmarks