[javascript] Menu in een table - Softwareontwikkeling

dinsdag 14 juni 2005 23:52

Acties:

Verwijderd

Topicstarter

Het probleem:

Voor een studie opdracht ben ik in tijdnood gekomen, werk alleen aan een 2 persoons project..de mede student is in de 1e week van het project gestopt met de opleiding. Kan het me gewoon niet permiteren om nog paar avonden te moeten puzzelen aan het script.. Ben al een hele tijd bezig geweest op DHTML websites, javascript dingen over visible/invisible <td>'s etc. Maar ik krijg het niet voor elkaar om te bouwen wat ik nodig heb voor het hoofdmenu..

De bedoeling:

Afbeeldingslocatie: http://www.ikwileenwebsite.nl/GoT/menu.jpg

Afbeeldingslocatie: http://www.ikwileenwebsite.nl/GoT/menu.jpg

1. het blauwe blokje is een <img>
2. komt de muis op het blokje dan wordt de naastgelegen <td> zichtbaar
3. komt de muisaanwijzer op die <td> dan worden de onderliggende <tr><td>'s zichtbaar

Ik heb al een hele hoop geprobeerd maar het werd steeds een rommeltje waarin de helft werkt, ik verkeer op de rand van depressie... Is er iemand die mij een helpende hand zou kunnen bieden of iets vergelijkbaars heeft liggen?

[ Voor 4% gewijzigd door Verwijderd op 14-06-2005 23:54 ]

woensdag 15 juni 2005 00:02

Acties:

Zoefff

❤ 

Een suckerfish menu met wat creatief gebruik van CSS en background-images, verreweg de meest snelle en overzichtelijke optie.

De structuur word dan iets als

<ul>
    <li>$blauwblokje
        <ul>
            <li>Menutitel
                <ul>
                    <li>link1</li>
                    <li>link2</li>
                    <li>link3</li>
                    <li>link4</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Hm. Dat ziet er toch nog wel een beetje warrig uit, maar het lijkt me wel het makkelijkste.

Zorg dus dat je eerste <ul> een blauw blokje is (met CSS of desnoods een background-image). De 2e <ul> heeft alleen een zwarte border, en de 3e ul moet je een background-image geven, zodat het lijkt dat de tabel-cellen links gewoon doorlopen.

Snap je wat ik bedoel?

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

woensdag 15 juni 2005 00:21

Acties:

André

Analytics dude

code:

<html>
  <head>
    <title>Test</title>
    <style>
      * {
        font-family: arial;
        font-size: 14px;
      }

      .menu div {
        border: 2px solid #000000;
        height: 20px
      }

      .blokje {
        width: 20px;
        float: left;
        cursor: pointer;
        cursor: hand;
        height: 20px;
        line-height: 20px;
      }

      .submenu {
        width: 150px;
        float: left;
        cursor: pointer;
        cursor: hand;
        height: 20px;
        line-height: 20px;
      }

      .blokje img {
        margin: 2px;
      }
    </style>
    <script type="text/javascript">
      function show(id)
      {
        document.getElementById(id).style.display = "block";
      }

      function hide(id1, id2)
      {
        document.getElementById(id1).style.display = "none";
        document.getElementById(id2).style.display = "none";
      }

      tijd = false;
    </script>
  </head>
  <body>
    <div class="menu">
      <div class="blokje" onmouseover="show('sub1')"><img src="bla.jpg" width="16" height="16"></div>
      <div class="submenu" id="sub1" style="display: none" onmouseover="show('item1')">menutitel</div>
      <br style="clear: both" />
      <div id="item1" style="border: 0; display: none;" onmouseover="if (tijd) { clearTimeout(tijd); }" onmouseout="tijd = setTimeout(function() { hide('item1', 'sub1') }, 20)">
        <div class="blokje"> </div><div class="submenu">link 1</div><br style="clear: both" />
        <div class="blokje"> </div><div class="submenu">link 2</div><br style="clear: both" />
        <div class="blokje"> </div><div class="submenu">link 3</div><br style="clear: both" />
        <div class="blokje"> </div><div class="submenu">link 4</div><br style="clear: both" />
        <div class="blokje"> </div><div class="submenu">link 5</div><br style="clear: both" />
      </div>
    </div>
  </body>
</html>

Even snel in elkaar geflanst, let niet op de code

Hier kun je wel verder mee bouwen.

[ Voor 5% gewijzigd door André op 15-06-2005 00:25 ]

woensdag 15 juni 2005 00:37

Acties:

Zoefff

❤ 

Werkt ook

Ik heb ook iets waar je mee verder kan bouwen. Het werkt nog niet in IE, maar met behulp van het vorige linkje dat ik je gaf kan je het wel werkend maken. Let aub ook bij mij niet op de messy-css. Het werkt in ieder geval (een beetje)

Cascading Stylesheet:

#blokje {
    padding:0px;
    margin:0px;
}
#blokje li {
    width:20px;
    height:20px;
    border:3px solid black;
    background-image:url(blauwblokje.gif);
    list-style-type:none;
}
#blokje li ul {
    display:none;
}
#blokje li:hover ul {
    display:block;
}
#menu {
    padding:0px;
    margin:0px;
}
#menu li {
    width:100px;
    height:20px;
    border:3px solid black;
    background-image:none;
    background-color:#FFFFFF;
    position:relative;
    top:-3px;
    left:20px;
}
#menu ul li {
    display:none;
}
#menu li:hover ul li {
    display:block;
}
#items {
    padding:0px;
    margin:0px;
}
#items li {
    width:100px;
    height:20px;
    border-left:3px solid black;
    border-right:3px solid black;
    border-bottom:3px solid black;
    border-top:0px;
    background-image:url(itembg.gif);
    position:relative;
    top:3px;
    left:-26px;
    padding-left:23px;
}

HTML:

<ul id='blokje'>
    <li>
        <ul id='menu'>
            <li>Menutitel
                <ul id='items'>
                    <li>link1</li>
                    <li>link2</li>
                    <li>link3</li>
                    <li>link4</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Voorbeeld (FF only)

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

woensdag 15 juni 2005 00:40

Acties:

crisp

Devver

Pixelated

Ik denk dat de extra ul overbodig is, maar daarvoor zou je de 'menutitel' waarschijnlijk wel in een span oid moeten zetten

Intentionally left blank

woensdag 15 juni 2005 00:43

Acties:

Zoefff

❤ 

Hm ja, dat is waar. Maar omdat de TS met 3 menu-levels kwam, dacht ik ook meteen aan 3 lijsten

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

woensdag 15 juni 2005 17:35

Acties:

Verwijderd

Topicstarter

Zoefff schreef op woensdag 15 juni 2005 @ 00:02:
Snap je wat ik bedoel?

niet direct, maar na een paar keer herlezen was het kwartje gevallen

bedankt voor je snelle reactie en bedankt voor die handige link, heb me er in verdiept maar ik heb voor nu voor de oplossing van André gekozen

André schreef op woensdag 15 juni 2005 @ 00:21:
Even snel in elkaar geflanst, let niet op de code Hier kun je wel verder mee bouwen.

Ik heb er de hele nacht op geknutseld en ben tot het volgende resultaat resultaat gekomen: menu
(Werkt goed in FF, IE mouseover vervalt bij de 1px bottom-margin maar daar verzin ik nog wel wat op)

Alleen ik ben nu vast gelopen op het volgende, als ik het menu wil uitbreiden dan werkt het niet lekker meer.. Van alles blijft opengeklapt..of te vroeg dicht geklapt: menu2
(de menu div's even horizontaal naast elkaar gezet doormiddel van een table, niet de netste manier van positioneren maar ik kreeg de div's anders niet horizonrtaal naast elkaar)

bedoeling is dat er 5 menu div's naast elkaar komen, wat met een positie relatie aan elkaar het volgende effect zou moeten geven:
Afbeeldingslocatie: http://www.ikwileenwebsite.nl/GoT/menu2.jpg

Afbeeldingslocatie: http://www.ikwileenwebsite.nl/GoT/menu2.jpg

(die 2px border is alleen voor de beeldvorming van het voorbeeld)

woensdag 15 juni 2005 18:34

Acties:

Zoefff

❤ 

Niet om het een of ander, maar in mijn menu is dat wel heel makkelijk aan te passen

http://zoefff.gotdns.com/got/menu.htm

Voeg een behavior toe, en :hover werkt ook in IE:

http://zoefff.gotdns.com/got/menu_ie.htm

Je moet dan alleen nog even wat creatief knutselen aan de CSS (paddings, en z-index) om de boel er in IE ook mooi uit te laten zien.

[ Voor 48% gewijzigd door Zoefff op 15-06-2005 18:44 ]

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

woensdag 15 juni 2005 22:22

Acties:

Verwijderd

Topicstarter

Bruut, je hebt me overtuigd

Ik ben er even op verder gaan puzzelen en het werkt nu perfect in MOZ en Netscape.. Enkel, zoals je al aangaf, doet IE eigenwijs.

Het probleem zit volgende mij in deze margin:

Cascading Stylesheet:

1	#blokje:hover { margin-right:95px; }

Hier is mijn versie: menu3

Ik heb tot nu toe nog geen effectieve vervanger weten te vinden voor die margin..mocht je een idee hebben dan hoor ik dat uiteraard graag.

*Offtopic: misschien is deze topic benaming beter gepast: [CSS] 3 lagen menu met suckerfish

[ Voor 14% gewijzigd door Verwijderd op 15-06-2005 22:30 ]

donderdag 16 juni 2005 03:50

Acties:

Verwijderd

Topicstarter

Opgelost:

Cascading Stylesheet:

1	#blokje:hover { width:120px; }

Ik dacht eerst aan de IE doubled-margin bug, uren aan het experimenteren geweest met display:inline etc totdat ik opeens een helder moment kreeg.

Het werkt nu, in alle browsers.

Ik post het resultaat nog wel even als de website gelanceerd wordt, volgende week vrijdag is de eindpresentatie waarbij ik de hier ontvangen steun zeker zal vermelden. -> en nu tandenpoetsen

donderdag 16 juni 2005 13:12

Acties:

Zoefff

❤ 

Houd je er wel rekening mee dat IE geen transparancy in PNG ondersteund? Eventueel met een javascript-oplossing wel, maar GIF gebruiken is vaak makkelijker (hoewel PNG mooier is, helaas).

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

donderdag 16 juni 2005 23:58

Acties:

kleautviool

Hou je er ook rekening mee dat je nu meerdere keren een id met dezelfde waarde (blokje en items) defineert

Je mag een waarde van een id maar 1 keer gebruiken, ik zou er dus een class van maken

vrijdag 17 juni 2005 00:12

Acties:

djluc

Verder is het interface-logisch gezien handiger als je met je submenu onder de afbeelding in het hoofmenu begint. Nu ga je met je muis naar rechts en dan naar beneden. Logischer is het om gewoon recht naar beneden te gaan. Je kan dit doen door gewoon een transparant gedeelte te regelen met je padding.