ugrás a tartalomhoz

CSS kinyiló menü

Anonymous · 2005. Nov. 20. (V), 21.16
Az új oldalamra szeretnék csinálni egy menüt, amelynek több pontjához almenü tartozik.
Ezt úgy szeretném elérni, hogy az egyes menüpontra kattintva az almenü kinyilik alá.

Kattintás előtt:
menu1
menu2
menu3
menu4


Kattintás után:
menu1
menu2
almenu1
almenu2
almenu3
stb...
menu3
menu4


Mindezt úgy szeretném megoldani, hogy újratöltés nélkül valósuljon meg a dolog.
Ha valakinek van ötlete, vagy tud konkrét példát is mutatni, akkor az megköszönném! :)
‹ Floatra összeugrik a div-em z-index IE alatt ›
 ■
1

DRV.hu

Jano · 2005. Nov. 20. (V), 23.05
drv.hu-n van ilyen.
2

Köszönöm

Anonymous · 2005. Nov. 20. (V), 23.57
Köszi Jano, király vagy! :)
3

leszedhető?

Anonymous · 2005. Nov. 21. (H), 15.02
Nekem is pont ilyen kellene.
Csak színeket és hátteret kelle tudnom változtatni.
Hogyan lehet ezt editálhatóan leszedni?

Bajker
4

HTML + CSS forrás

Anonymous · 2005. Nov. 21. (H), 15.26
Megnézed a két forrás és szépen kimásolod...
5

nem egyszerű

Anonymous · 2005. Nov. 21. (H), 16.25
Letöltöttem a css-eket, lementettem a html, átírtam a css elérési utakat.
A menü mégsem jelenik meg. neked már működőképes?

Bajker
6

<Nincs cím>

Anonymous · 2005. Nov. 21. (H), 17.18
Persze, hogy az, nekem csak a technológiára volt szükségem. Az én menüm teljesen másképp épül fel.

Próbáld így:
Html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="hu">
<head>
<title>Teszt</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />
<link rel="stylesheet" href="menu.css" type="text/css" />
</head>

<body>

<ul class="leftmenu0" id="menu_22">
<li><a href='#' onclick="toggle('menu_31');">Menü1</a>
<ul class="leftmenu1" id="menu_31">
<li><a href='#38' id='link_38'>Almenu1</a>
</li>

<li><a href='#39' id='link_39'>Almenu2</a>
</li>
<li><a href='#40' id='link_40'>Almenu3</a>
</li>
<li><a href='#41' id='link_41'>Működési terület</a>
</li>
<li><a href='#42' id='link_42'>Almenu4</a>
</li>
</ul>
</li>
<li><a href='#' onclick="toggle('menu_32');">Menu2</a>
<ul class="leftmenu1" id="menu_32">

<li><a href='#43' id='link_43'>Almenu1</a>
</li>
<li><a href='#44' id='link_44'>Almenu2</a>
</li>
<li><a href='#45' id='link_45'>Almenu3</a>
</li>
<li><a href='#46' id='link_46'>Almenu4</a>
</li>
</ul>
</li>

<script type="text/javascript">
<!--
function getObj(name) {
    if (document.getElementById) {
        if(document.getElementById(name) != null) {
            this.obj = document.getElementById(name);
            this.style = document.getElementById(name).style;
        } // if
    } else
        if (document.all) {
            this.obj = document.all[name];
            this.style = document.all[name].style;
            } else
                if (document.layers) {
                    this.obj = document.layers[name];
                    this.style = document.layers[name];
                }
}

function toggle(id){
    closeAll();
    openActual(id);
}

function closeAll(){
    var menus = Array('menu_31','menu_32','menu_33','menu_152','menu_283','menu_34','menu_35','menu_36');
    for (i in menus) {
        x = new getObj(menus[i]);
        if(x.style) {
            x.style.display = 'none';
            x.style.textDecoration = 'none';
        } // if
    } // for
}

function openActual(id){
    x = new getObj(id);

    if(x.style) {
        x.style.display = 'block';
    } // if    
}

function underlineLink(id){
    x = new getObj(id);

    if(x.style) {
        x.style.textDecoration = 'underline';
    } // if    
}
//-->
</script>


</body>
</html>
És a CSS:

.leftmenu0 li {
    width: 140px;
    background: #efefef;
    margin-bottom: 2px;
    margin-top: 2px;
    padding: 3px 10px 0px 10px;
    color: white;
    font-size: 12px;
    text-transform: uppercase;
    font-family: Verdana, Helvetica, Sans-serif;
    list-style: none;
}

.leftmenu0 a {
    height: 19px;
    color: black;
    display: block;
    text-decoration: none;
}
.leftmenu1 {
    display: none;
    margin-top: 2px;
}
.leftmenu1 li {
    background-image: url("");
    height: auto;
    text-transform: none;
    background-color: #50A650;
    padding: 2px 5px 2px 10px;
    margin: 0px;
    color: white;
    font-size: 11px;
    font-family: Verdana, Helvetica, Sans-serif;
}

.leftmenu1 a {
    height: auto;
    color: white;
    display: block;
    text-decoration: none;
}

.leftmenu1 a:hover {
    color: #3C578C;
}
7

alakul

Anonymous · 2005. Nov. 21. (H), 20.47
Kösz, ez jó lenne, de nem akar működni.
Lehet, h. hülyeséget kérdezek, de lehet, h. link38, 39,40... stb, valahogy még definiálnom kell?

Bajker
8

<Nincs cím>

Anonymous · 2005. Nov. 21. (H), 21.52
Küldj e-mailt a jonpriest##kukac##freemail.hu-ra és átküldöm a müködő tesztet. Ok?