Keskustelu: Ohjelmointikysymykset: Alasvetovalikko (javascript & CSS) (JavaScript)

slitzu [27.07.2006 11:23:46]

Bongasin netistä ohjeet tuollaisen tekemiseen..

html-tiedosto:

<html>
<head>
<link rel="stylesheet" type="text/css" href="uusitesti.css">
<script language="JavaScript" type="text/JavaScript">
 menu_status = new Array();
 function showHide(theid){
   if (document.getElementById) {
     var switch_id = document.getElementById(theid);
     if(menu_status[theid] != 'show') {
       switch_id.className = 'show';
       menu_status[theid] = 'show';
     }else{
       switch_id.className = 'hide';
       menu_status[theid] = 'hide';
     }
   }
 }
</script>
</head>
<body>
<a href="#" class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
    <div id="mymenu1" class="hide">
        <a href="#" class="submenu">Link One here</a>
        <a href="#" class="submenu">Link Two here</a>
        <a href="#" class="submenu">Link Three here</a>
        <a href="#" class="submenu">Link Four here</a>
    </div>
<a href="#" class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    <div id="mymenu2" class="hide">
        <a href="#" class="submenu">Link One here</a>
        <a href="#" class="submenu">Link Two here</a>
        <a href="#" class="submenu">Link Three here</a>
        <a href="#" class="submenu">Link Four here</a>
    </div>
<a href="#" class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div id="mymenu3" class="hide">
        <a href="#" class="submenu">Link One here</a>
        <a href="#" class="submenu">Link Two here</a>
        <a href="#" class="submenu">Link Three here</a>
        <a href="#" class="submenu">Link Four here</a>
    </div>
</body>
</html>

css-tiedosto:

.menu1{
  width: 150px;
  margin-left:25px;
  padding-left:10px;
  padding-top:2px;
  padding-bottom: 2px;
  display:block;
  text-decoration: none;
  color: red;
  border-bottom: 1px dashed black;
  height: 20px;
}

.submenu{
  background-image: url(images/submenu.gif);
  display: block;
  height: 19px;
  margin-left: 38px;
  padding-top: 2px;
  padding-left: 7px;
  color: #333333;
}

.hide{
  display: none;
}

.show{
  display: block;
}

Oon yrittäny sen jälkeen tehdä vähän modifikaatioita tuohon niin, että kerrallaan olisi auki ainoastaan yksi valikko, mutten ole onnistunut. Oisko jollain kokeneemmalla antaa vähän vinkkiä miten sellaisen tuohon lisäis?

Merri [27.07.2006 15:23:34]

"Elegantimpi" ratkaisu, joka ei sotke JavaScriptiä HTML:ään, toimii vaikka JavaScript on selaimessa pois päältä ja on lisäksi rakenteellisesti / sisällöllisesti / semanttisesti fiksumpi: http://merri.net/xhtml_ja_css/js_clickdown_css_menu/

Valikon voi tällä vielä sulkea klikkaamalla sen ulkopuolella. Esimerkki toimii testatusti IE5+, Opera 7+, Firefoxilla, sekä saamieni tietojen mukaan myös Safarilla ja Konquerorilla.

slitzu [28.07.2006 08:22:09]

Juu, hyvältä tuokin näytti, mutta tossa on vaa se vika että ne pudotusvalikot tulee sitten muun sisällön päälle. Tosta mun peräänkuuluttamastani esimerkistä löytyy tutoriaali ja kuvankaappaus täältä:

http://www.interspire.com/content/articles/10/1/Building-An-Expanding-DHTML-Menu-With-CSS-and-JavaScript

Merri [28.07.2006 10:28:48]

Sen kun tyylittelet CSS:llä valikot toisella tavalla, etteivät ne mene sisällön päälle; ei siinä mikään sinua estä :) JavaScripti saa nähdäkseni pysyä täysin samana, ainoa ero tulee siinä miten CSS:llä määrittelee ulkoasun eri tilanteessa.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen