| | |
switch type menu
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
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 ????
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/
Indian Developer
http://falaque.wordpress.com/
•
•
Join Date: Feb 2008
Posts: 6
Reputation:
Solved Threads: 1
•
•
•
•
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
<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>
•
•
Join Date: Nov 2007
Posts: 52
Reputation:
Solved Threads: 2
in head part
In body part
html Syntax (Toggle Plain Text)
<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
HTML and CSS Syntax (Toggle Plain Text)
<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 -->
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.
![]() |
Similar Threads
- "Server Busy"??? Spyware Related? (Viruses, Spyware and other Nasties)
- form menu style sheet changer (HTML and CSS)
- Lookup tables - how to perform a switch using a string (C++)
- WIRELESS 2 routers and switch off cable modem issues? (Networking Hardware Configuration)
- Help!.. New HD/ Need 2 Load ME O/S (Windows 95 / 98 / Me)
- Menu Chooser Program (C++)
- Two Build Errors involving my code. (C++)
- Drop Down Menu (ASP.NET)
Other Threads in the HTML and CSS Forum
- Previous Thread: help xhtml, css website
- Next Thread: <col style="" /> and firefox
Views: 2465 | Replies: 14
| Thread Tools | Search this Thread |
Tag cloud for HTML and CSS
2002 appointments asp background backgroundcolor beta browser bug calendar cart center cgi code codeinjection corporateidentity create css deleted design development displayimageinsteadofflash dreamweaver drupal emailmarketing epilepsy explorer firefox flash font fonts form format free frontpage google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft missing mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. templates textcolor theme timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 wordpress xml xsl






