"Expanding menus" in JavaScript
|
| View previous topic :: View next topic |
| Author |
Message |
Captain Olle
Joined: 09 Oct 2004
Posts: 1
|
 Posted: Sat Aug 13, 2005 12:07 am Post subject: "Expanding menus" in JavaScript |
 |
|
Hi everybody! 
I'm new to JavaScript and would want to know how I can make expanding menus. To be more specific, there is such a menu on the DEVPPL main page under the topic of Navigation. When I hold my mouse over the box, which makes it 'expand', my browser informed me "javascript: b.o(2);", so I figured out it's JavaScript. But when I looked in the source code I didn't find the JavaScript code I was looking, just some short codes which opened a .js file. I looked onto it but it was way to long so I decided to ask you guys. Do I have to use these 'big' .js files or is there a more simple way? |
|
| Back to top |
|
 |
|
|
dazz_club
250+ Club
Joined: 15 Jul 2005
Posts: 298
Location: Chester and Hull
|
| Posted: Sun Mar 05, 2006 8:58 pm Post subject: expanding menu code for you |
|
|
Hi there,
heres an expanding menu for you to build upon. Its easily understood when you look at the code and alot easier to edit it.
My advice to you would to first copy and paste this code in an html page of its own and then edit it from there. I know it looks daunting but once you preview it in a browser, all is clear.
hope this helps.
expanding menu code below
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 1px;
background-color:none;
color:#666666;
width:140px;
padding:1px;
text-align:left;
font-weight:bold;
/*/*/border:1px solid #A6C8E4;/* */
}
.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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="text_vis.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style2 {
margin-bottom: 1px;
background-color: none;
color: #FFFFFF;
width: 140px;
padding: 1px;
text-align: left;
border: 1px solid #A6C8E4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
cursor: pointer;
font-weight: bold;
}
.style3 {
font-size: 13px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
-->
</style>
</head>
<body bgcolor="#79B6EA">
<table width="17%" border=0 cellpadding=0 cellspacing=0 bgcolor="#79B6EA">
<tbody>
<tr>
<td width="195" height="28" background="images/spacer_4_prod.jpg"><strong></strong></td>
<td height=29 bordercolor="#79B6EA"> </td>
</tr>
<tr>
<td width="195" height="312" align="left" valign="top" bgcolor="A6C8E4"><!-- Keep all menus within masterdiv--><span class="submenu" id="sub1"><br>
</span>
<div id="masterdiv">
<div class="menutitle style3" onClick="SwitchMenu('sub2')"> menu1 </div>
<span class="submenu" id="sub2"> <a href="Standard_Product_list.htm" target="main" class="cusStan" style="text-decoration:none"></a><a href="test.html" target="main" class="prodSide" style="text-decoration:none">-
link</a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">-
link</a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">-
link</a><br>
<br>
</span>
<div class="menutitle style3" onClick="SwitchMenu('sub3')"> menu2</div>
<span class="submenu" id="sub3"> <a href="Standard_Product_list.htm" target="main" class="cusStan" style="text-decoration:none"></a><a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link</a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link </a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link </a><br>
<br>
</span>
<div class="menutitle style3" onClick="SwitchMenu('sub4')">menu3</div>
<span class="submenu" id="sub4"> <a href="Standard_Product_list.htm" target="main" class="cusStan" style="text-decoration:none"></a><a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link </a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link </a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">-
link</a><br>
<br>
</span>
<div class="style2" onClick="SwitchMenu('sub5')"> menu4 </div>
<span class="submenu" id="sub5"> <a href="Standard_Product_list.htm" target="main" class="cusStan" style="text-decoration:none"></a><a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link </a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link </a><br>
<a href="test.html" target="main" class="prodSide" style="text-decoration:none">- link</a><br>
<br>
</span></div></td>
</tr>
</tbody>
</table>
</body>
</html>
|
Enjoy! |
|
| Back to top |
|
|
|
Welcome to DEVPPL.com
You are not logged in, which means that you can't post in the forums.
Click here to Register
If you are a current member here on DEVPPL, please login below:
|
|
|
|
