[HTML] klikken op het menu - Softwareontwikkeling

maandag 12 december 2005 13:36

Acties:

Verwijderd

Topicstarter

Beste tweakers,

hier ben ik dan weer, ik hoop dat iemand mij hiermee wel kan helpen. Ik zit met een klein probleem. Zoals je hier ziet http://simplythebest.net/...ripts/dhtml_script_3.html wil ik dat mijn menu ook zo sorteerd. zegmaar, als je op klikt zie je een menu naar beneden verschijnen, maar zodra ik op een andere menu kiest (Choice2 ofzo) dan schuift de andere menu die ik net had geopent weer automatisch dicht. Ik hoop dat dit duidelijk is, want ik wil dat namelijk in mijn script hebben.

Wat ik nu heb is, ik heb ook soort gelijke menu als die op SimplytheBest.net maar bij mij is het zo, als je op de menu klikt dat het open gaat, maar als ik weer een ander menu erbij klikt dan blijft die menu die ik eerder heb open gemaakt gewoon open, terwijl ik die automatisch dicht wil hebben.

dit is mijn code (mijn huidige menu):

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 1px;
background-color:#FFC79C;
color:#000000;
width:140px;
padding:1px;
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    background-color: #FF9A66;
}
.style2 {
    font-family: Tahoma;
    font-size: 10px;
}
.style3 {
    font-family: Tahoma;
    font-size: 14px;
}
.style4 {font-size: 14px}
-->
</style></head>

<body>
<!-- Keep all menus within masterdiv-->
<div id="masterdiv">

    <div class="menutitle style2 style2" onclick="SwitchMenu('sub1')">Economy</div>
    <span class="submenu style2" id="sub1">
        - <a href="new.htm">Inflation Rates</a><br>
        - <a href="hot.htm">Banking Systems</a><br>
        - <a href="revised.htm">Stock Market Returns</a><br>
        - <a href="morezone/">Value of Homes</a><br>
        - <a href="new.htm">Gross Domestic Product</a><br>
        - <a href="hot.htm">Tourism Rates</a><br>
        - <a href="revised.htm">Power Consumption Demands</a><br>
        - <a href="morezone/">Popular Consumer</a><br>
        - <a href="morezone/">Airport Data</a><br>
    </span>

    <div class="menutitle style2 style2" onclick="SwitchMenu('sub2')">Demographics</div>
    <span class="submenu style2" id="sub2">
        - <a href="notice.htm">Population Growth rates</a><br>
        - <a href="faqs.htm">Public Education Spending</a><br>
        - <a href="help.htm">Public health Spending</a><br>
        - <a href="faqs.htm">Public Transit Spending</a><br>
        - <a href="help.htm">Cell Phone users data</a><br>
    </span>

    <div class="menutitle style2 style2" onclick="SwitchMenu('sub3')">Meteorological data</div>
    <span class="submenu style2" id="sub3">
        - <a href="http://www.codingforums.com">Sunrise & Sunset times</a><br>
        - <a href="http://www.codingforums.com">Tidal activity</a><br>
        - <a href="http://www.codingforums.com">Temperatures</a><br>
        - <a href="http://www.codingforums.com">Rainfall</a><br>
    </span>
    
    <div class="menutitle style2 style2" onclick="SwitchMenu('sub4')">Technology</div>
    <span class="submenu style2" id="sub4">
        - <a href="http://www.javascriptkit.com">Windmill Power generation</a><br>
        - <a href="http://www.freewarejava.com">Dike System</a><br>
        - <a href="http://www.cooltext.com">Cell Phone usage rates</a><br>
        - <a href="http://www.google.com">internet availability</a><br>
        - <a href="http://www.google.com">Aquaculture</a><br>
    </span>
    
    <div class="menutitle style2 style2" onclick="SwitchMenu('sub5')">Historical landmarks</div>
    <span class="submenu style2" id="sub5">
        - <a href="http://www.javascriptkit.com">Tallest Buildings</a><br>
        - <a href="http://www.freewarejava.com">Monuments</a><br>
        - <a href="http://www.cooltext.com">Windmills</a><br>
        - <a href="http://www.google.com">Famous Sea ports</a><br>
        - <a href="http://www.google.com">Distances between important cities in Holland</a><br>
        - <a href="http://www.google.com">Tulip Production</a><br>
    </span>
    
    <div class="menutitle style2 style2" onclick="SwitchMenu('sub6')">Art pieces at museum</div>
    <span class="submenu style2" id="sub6">
        - <a href="http://www.javascriptkit.com">Photos, Estimated Values</a><br>
        - <a href="http://www.freewarejava.com">People of Holland</a><br>
    </span>
    
    <div class="menutitle style2 style2" onclick="SwitchMenu('sub7')">Contact</div>
    <span class="submenu style2" id="sub7">
        - <a href="http://www.javascriptkit.com">Contact</a><br>
    </span>


</div>
</body>
</html>

Ik hoop echt dat dit duidelijk is voor jullie. Mocht je het weten vertel me dan aub hoe/wat en waar ik het moet zetten.

maandag 12 december 2005 13:45

Acties:

BtM909

Watch out Guys...

Wij geven geen support op third party oplossingen

Geef aan wat je zelf hebt geprobeerd om uit te zoeken! Wil je zelf wat meer inzet tonen, kijk dan naar de verschillen tussen het werkende voorbeeld en je code die jij tot nu toe al hebt.

vraag me trouwens af waarom je dat werkende voorbeeld niet gebruikt

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

Dit topic is gesloten.