Avatar billede chr_s Nybegynder
14. oktober 2003 - 14:31 Der er 2 kommentarer

java dropdown

Hej

Jeg bruger denne dropdownmenu på min side:

<html>

    <head>
   
        <!-- Style_sheet -->

<style type="text/css" title="drop_menu">
.Main_menu {
    border: 0px solid #D3E1D4;
    background-color: #D3E1D4;
    padding-left:0px;
    line-height: 100%;
    width: 10;
    cursor: hand;
}
.Main_menu_over {
    border: 0px solid #D3E1D4;
    background-color: #D3E1D4;
    padding-left:0px;
    line-height:100%;
    width: 10;
    cursor: hand;
}
.Sub_menu {
    border: 0px solid #D3E1D4;
    background-color: #D3E1D4;
    padding-left: 5px;
    line-height: 100%;
    width: 10;
    cursor: hand;
}
.Sub_menu_over {
    border: 0px solid #D3E1D4;
    background-color: #D3E1D4;
    padding-left:5px;
    line-height: 100%;
    width: 10;
    cursor: hand;
}
a.main_text         { font: 12px Verdana; color: #000000; text-decoration: none; font-weight: none; font-style: none; }
a:visited.main_text { font: 12px Verdana; color: #000000; text-decoration: none; font-weight: none; font-style: none; }
a:hover.main_text     { font: 12px Verdana; color: #000000; text-decoration: none; font-weight: none; font-style: none; }
a.sub_text             { font: 11px Verdana; color: #3f3f3f; text-decoration: none; font-weight: none; font-style: none; }
a:visited.sub_text     { font: 11px Verdana; color: #3f3f3f; text-decoration: none; font-weight: none; font-style: none; }
a:hover.sub_text     { font: 11px Verdana; color: #3f3f3f; text-decoration: none; font-weight: none; font-style: none; }
</style>

                       
<!-- Script_code -->
<script language="JavaScript" type="text/javascript">
<!-- //
function toggle_dropmenu(id){
    count = 1;
    while (count <= 10){
        var step = id+'_'+count;
        if (document.getElementById(step)){
        document.getElementById(step).style.display = (document.getElementById(step).style.display == 'block') ? 'none' : 'block';
        }
        count++;
    }
}

function roll_dropmenu(id, roll_class){
    document.getElementById(id).className = roll_class;
}
//-->
</script>
   
    </head>

    <body bgcolor="#ffffff" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
        <table border="0" cellpadding="0" cellspacing="0" width="122" height="279">
            <tr>
                <td width="11"><img src="../gfx/v_menu.gif" width="11" height="16" border="0"></td>
                <td><img src="../gfx/v_menu_t.gif" width="122" height="16" border="0"></td>
            </tr>
            <tr height="249">
                <td width="11" background="../gfx/v_menu.gif" height="249"></td>
                <td height="249" background="../gfx/v_menu_bg.gif" valign="top">
               
                <!-- Menu_Code_stylesheet -->
    <div id="Main_1" class="Main_menu" onmouseover="roll_dropmenu('Main_1','Main_menu_over')" onmouseout="roll_dropmenu('Main_1','Main_menu')">
        <a href="java script:void(0)" id="main_text_1" class="main_text" onClick="toggle_dropmenu('sub1')">Hvem</a>
    </div>
       
    <div id="sub1_1" class="Sub_menu" onmouseover="roll_dropmenu('sub1_1','Sub_menu_over')" onmouseout="roll_dropmenu('sub1_1','Sub_menu')" style="display: none">
        <a href="#" class="sub_text" target="_main">Profil</a><br />
    </div>
       
    <div id="sub1_2" class="Sub_menu" onmouseover="roll_dropmenu('sub1_2','Sub_menu_over')" onmouseout="roll_dropmenu('sub1_2','Sub_menu')" style="display: none">
                        <a href="#" class="sub_text" target="_main">CV<br>
                        </a></div>
                       
    <div id="sub1_3" class="Sub_menu" onmouseover="roll_dropmenu('sub1_3','Sub_menu_over')" onmouseout="roll_dropmenu('sub1_3','Sub_menu')" style="display: none">
                        <a href="#" class="sub_text" target="_main">Ans&oslash;gning<br>
                        </a></div>
                       
    <div id="sub1_4" class="Sub_menu" onmouseover="roll_dropmenu('sub1_4','Sub_menu_over')" onmouseout="roll_dropmenu('sub1_4','Sub_menu')" style="display: none">
                        <a href="#" class="sub_text" target="_main">Portfolio<br>
                        </a></div>
                       
    <div id="sub1_5" class="Sub_menu" onmouseover="roll_dropmenu('sub1_5','Sub_menu_over')" onmouseout="roll_dropmenu('sub1_5','Sub_menu')" style="display: none">
                        <a href="#" class="sub_text" target="_main">Fritid<br>
                        </a></div>                                       
       
    <div id="Main_2" class="Main_menu" onmouseover="roll_dropmenu('Main_2','Main_menu_over')" onmouseout="roll_dropmenu('Main_2','Main_menu')">
        <a href="java script:void(0)" id="main_text_2" class="main_text" onClick="toggle_dropmenu('sub2')">Uddannelsen</a>
    </div>
   
        <div id="sub2_1" class="Sub_menu" onmouseover="roll_dropmenu('sub2_1','Sub_menu_over')" onmouseout="roll_dropmenu('sub2_1','Sub_menu')" style="display: none">
        <a href="#" class="sub_text" target="_main">Mediegrafiker</a><br />
    </div>
       
    <div id="sub2_2" class="Sub_menu" onmouseover="roll_dropmenu('sub2_2','Sub_menu_over')" onmouseout="roll_dropmenu('sub2_2','Sub_menu')" style="display: none">
                        <a href="#" class="sub_text" target="_main">Efteruddannelse<br>
                        </a></div>
       
    <div id="Main_3" class="Main_menu" onmouseover="roll_dropmenu('Main_3','Main_menu_over')" onmouseout="roll_dropmenu('Main_3','Main_menu')">
        <a href="java script:void(0)" id="main_text_3" class="main_text" onClick="toggle_dropmenu('sub3')">Tryk</a>
    </div>
       
    <div id="Main_4" class="Main_menu" onmouseover="roll_dropmenu('Main_4','Main_menu_over')" onmouseout="roll_dropmenu('Main_4','Main_menu')">
        <a href="java script:void(0)" id="main_text_4" class="main_text" onClick="toggle_dropmenu('sub4')">Digital</a>
    </div>
               
                </td>
            </tr>
            <tr>
                <td width="11"><img src="../gfx/v_menu.gif" width="11" height="15" border="0"></td>
                <td><img src="../gfx/v_menu_b.gif" width="122" height="14" border="0"></td>
            </tr>
        </table>
        <p></p>
    </body>

</html>

Mit  problem er at når man åbner menupunkt 1 og derefter åbner menupunk 2 så skulle punkt 1 gerne lukke automatisk.

En der kan hjælpe?
Avatar billede sbm Nybegynder
14. oktober 2003 - 14:41 #1
Jeg vil foreslå en "klap-sammen" funktion, der hensynsløst klapper alle menupunkterne sammen. Den kalder du så bare på din onClick lige umiddelbart før du åbner det menupunkt der er blevet trykket på.
Avatar billede roenving Novice
15. oktober 2003 - 19:20 #2
-- og så er det forøvrigt ikke særligt optimalt at skifte class, det er meget smartere at ændre den der display-property, som toggle_dropmenu() gør ...

-- og årsagen er, at browseren for at være helt sikker på, at den har de rigtige styles at sætte på alle elementer, skal opbygge sit css-DOM-træ forfra fordi ændringer vil kunne have betydninger for arve-forhold o.l.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester