943,712 Members | Top Members by Rank

Ad:
You are currently viewing page 2 of this multi-page discussion thread; Jump to the first page
Feb 15th, 2008
0

Re: switch type menu

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
Reputation Points: 165
Solved Threads: 59
Posting Pro in Training
DangerDev is offline Offline
485 posts
since Jan 2008
Feb 18th, 2008
0

Re: switch type menu

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.
Reputation Points: 10
Solved Threads: 2
Junior Poster in Training
kavithakesav is offline Offline
52 posts
since Nov 2007
Feb 18th, 2008
0

Re: switch type menu

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>
Reputation Points: 10
Solved Threads: 1
Newbie Poster
mukund_007 is offline Offline
6 posts
since Feb 2008
Dec 18th, 2008
0

Re: switch type menu

in head part

html Syntax (Toggle Plain Text)
  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.
Reputation Points: 10
Solved Threads: 2
Junior Poster in Training
kavithakesav is offline Offline
52 posts
since Nov 2007
Dec 18th, 2008
0

Re: switch type menu

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.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: help xhtml, css website
Next Thread in HTML and CSS Forum Timeline: <col style="" /> and firefox





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC