Two instances of Switch Menu II

**Daniel Tulp** · 12-14-2007, 10:35 AM

1) Script Title:
Switch Menu II (or XPmenu)

2) Script URL (on DD):
http://dynamicdrive.com/dynamicindex1/switchmenu2.htm
http://www.jswitch.com/scripts/show/1 (seems parked now, edited 18-12-07)

3) Describe problem:
I really like the Switch Menu but I have a small problem.
I want two different layouts on the same page.

I managed to get it working in FireFox, but IE 6 ignores the topItemOver and topItemCloseOver, probably because these are generated in the JS.

What I did was introduce id tags to the divisions I wanted to have the second layout (in this case with a red background). As id tags cannot have the same value on the same page, this does have it's drawbacks, so if someone has another solution, please let me know.

By the way, version 2.4 is out, on DD version 2.2 is listed.

This is my htm file:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >

<link rel="stylesheet" type="text/css" href="sddm.css" >
<title>JSwitch Slide Menu</title>
</head>

<body>

<div class="navbar">
<div class="line"></div>
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >introductie</div>        
<div class="dropMenu" ><!-- -->
	<div class="subMenu" style="display:none;">
		<div class="subItem"><a href="#">presenteerd</a></div>
	</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<div class="line"></div>
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
    <div class="topItem">medewerkers</div>       
    <div class="dropMenu" ><!-- -->
        <div class="subMenu" style="display:none;">
    		<div class="subItem"><a href="#">vacatures</a></div>
        </div>
    </div>
</div>
<!-- *********************************End Menu****************************** -->
<div class="line"></div>
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem"  >adres</div>        
<div class="dropMenu" ><!-- -->
	<div class="subMenu" style="display:none;">
		<div class="subItem"><a href="#">tilburg</a></div>
		<div class="subItem"><a href="#">utrecht</a></div>
        </div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<div class="line"></div>
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem"  >downloads</div>        
<div class="dropMenu" ><!-- -->
	<div class="subMenu" style="display:none;">
		<div class="subItem"><a href="#">leaflets</a></div>
		<div class="subItem"><a href="#">persberichten</a></div>
		<div class="subItem"><a href="#">artikelen</a></div>
        </div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<div class="line"></div>
</div>
<!-- Het lukt nog niet om de topItemOver en topItemCloseOver rood te krijgen in IE 6-->
<div id="red" class="navbar">
<div class="redline"></div>
<!-- *********************************Start Menu****************************** -->
<div id="red1" class="mainDiv" >
<div id="red2" class="topItem"  >downloads</div>        
<div id="red3" class="dropMenu" ><!-- -->
	<div class="subMenu" style="display:none;">
		<div class="subItem"><a href="#">leaflets</a></div>
		<div class="subItem"><a href="#">persberichten</a></div>
		<div class="subItem"><a href="#">artikelen</a></div>
        </div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<div class="redline"></div>
<script type="text/javascript" src="xpmenuv24.js"></script>
</div>
</body>
</html>

this is the css:

Code:

.navbar, #red.navbar
{
  background-color:#48332C;
  width:140px;
  border:1px solid #A39895;
  padding:10px 0 10px 0;
}  
#red.navbar
{
  background-color:#A91315;
  border-top:0;
}
.mainDiv
{
  width:140px;
}

.topItem, .topItemClose 
{
  font: 11px verdana,sans-serif;
  background-color:#48332C;
  width: 121px;
  height: 19px;
  padding-top:5px;
  padding-right:19px;
  color: #A49996;
  cursor:pointer;
  text-align:right;
}

.topItem
{
  color:#ffffff;
  border-bottom:0;
  background-color:#6B5148;
  padding-bottom:7px;
}

#red2.topItemClose
{
  background-color:#A91315;
  color:#E2AEAF;
}

#red2.topItem
{
  background-color:#CC3333;
}

.topItemOver, .topItemCloseOver
{
  font: 11px verdana,sans-serif;
  background-color:#6B5148;
  width: 121px;
  height: 19px;
  padding-top:5px;
  padding-right:19px;
  color: #ffffff;
  cursor:pointer;
  text-align:right;
}

.topItemOver
{
  padding-bottom:7px;
}

#red2.topItemOver, #red2.topItemCloseOver
{
  background-color:#CC3333;
}

.line, .redline
{
  border-bottom:1px solid #A49996;
  height:0px;
  line-height:0px;
  width:103px;
  margin:0 0 -5px 17px;
  padding:0;
}

.redline{
  border-color:#E2AEAF;
}

.line[class], .redline/*wordt niet gelezen door IE 6*/
{
  margin:0 0 0 17px;
}

.dropMenu, #red3.dropMenu
{	
  font: 11px verdana,sans-serif;
  background-color: #6B5148;
  filter:alpha(opacity=100);
}

#red3.dropMenu
{
  background-color: #CC3333;
}

.subMenu
{
   display:block;
}

.subItem, .subItem a
{
   text-align:right;
   padding: 2px 7px 0 0;
   height:18px;
   font: 11px verdana,sans-serif;	
   text-decoration:none;
   color: #CCCCCC;
}

.subItemOver, .subItemOver  a
{
   text-align:right;
   padding: 2px 7px 0 0;
   height:18px;
   color: #ffffff;
   cursor:pointer;
}

.drop
{
   border-left:1px solid black;
   border-right:1px solid black;	
}

Hope someone has an idea to overcome my problems with IE 6.
I have attached version 2.4 of the menu.

**Daniel Tulp** · 12-18-2007, 08:14 AM

Guys,

I'd really like an answer to this as I'm puzzled myself.

No one has got any idea?

**Daniel Tulp** · 12-18-2007, 08:16 AM

it seems now that the jswitch website is parked and no longer online

if people want the complete 2.4 package, let me know

**Daniel Tulp** · 12-18-2007, 08:23 AM

guys,

I just read one of the stickies, and I'm not supposed to ask questions about two copies of the same script on one page.

Well, I don't want to invoke two instances really, just two different layouts. Do the same problems occur here, or is this something you can help me with.

Regards,
Daniël

Thread: Two instances of Switch Menu II

Thread Tools

Search Thread

Two instances of Switch Menu II

Not two instances, just two different layouts

Bookmarks

Bookmarks

Posting Permissions