switch type menu

Thread Solved

Join Date: Jan 2008
Posts: 483
Reputation: DangerDev has a spectacular aura about DangerDev has a spectacular aura about 
Solved Threads: 59
DangerDev's Avatar
DangerDev DangerDev is offline Offline
Posting Pro in Training

Re: switch type menu

 
0
  #11
Feb 15th, 2008
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 ????
Last edited by DangerDev; Feb 15th, 2008 at 9:03 am. Reason: left something
Freedom in the Mind, Faith in the words.. Pride in our Souls...
Indian Developer
http://falaque.wordpress.com/
Reply With Quote Quick reply to this message  
Join Date: Nov 2007
Posts: 52
Reputation: kavithakesav is an unknown quantity at this point 
Solved Threads: 2
kavithakesav kavithakesav is offline Offline
Junior Poster in Training

Re: switch type menu

 
0
  #12
Feb 18th, 2008
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.
Reply With Quote Quick reply to this message  
Join Date: Feb 2008
Posts: 6
Reputation: mukund_007 is an unknown quantity at this point 
Solved Threads: 1
mukund_007 mukund_007 is offline Offline
Newbie Poster

Re: switch type menu

 
0
  #13
Feb 18th, 2008
Originally Posted by kavithakesav View Post
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....


<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}

if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction

if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate

</script>
Reply With Quote Quick reply to this message  
Join Date: Nov 2007
Posts: 52
Reputation: kavithakesav is an unknown quantity at this point 
Solved Threads: 2
kavithakesav kavithakesav is offline Offline
Junior Poster in Training

Re: switch type menu

 
0
  #14
Dec 18th, 2008
in head part

  1. <style type="text/css">
  2. .menuOut {
  3. width:147px;
  4. height:13px;
  5. font-family:verdana,arial;
  6. font-size:11px;
  7. color:#000000;
  8. font-weight:normal;
  9. text-align:left;
  10. text-decoration:none;
  11. margin:0px;
  12. padding:5px 0px 5px 0px;
  13. border:0px solid #000000;
  14. background-image:url(images/leftlink-bg.jpg);
  15. cursor:pointer;
  16. }
  17.  
  18. .menuOver {
  19. width:147px;
  20. height:13px;
  21. font-family:verdana,arial;
  22. font-size:11px;
  23. color:#CE2127;
  24. font-weight:normal;
  25. text-align:left;
  26. text-decoration:underline;
  27. margin:0px;
  28. padding:5px 0px 5px 0px;
  29. border:0px solid #000000;
  30. background-image:url(images/r_leftlink_bg.jpg);
  31. cursor:pointer;}
  32.  
  33. .submenu {
  34. width:140px;
  35. font-family:verdana, arial;
  36. font-size:10px;
  37. padding-left:5px;
  38. }
  39. .submenu a {
  40. color:#CE2127;
  41. text-decoration:none;
  42. font-weight:none;
  43. }
  44. .submenu a:hover {
  45. color:#000000;
  46. text-decoration:underline;
  47. font-style:none;
  48. font-weight:none;
  49. }
  50. </style>
  51.  
  52. <script type="text/javascript">
  53. function SwitchMenu(obj){
  54. if(document.getElementById){
  55. var el = document.getElementById(obj);
  56. var ar = document.getElementById("cont").getElementsByTagName("DIV");
  57. if(el.style.display == "none"){
  58. for (var i=0; i<ar.length; i++){
  59. ar[i].style.display = "none";
  60. }
  61. el.style.display = "block";
  62. }else{
  63. el.style.display = "none";
  64. }
  65. }
  66. }
  67. function ChangeClass(menu, newClass) {
  68. if (document.getElementById) {
  69. document.getElementById(menu).className = newClass;
  70. }
  71. }
  72. document.onselectstart = new Function("return true");
  73. </script>



In body part

HTML and CSS Syntax (Toggle Plain Text)
  1. <div id="cont">
  2. <p id="menu1" class="menuOut" onclick="SwitchMenu('sub1')" onmouseover="ChangeClass('menu1','menuOver')" onmouseout="ChangeClass('menu1','menuOut')">Work from Home</p>
  3. <div class="submenu" id="sub1" style="display:none;">
  4. - <a href="independent-transcription.asp">Independent Transcription Professional</a><br/>
  5. - <a href="#">HT Calculator</a><br/>
  6. </div>
  7. </div>
  8. <!-- Menu end -->
Last edited by peter_budo; Dec 18th, 2008 at 3:44 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 166
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: switch type menu

 
0
  #15
Dec 18th, 2008
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.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum


Views: 2465 | Replies: 14
Thread Tools Search this Thread



Tag cloud for HTML and CSS
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC