switch type menu

[kavithakesav]

Hi All,

I designed one website useing div tags (its completed). for that website, left vertical menu is there for that i want use like switch type buttons can any one tell me how to do that.

And i know switch type menu but not like vertical menu bar. only i can give one link as a switch type but i want in that some links tobe switch type some should be normal links.
plzzzzzzzzzzzzzzzzzzzzzzzzz can any one help me in this.

thanq

[enque]

I am not too sure if this will help but you can check out dynamic drive for a lot of really good free resources. The link to the switch menu is
here
hope this helps

[kavithakesav]

ya i visited this link, but for my links i used images as background. i tryd in the same code to change how i want but no use.

[enque]

Are you embedding the images? I think since you are using a list for the menu you can give them ids and you can then set the background images using css to call this ids.

[DangerDev]

can u just give code so that i can understand what u want

[kavithakesav]

        Ornaments
        Automobiles
      Miscellaneous
  Computer Hardware

•         Property rentals available
•       Matrimonial - Brides wanted
•     Paying Guest facilities available

Create Case Search Case Advertisement COO Speaks Leave Rules List of Holidays 2008 Obituary Focus Coimbatore Magazine Extracurricular Facilities Line Count Records of Focusites Accounts Documents User Login Sign In

My Links
News / Events

About Company Services
This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys. Please click on any of the sections for more details of that respective heading. This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys.

Products
This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys. Please click on any of the sections for more details of that respective heading. This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys.

Intranet This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys. Please click on any of the sections for more details of that respective heading.

B'days This is an internal website (intranet) for all
office-based and home-based
employees of Focus Infosys.
Please click on any of the
sections for more details
of that respective
heading.

Events This is an internal website (intranet) for all
office-based and home-based
employees of Focus Infosys.
Please click on any of the
sections for more details
of that respective
heading.

Latest News This is an internal website (intranet) for all office-based and home-based employees
of Focus Infosys. Please click on any of the sections for more details of that
respective heading. This is an internal website (intranet) for all office-based and
home-based employees of Focus Infosys. Please click on any of the
sections for more details of that respective heading. This is an
internal website (intranet) for all office-based and home-based
more...

This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys. Please click on any of the sections for more details of that respective heading.

Copyright © 2008 Designed By: Focus Infosys (India) Pvt Ltd

[FC Jamison]

You could try something like this:

CSS

#button1 {
  width: 50px;
  height : 25px;
  overflow : hidden;
  background-image: url('/images/image.jpg');
}

#button1:hover {
  background-image: url('/images/imageon.jpg');
}

HTML

<div id='button1'>
 &#160;
</div>

[kavithakesav]

        Ornaments
        Automobiles
      Miscellaneous
  Computer Hardware

•         Property rentals available
•       Matrimonial - Brides wanted
•     Paying Guest facilities available

Create Case Search Case Advertisement COO Speaks Leave Rules List of Holidays 2008 Obituary Focus Coimbatore Magazine Extracurricular Facilities Line Count Records of Focusites Accounts Documents User Login Sign In

My Links
News / Events

About Company Services
This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys. Please click on any of the sections for more details of that respective heading. This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys.

Products
This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys. Please click on any of the sections for more details of that respective heading. This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys.

Intranet This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys. Please click on any of the sections for more details of that respective heading.

B'days This is an internal website (intranet) for all
office-based and home-based
employees of Focus Infosys.
Please click on any of the
sections for more details
of that respective
heading.

Events This is an internal website (intranet) for all
office-based and home-based
employees of Focus Infosys.
Please click on any of the
sections for more details
of that respective
heading.

Latest News This is an internal website (intranet) for all office-based and home-based employees
of Focus Infosys. Please click on any of the sections for more details of that
respective heading. This is an internal website (intranet) for all office-based and
home-based employees of Focus Infosys. Please click on any of the
sections for more details of that respective heading. This is an
internal website (intranet) for all office-based and home-based
more...

This is an internal website (intranet) for all office-based and home-based employees of Focus Infosys. Please click on any of the sections for more details of that respective heading.

Copyright © 2008 Designed By: Focus Infosys (India) Pvt Ltd

[DangerDev]

u zip the files and give as attachment coz without image not able to understand.

[kavithakesav]

Hi,

I attached zip file.

[DangerDev]

left vertical menu is there for that i want use like >>switch type buttons can any one tell me how to do that.
what do you mean by switch type buttons.
>>And i know switch type menu but not like vertical menu bar.
can you give example

so that i can understand what actually you want.

[edit] you are talking about vertical or horizontal menu ????

[kavithakesav]

HI,
Thanx for spending time. Switch type menu means, If we click on any link in left side it has to expand means sub links has to shown for that link.

[mukund_007]

Hi All,

I designed one website useing div tags (its completed). for that website, left vertical menu is there for that i want use like switch type buttons can any one tell me how to do that.

And i know switch type menu but not like vertical menu bar. only i can give one link as a switch type but i want in that some links tobe switch type some should be normal links. plzzzzzzzzzzzzzzzzzzzzzzzzz can any one help me in this.

thanq

Hopefully this will help you....

[kavithakesav]

in head part

<style type="text/css">
.menuOut {
width:147px;
height:13px;
font-family:verdana,arial;
font-size:11px;
color:#000000;
font-weight:normal;
text-align:left;
text-decoration:none;
margin:0px;
padding:5px 0px 5px 0px;
border:0px solid #000000;
background-image:url(images/leftlink-bg.jpg);
cursor:pointer;
}

.menuOver {
width:147px;
height:13px;
font-family:verdana,arial;
font-size:11px;
color:#CE2127;
font-weight:normal;
text-align:left;
text-decoration:underline;
margin:0px;
padding:5px 0px 5px 0px;
border:0px solid #000000;
background-image:url(images/r_leftlink_bg.jpg);
cursor:pointer;}

.submenu {
width:140px;
font-family:verdana, arial;
font-size:10px;
padding-left:5px;
}
.submenu a {
color:#CE2127;
text-decoration:none;
font-weight:none;
}
.submenu a:hover {
color:#000000;
text-decoration:underline;
font-style:none;
font-weight:none;
}
</style>

<script type="text/javascript">
function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("cont").getElementsByTagName("DIV");
		if(el.style.display == "none"){
			for (var i=0; i<ar.length; i++){
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}
function ChangeClass(menu, newClass) { 
	 if (document.getElementById) { 
	 	document.getElementById(menu).className = newClass;
	 } 
} 
document.onselectstart = new Function("return true");
</script>

In body part

<div id="cont">
	<p id="menu1" class="menuOut" onclick="SwitchMenu('sub1')" onmouseover="ChangeClass('menu1','menuOver')" onmouseout="ChangeClass('menu1','menuOut')">Work from Home</p>
	<div class="submenu" id="sub1" style="display:none;">
		- <a href="independent-transcription.asp">Independent Transcription Professional</a><br/>
		- <a href="#">HT Calculator</a><br/>
	</div>
</div>
<!-- Menu end -->

[MidiMagic]

Note that Firefox considers 0 followed by a unit of measure (such as 0px or 0%) to be invalid, and throws away the entire style containing it. I see quite a few of those.