Webmenu.

[Onbekend]

Na een uur zoeken in deze sectie heb ik geen antwoord gevonden op m'n vraag. Ik zie hier tussen de bomen het bos niet meer...

Samengevat wil ik zo'n menu maken wat hier ook op de site bovenaan staat.

Ik heb een tabel met 1 rij en bij elke tekst heb ik een mouseover-opdracht staan welke een submenu (tabel) weergeeft met hidden en visibility. Dit werkt bij mij netjes.
Bij het laden van de site staan deze menu's allemaal op hidden zodat je niet alle submenu's krijgt te zien.

Maar nu wil ik alle kleuren en andere eigenschappen kunnen instellen in de .CSS.
Als ik dat doe, dan werkt bij mij de optie hidden niet meer.

Hier zijn een paar stukjes code geknipt.

code:

<style type="text/css">
table.menu
{
    font-size:100%;
    position:absolute;
    visibility:hidden;
}
</style>
............................
<SCRIPT TYPE="text/javascript">
    function showmenu(elmnt)
    {
        document.getElementById(elmnt).style.visibility="visible"
        object1.style.visibility="visible"
    }
    function hidemenu(elmnt)
    {
        document.getElementById(elmnt).style.visibility="hidden"
        object1.style.visibility="hidden"
    }
</SCRIPT>
..............................
<TABLE CLASS="MainMenu">
    <TR>
        <TD onmouseover="showmenu('Menu 1')" onmouseout="hidemenu('Menu 1')">Menu 1<br>
            <TABLE CLASS="menu" ID="Menu 1"> <!-- -->
                <TR><TD CLASS="SubMenu"><A HREF="site1">sub1</A></TD></TR>
                <TR><TD CLASS="SubMenu"><A HREF="site2">sub2</A></TD></TR>
                <TR><TD CLASS="SubMenu"><A HREF="site3">sub3</A></TD></TR>
                <TR><TD CLASS="SubMenu"><A HREF="site4">sub4</A></TD></TR>
            </TABLE>
        </TD>
        <TD onmouseover="showmenu('Menu 2')" onmouseout="hidemenu('Menu 2')">Menu 2<br>
            <TABLE CLASS="menu" ID="Menu 2"> <!-- -->
                <TR><TD CLASS="SubMenu"><A HREF="site1">sub1</A></TD></TR>
                <TR><TD CLASS="SubMenu"><A HREF="site2">sub2</A></TD></TR>
                <TR><TD CLASS="SubMenu"><A HREF="site3">sub3</A></TD></TR>
                <TR><TD CLASS="SubMenu"><A HREF="site4">sub4</A></TD></TR>
            </TABLE>
        </TD>
    </TR>
</TABLE>

Als ik bij de regels met "<!-- -->" de CLASS in een .css-bestand maak, dan werkt het hele menu niet meer.
Wat doe ik dan fout ?

[majornono]

Ook onbekend schreef op maandag 04 juli 2005 @ 22:12:

code:

        object1.style.visibility="visible"

Wat doet deze regel? object1 is niet gedefinieerd.

Daarnaast, zet de visibility niet in de js, maar verander de className. Dan kun je de visibility ( + alle overige css kenmerken) in de CSS regelen.

[samo]

Ik zou de makkelijke oplossing nemen, en zoeken naar "Suckerfish" op bijvoorbeeld www.alistapart.com. Dan heb je een makkelijkere oplossing met behulp van CSS.

[Zoefff]

Direct linkje naar nederlands artikel: http://www.naarvoren.nl/artikel/hover/

[Verwijderd]

Sowieso mag een id geen spatie bevatten. Het class attribuut mag weer wèl een spatie bevatten, duv bijvoorbeeld: class="extra menu"
Op die manier is je element van het classtype "extra" én van "menu". Je mag een element natuurlijk geen twee class attributen meegeven.

Verder is het natuurlijk nutteloos om hiervoor tabellen te gaan gebruiken. Maar dat is niet de oorzaak van je probleem.