CSS Dit menu namaken?

[dominion99]

Ik weet het niet precies maar is het menu op de volgende link na te maken met CSS???

CSS menu link

ik vindt het namelijk wel ontzettend cool

[mbravenboer]

Ter informatie: het menu op die site is een Java Applet...

Dit is meer een topic voor W&G .

(het zal trouwens erg lastig worden...)

[Verwijderd]

Met CSS alleen gaat het niet lukken; je zult een client-side script nodig hebben dat die items heen en weer beweegt. Met een beetje Javascript erbij is dat menu prima te doen.

[Hermanvh]

Je hebt deze Java-class nodig.

En dan een stukje van de volgende code,die je zelf kan aanpassen natuurlijk

code:

<applet CODE="ShiftingMenu.class" WIDTH="120" HEIGHT="314" ALIGN="top" border="0">
    <param name="tabimage" value="tabimage2.gif">
    <param name="tabTextOffset" value="12">
    <param name="frame" value="rechts">
    <param name="tabColor" value="000000">
    <param name="itemBGColor" value="000000">
    <param name="itemFGColor" value="ffffff">
    <param name="itemHLColor" value="ffffff">
    <param name="itemBGHLColor" value="800000">
    <param name="topicfontface" value="Helvetica">
    <param name="topicfontstyle" value="plain">
    <param name="topicfontsize" value="16">
    <param name="itemfontface" value="Helvetica">
    <param name="itemfontstyle" value="plain">
    <param name="itemfontsize" value="11">
    <param name="menus" value="
INLEIDING{

Stijl 1;URL=stijl1.htm;_rechts|
Stijl 2;URL=stijl2.htm;_rechts|
Stijl 3;URL=stijl3.htm;_rechts|
Stijl 4;URL=stijl4.htm;_rechts|
Stijl 5;URL=stijl5.htm;_rechts|
Stijl 6;URL=stijl6.htm;_rechts|
}
    METHODE{

Syntaxis;URL=syntaxis.htm;_rechts|
Inline;URL=inline.htm;_rechts|
Stijlblok;URL=stijlblo.htm;_rechts|
Stijlblad;URL=stijlbla.htm;_rechts|
Methode;URL=methode.htm;_rechts|
Cascade;URL=cascade.htm;_rechts|
    }
    SELECTORS{
HTML-elementen;URL=html.htm;_rechts|
CLASS;URL=class.htm;_rechts|
ID;URL=id.htm;_rechts|
Pseudo-class;URL=pseudo.htm;_rechts|
Groeperen;URL=groep.htm;_rechts|
Contextueel;URL=context.htm;_rechts|
        
    }
    EENHEDEN{
Lengte;URL=lengte.htm;_rechts|
Percentages;URL=percent.htm;_rechts|
Kleur;URL=kleur.htm;_rechts|
URL's;URL=url.htm;_rechts|
        
    }
        
REFERENTIES{
Lettertypen;URL=tlettert.htm;|
Kleur/Achtergrond;URL=tklachte.htm;|
Tekst;URL=ttekst.htm;|
Omkadering;URL=tkaders.htm;|
Indeling;URL=tindelin.htm;|
Positioneren;URL=tpositio.htm;|
Afdrukken;URL=tafdrukk.htm;|
Filteren;URL=tfilter.htm;|
Pseudo-classes;URL=tpseudok.htm;|

}
HANDIGHEIDJES{
Commentaar;URL=comment.htm;_rechts|
DIV&amp;SPAN;URL=divspan.htm;_rechts|
Inspringen;URL=inspring.htm;_rechts|
Verkleur;URL=verkleur.htm;_rechts|
Verdwijn;URL=verdwijn.htm;_rechts|

}

FRONTPAGE2000{
Stijlkenmerken;URL=kenmfp2.htm|
Inline;URL=inlinefp2.htm;|
Stijlblok;URL=stblkfp2.htm;|
Class;URL=classfp2.htm;|
ID;URL=idfp2.htm;|
Stijlblad;URL=stbldfp2.htm;|
Kleuren;URL=fpkleur.htm;|
Thema's;URL=thema.htm;|

}

OEFENINGEN{
Lettertypen;URL=letterty.htm;|
Teksteigenschappen;URL=teksteig.htm;|
ID;URL=oefid.htm;|
Achtergrond/Knop;URL=achtergr.htm;|
Zweven;URL=zweven.htm;|
Omkaderen;URL=kadereig.htm;|
Pseudo-class;URL=oefpseud.htm|
Positioneren;URL=position.htm;|
Tekstvak;URL=tekstvak.htm;|
Filteren;URL=filteren.htm;|

}
">
    </applet>

[Dennis]

Menu zou trouwens niet zo moeilijk na te maken zijn met DHTML.

[Woudloper]

Naar mijn weten had Xtentic laatst precies zo'n vraag gesteld...

[ACM]

P&W -> W&G

[Verwijderd]

Op woensdag 23 januari 2002 05:43 schreef Hermanvh het volgende:
Je hebt deze Java-class nodig.

En dan een stukje van de volgende code,die je zelf kan aanpassen natuurlijk

code:

<applet CODE="ShiftingMenu.class" WIDTH="120" HEIGHT="314" ALIGN="top" border="0">
    <param name="tabimage" value="tabimage2.gif">
    <param name="tabTextOffset" value="12">
    <param name="frame" value="rechts">
    <param name="tabColor" value="000000">
    <param name="itemBGColor" value="000000">
    <param name="itemFGColor" value="ffffff">
    <param name="itemHLColor" value="ffffff">
    <param name="itemBGHLColor" value="800000">
    <param name="topicfontface" value="Helvetica">
    <param name="topicfontstyle" value="plain">
    <param name="topicfontsize" value="16">
    <param name="itemfontface" value="Helvetica">
    <param name="itemfontstyle" value="plain">
    <param name="itemfontsize" value="11">
    <param name="menus" value="
INLEIDING{

Stijl 1;URL=stijl1.htm;_rechts|
Stijl 2;URL=stijl2.htm;_rechts|
Stijl 3;URL=stijl3.htm;_rechts|
Stijl 4;URL=stijl4.htm;_rechts|
Stijl 5;URL=stijl5.htm;_rechts|
Stijl 6;URL=stijl6.htm;_rechts|
}
    METHODE{

Syntaxis;URL=syntaxis.htm;_rechts|
Inline;URL=inline.htm;_rechts|
Stijlblok;URL=stijlblo.htm;_rechts|
Stijlblad;URL=stijlbla.htm;_rechts|
Methode;URL=methode.htm;_rechts|
Cascade;URL=cascade.htm;_rechts|
    }
    SELECTORS{
HTML-elementen;URL=html.htm;_rechts|
CLASS;URL=class.htm;_rechts|
ID;URL=id.htm;_rechts|
Pseudo-class;URL=pseudo.htm;_rechts|
Groeperen;URL=groep.htm;_rechts|
Contextueel;URL=context.htm;_rechts|
        
    }
    EENHEDEN{
Lengte;URL=lengte.htm;_rechts|
Percentages;URL=percent.htm;_rechts|
Kleur;URL=kleur.htm;_rechts|
URL's;URL=url.htm;_rechts|
        
    }
        
REFERENTIES{
Lettertypen;URL=tlettert.htm;|
Kleur/Achtergrond;URL=tklachte.htm;|
Tekst;URL=ttekst.htm;|
Omkadering;URL=tkaders.htm;|
Indeling;URL=tindelin.htm;|
Positioneren;URL=tpositio.htm;|
Afdrukken;URL=tafdrukk.htm;|
Filteren;URL=tfilter.htm;|
Pseudo-classes;URL=tpseudok.htm;|

}
HANDIGHEIDJES{
Commentaar;URL=comment.htm;_rechts|
DIV&amp;SPAN;URL=divspan.htm;_rechts|
Inspringen;URL=inspring.htm;_rechts|
Verkleur;URL=verkleur.htm;_rechts|
Verdwijn;URL=verdwijn.htm;_rechts|

}

FRONTPAGE2000{
Stijlkenmerken;URL=kenmfp2.htm|
Inline;URL=inlinefp2.htm;|
Stijlblok;URL=stblkfp2.htm;|
Class;URL=classfp2.htm;|
ID;URL=idfp2.htm;|
Stijlblad;URL=stbldfp2.htm;|
Kleuren;URL=fpkleur.htm;|
Thema's;URL=thema.htm;|

}

OEFENINGEN{
Lettertypen;URL=letterty.htm;|
Teksteigenschappen;URL=teksteig.htm;|
ID;URL=oefid.htm;|
Achtergrond/Knop;URL=achtergr.htm;|
Zweven;URL=zweven.htm;|
Omkaderen;URL=kadereig.htm;|
Pseudo-class;URL=oefpseud.htm|
Positioneren;URL=position.htm;|
Tekstvak;URL=tekstvak.htm;|
Filteren;URL=filteren.htm;|

}
">
    </applet>

Ziet er wel VET ingewikkeld uit. Waar plaats je die code dan op je pagina???

[Verwijderd]

Op woensdag 23 januari 2002 11:26 schreef fredbuskirk het volgende:

Ziet er wel VET ingewikkeld uit. Waar plaats je die code dan op je pagina???

Ergens tussen <body> en </body>

En laat die quote voortaan maar zitten hoor, dat leest erg irritant.

[Willem]

Op woensdag 23 januari 2002 11:26 schreef fredbuskirk het volgende:
Ziet er wel VET ingewikkeld uit.

Vind je

As Cheatah said: Je hoeft voortaan niet meer helemaal dat hele verhaal te quoten joh.



_{/edit
Over de link die de topicposter plaatst: dan maak je zo'n site, best aardige info hier en daar,
DOEN ZE HET MET COMIC SANS}

[Verwijderd]

Op woensdag 23 januari 2002 11:29 schreef Cheatah het volgende:

[..]

Ergens tussen <body> en </body>

En laat die quote voortaan maar zitten hoor, dat leest erg irritant.

Ik bedoelde eigenlijk: hoe pas je dit aan dan zodat het werkt op een site. Ik heb hem nu bijvoorbeeld op een lege pagina gezet en met de class geupload. Ik zie echter alleen een grijs vlak.



Ik weet dat het niet al te profi klinkt, maar ik weet gewoon niet zoveel van Java Applets (maar zou dat wel willen gaan gebruiken).

[martijnr17]

ik heb ook ff gekeken en krijg ook een mooi grijs schermpje

[Willem]

Op woensdag 23 januari 2002 11:46 schreef fredbuskirk het volgende:
Ik bedoelde eigenlijk: hoe pas je dit aan dan zodat het werkt op een site. Ik heb hem nu bijvoorbeeld op een lege pagina gezet en met de class geupload. Ik zie echter alleen een grijs vlak.



Ik weet dat het niet al te profi klinkt, maar ik weet gewoon niet zoveel van Java Applets (maar zou dat wel willen gaan gebruiken).

Als je iets jat, jat het dan goed. En als het dan niet werkt, ga hier dan niet zitten klagen. Ga gewoon eens op pad, google.com is je vriend en je komt er vast wel uit met een beetje doorzettingsvermogen. Ga je verdiepen in (d)HTML, CSS en JavaScript. Zoek een beetje op deze websites:


www.w3schools.com
www.irt.org
www.google.com

[Verwijderd]

Ho, ho, ho, ho, ho

Ik zit NIET te klagen, ik zeg toch dat ik niet veel weet van Java Applets...

[crisp]

Ach, het is zo makkelijk in DHTML:

code:

<html>
<head>
<title>Navigatie</title>
<style type="text/css">
<!--
body {
 background-color: #000000;
}
.menuheader {
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 10pt;
 font-weight: 800;
 color: #FFFFFF;
 background-color: #0000A0;
 padding-left: 4px;
 cursor: hand;
}
.menuitem, A {
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 10pt;
 font-weight: 400;
 color: #FFFFFF;
 background-color: #0000D0;
 width: 154px;
 height: 18px;
 padding-left: 2px;
}
A.normal {
 font-weight: 400;
}
A.bold {
 font-weight: 800;
}
#menu1 {position:relative; width: 154px; height: 18px; left:0px; top:0px; z-index:0; overflow: hidden;}
#menu2 {position:relative; width: 154px; height: 18px; left:0px; top:18px; z-index:0; overflow: hidden;}
#menu3 {position:relative; width: 154px; height: 18px; left:0px; top:36px; z-index:0; overflow: hidden;}
#menu4 {position:relative; width: 154px; height: 18px; left:0px; top:54px; z-index:0; overflow: hidden;}
-->
</style>
</head>
<body onSelectStart="return false">

<div id="menu1" onMouseOver="this.style.height='auto'" onMouseOut="this.style.height='18px'">
  <table width=154 border=0 cellspacing=0 cellpadding=1>
    <tr>
    <td class="menuheader" height=18>Menu 1</TD>
    </tr>
  </table>
  <div class="menuitem"><a class="normal" href="item11.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item1</a></div>
  <div class="menuitem"><a class="normal" href="item12.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item2</a></div>
  <div class="menuitem"><a class="normal" href="item13.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item3</a></div>
  <div class="menuitem"><a class="normal" href="item14.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item4</a></div>
</div>

<div id="menu2" onMouseOver="this.style.height='auto'" onMouseOut="this.style.height='18px'">
  <table width=154 border=0 cellspacing=0 cellpadding=1>
    <tr>
    <td class="menuheader" height=18>Menu 2</TD>
    </tr>
  </table>
  <div class="menuitem"><a class="normal" href="item21.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item1</a></div>
  <div class="menuitem"><a class="normal" href="item22.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item2</a></div>
  <div class="menuitem"><a class="normal" href="item23.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item3</a></div>
  <div class="menuitem"><a class="normal" href="item24.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item4</a></div>
</div>

<div id="menu3" onMouseOver="this.style.height='auto'" onMouseOut="this.style.height='18px'">
  <table width=154 border=0 cellspacing=0 cellpadding=1>
    <tr>
    <td class="menuheader" height=18>Menu 3</TD>
    </tr>
  </table>
  <div class="menuitem"><a class="normal" href="item31.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item1</a></div>
  <div class="menuitem"><a class="normal" href="item32.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item2</a></div>
  <div class="menuitem"><a class="normal" href="item33.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item3</a></div>
  <div class="menuitem"><a class="normal" href="item34.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item4</a></div>
</div>

<div id="menu4" onMouseOver="this.style.height='auto'" onMouseOut="this.style.height='18px'">
  <table width=154 border=0 cellspacing=0 cellpadding=1>
    <tr>
    <td class="menuheader" height=18>Menu 4</TD>
    </tr>
  </table>
  <div class="menuitem"><a class="normal" href="item41.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item1</a></div>
  <div class="menuitem"><a class="normal" href="item42.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item2</a></div>
  <div class="menuitem"><a class="normal" href="item43.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item3</a></div>
  <div class="menuitem"><a class="normal" href="item44.htm" target="right" onMouseOver="this.className='bold'" onMouseOut="this.className='normal'">item4</a></div>
</div>

</body>
</html>

[Verwijderd]

Ziet er wel aardig uit, gejat of zelf gemaakt?

[Pelle]

Op woensdag 23 januari 2002 12:31 schreef Herr_Dr_Dr_Aigner het volgende:
Ziet er wel aardig uit, gejat of zelf gemaakt?

crisp is DHTML-goeroe. Zelf gemaakt dus.

[cutter]

http://www.tigers.de/java/navigation/shiftingmenu/shiftingmenu.htm

Heb je ALLE java class applets geripped...... (dus ook ANode.class)

Beter goed jatten dan slecht rippen....

[crisp]

Op woensdag 23 januari 2002 12:31 schreef Herr_Dr_Dr_Aigner het volgende:
Ziet er wel aardig uit, gejat of zelf gemaakt?

Jatten is niet mijn stijl. Lenen ok, maar dan zet ik het er wel bij (zelf gemaakt dus)

[Verwijderd]

Nou, da's best knap. Waar heb je die DHTML kennis opgedaan?

[crisp]

Op woensdag 23 januari 2002 12:53 schreef Herr_Dr_Dr_Aigner het volgende:
Nou, da's best knap. Waar heb je die DHTML kennis opgedaan?

Tutorials lezen en gewoon uitproberen.
Verder veel voorbeelden bekijken.

[SchizoDuckie]

ooo.. je bedoelt zoiets! http://www.nvlf.nl/razor/index.html



Deze ben ik vanaf scratch aant schrijven, maar je zou evt. ook die van www.nvlf.nl kunnen gebruiken (Die is gemaakt door Clay, dé DHTML guru van dit forum

[Clay]

papa_eend:
Die is gemaakt door Clay, dé DHTML guru van dit forum

't is geen wedstrijd hoor

Die op nvlf is trouwens wel vrij oud, dat doe ik tegenwoordig heel anders verder doe ik erg veel met layers qua dhtml, maar met puur style attributen doe ik nog niet zo veel, ik schrijf nog steeds lappen code waar een paar regels css ook zouden volstaan (voor effecten dan), daarmee ben ik nu eigenlijk alleen nog maar aan het experimenteren en klooien, met name ook omdat bijna alles wat ik maak het nog steeds in NS4 moet doen en da's kut.

verder over jatten, iemand zal het toch als eerste een keer geschreven moeten hebben voordat iemand anders het jatten kan he, code "bestaat" niet zomaar inene

[Verwijderd]

Op woensdag 23 januari 2002 13:09 schreef papa_eend het volgende:
je zou evt. ook die van www.nvlf.nl kunnen gebruiken (Die is gemaakt door Clay, dé DHTML guru van dit forum

Heb je hier ook de class van? Ik wil deze wel eens uitproberen (wees niet bang, niet jàtten hoor). Ik vind het een beschaafde shifting menu.

[SchizoDuckie]

Op woensdag 23 januari 2002 13:22 schreef Clay het volgende:

[..]

't is geen wedstrijd hoor

^{n00bs moeten toch een beetje respect voor je krijgen he?}

[SchizoDuckie]

Op woensdag 23 januari 2002 13:24 schreef Herr_Dr_Dr_Aigner het volgende:

[..]

Heb je hier ook de class van? Ik wil deze wel eens uitproberen (wees niet bang, niet jàtten hoor). Ik vind het een beschaafde shifting menu.

het is geen class, het is Javascript.

http://www.nvlf.nl/pullmenu.js

Als je de source van een pagina bekijkt kun je uitvogelen hoe het werkt. succes

[Verwijderd]

Op woensdag 23 januari 2002 12:09 schreef crisp het volgende:
Ach, het is zo makkelijk in DHTML:

Hoe haal je die spaties weg tussen de verschillende menu's (menu1, menu2, menu3, menu4)?

[crisp]

Op woensdag 23 januari 2002 14:30 schreef Herr_Dr_Dr_Aigner het volgende:

[..]

Hoe haal je die spaties weg tussen de verschillende menu's (menu1, menu2, menu3, menu4)?

Bij #menu2 t/m #menu4 top: 0px invullen

[dominion99]

Hier is mijn uiteindelijke versie

hij is iets compacter wat betreft het HTML gebeuren en doet precies hetzelfde

code:

<HTML>
  <HEAD>
    <TITLE>Menu</TITLE>
    <STYLE TYPE="text/css">
    
        BODY          { background-image :
                    url(../../icons/background.jpg);
                  background-position: center;
                  background-repeat: repeat;
                  background-color : #FFFFFF;
                  background-attachement: fixed;
                }
    DIV.Menu        { width: 100 px;
                  height: 17 px;
                  overflow: hidden;
                }
    DIV.MenuItem    { width: 100%;
                  color: black;
                  text-align: center;
                  border-color: black;
                  border-style: solid;
                  border-left-width: 10 px;
                  border-right-width: 2 px;
                  border-top-width: 2 px;
                  border-bottom-width: 0 px;
                  font-family: Arial, Sans-Serif;
                  font-size: 12 px;
                  font-weight: bold;
                }
    A.SubItem      { width: 100%;
                  text-align: center;
                  border-color: #000000;
                  border-style: solid;
                  border-left-width: 0 px;
                  border-right-width: 0 px;
                  border-top-width: 2 px;
                  border-bottom-width: 0 px;
                  font-family: Arial, Sans-Serif;
                  font-size: 12 px;
                  text-decoration: none;
                  margin-left: 10; 
                                              }
    A.SubItem:Link    { font-weight: 400;
                  color: black;
                  background-color: #FF904D;
                }
    A.SubItem:Visited { font-weight: 400;
                  color: black;
                  background-color: #F0C374;
                }
    A.SubItem:Hover   { font-weight: 800;
                  color: white;
                  background-color: black;
                }
    </STYLE>
  </HEAD>
  <BODY>
  
    <DIV CLASS="Menu" onMouseOver="style.height='auto'" onMouseOut="style.height='17px'">
     <DIV CLASS="MenuItem">Homepage</DIV>
     <A CLASS="SubItem" HREF="main.php">Start</A><BR/>
    </DIV><BR/>
    
    <DIV CLASS="Menu" onMouseOver="style.height='auto'" onMouseOut="style.height='17px'">
    <DIV CLASS="MenuItem">Bestellen</DIV>
    <A class="SubItem" href="bestellen.php" target="main">Bestellen</A><BR>
    <A class="SubItem" href="bekijkbestel.php" target="main">Bekijk bestelling</A><BR>
    <A class="SubItem" href="klantgegevens.php" target="main">Klantgegevens</A><BR>
    </DIV><BR/>
  
    <DIV CLASS="Menu" onMouseOver="style.height='auto'" onMouseOut="style.height='17px'">
    <DIV CLASS="MenuItem">Links</DIV>
    <A CLASS="SubItem" HREF="http://www.tweakers.net" TARGET="main">Tweakers</A><BR>
    <A CLASS="SubItem" HREF="http://www.startpagina.nl" TARGET="main">Startpagina</A><BR>
    </DIV><BR/>
    
    <DIV CLASS="Menu" onMouseOver="style.height='auto'" onMouseOut="style.height='17px'">
    <DIV CLASS="MenuItem">Aanbieding</DIV>
    <A CLASS="SubItem" HREF="aanbieding.php" TARGET="main">Bekijken</A><BR>
    </DIV><BR/>    

    <DIV CLASS="Menu" onMouseOver="style.height='auto'" onMouseOut="style.height='17px'">
    <DIV CLASS="MenuItem">Gastenboek</DIV>
    <A CLASS="SubItem" HREF="showguest.php" TARGET="main">Bekijken</A><BR>
    <A CLASS="SubItem" HREF="addguest.php" TARGET="main">Toevoegen</A><BR>
    </DIV><BR/>    
    
    <DIV CLASS="Menu" onMouseOver="style.height='auto'" onMouseOut="style.height='17px'">
    <DIV CLASS="MenuItem">Tour</DIV>
    <A CLASS="SubItem" HREF="Tour.php" TARGET="main">Neem tour</A><BR>
    </DIV><BR/>    
    
    <DIV CLASS="Menu" onMouseOver="style.height='auto'" onMouseOut="style.height='17px'">
    <DIV CLASS="MenuItem">Informatie</DIV>
    <A CLASS="SubItem" HREF="overons.php" TARGET="main">Over ons</A><BR>
    <A CLASS="SubItem" HREF="algemeneinfo.php" TARGET="main">Algemeen</A><BR>
    </DIV><BR/>    
    
    
  </BODY>
</HTML>

Tweakers bedankt

[cutter]

Netjes, alleen:

code:

A.SubItem:Hover   { font-weight: 800;
                  color: white;
                  background-color: black;
                }

800 vervangen door 400 anders verspringt je bekijk bestelling naar twee regels bij onmouse Hover...

[crisp]

En dan nu de set-back: hij werkt dus niet in Opera6 en NS4 (heb ik net pas kunnen testen).
NS4 ala, maar dat zelfs Opera6 dit niet slikt....

[Verwijderd]

Op woensdag 23 januari 2002 17:54 schreef crisp het volgende:
En dan nu de set-back: hij werkt dus niet in Opera6 en NS4 (heb ik net pas kunnen testen).
NS4 ala, maar dat zelfs Opera6 dit niet slikt....

Opera zuigt, dat is een ramp voor iedere DHTML-er.

[Woudloper]

Cheatah: Opera zuigt, dat is een ramp voor iedere DHTML-er.

Amen

[dominion99]

[b]Op woensdag 23 januari 2002 17:53 schreef cutter 800 vervangen door 400 anders verspringt je bekijk bestelling naar twee regels bij onmouse Hover...

Dat had ik gezien ja, ik heb de regel maar aangepast in "bekijken" want het maakt niks uit 400/800 hij staat bij mij standaard in 2 regels

trouwens het verschil tussen Mozzilla en Netscape ten opzichte van IE is wel heel erg groot

Mozilla laat alle submenus op een stapel zien
en Netscape laat alles tegelijk zien en doet niks met de mouse-over event

ach ja niet alles is perfect

[crisp]

Op woensdag 23 januari 2002 18:02 schreef dominion99 het volgende:

[..]

Dat had ik gezien ja, ik heb de regel maar aangepast in "bekijken" want het maakt niks uit 400/800 hij staat bij mij standaard in 2 regels

trouwens het verschil tussen Mozzilla en Netscape ten opzichte van IE is wel heel erg groot

Mozilla laat alle submenus op een stapel zien
en Netscape laat alles tegelijk zien en doet niks met de mouse-over event

ach ja niet alles is perfect

Dan is jouw implementatie niet perfect, want de code van mij doet het prima in NS6 en Mozilla...

[edit]
wat Opera betreft ben ik erachter dat als de page eenmaal gerenderd is hij zich niets meer aantrekt van relatieve positioning; oftewel: de relatieve positie is opeens fixed geworden!
Ook wil hij de menu's alleen maar uitklappen als je pixelHeight gebruikt ipv height. height = 'auto' snapt 'ie natuurlijk al helemaal niet.
Verder merk ik dat niet alle links het doen als je het eenmaal zover hebt dat een menuutje uitklapt. Als je echter de pagina opstart met uitgeklapte menu's en ze dan weer inklapt gaat het wel goed.
Al met al behoorlijk buggy dus, en een ramp voor DHTML programmeurs --> niet aan beginnen dus.

NS4 heeft zoals gewoonlijk problemen met de geneste div's...

Ik denk dat je sneller af bent door voor NS4 en Opera een niet-dynamische pagina te maken dan door het script op alle mogelijke manieren om te gaan bouwen totdat het in alle versies werkt. Misschien kan het wel, maar mooi en overzichtelijk zal het nooit worden.

Oh ja, ik zal nog eens kijken wat er fout is in het script van dominion99 voor Mozilla

[crisp]

Nog even wat gevogeld met het scriptje van dominion99 in NS/Mozilla:

Wat ze niet fijn vinden zijn spaties in de CSS tussen een getal en 'px' - ergo: spaties weghalen en het menu werkt al aardig.
Verder raad ik aan om de links toch in een div te zetten met een aparte class:

bv:

code:

    DIV.Subitem  { width: 100%;
                  text-align: center;
                  border-color: #000000;
                  border-style: solid;
                  border-left-width: 0px;
                  border-right-width: 0px;
                  border-top-width: 2px;
                  border-bottom-width: 0px;
                  margin-left: 10px;
                  background-color: #FF904D; 
                }
    A.SubItem      { width: 100%;
                  font-family: arial, Sans-Serif;
                  font-size: 12px;
                  text-decoration: none;
                }

en dan:

code:

    <DIV CLASS="Menu" onMouseOver="this.style.height='auto'" onMouseOut="this.style.height='17px'">
     <DIV CLASS="MenuItem">Homepage</DIV>
     <DIV CLASS="SubItem"><A CLASS="SubItem" HREF="main.php">Start</A></DIV>
    </DIV><BR/>

Zo werkt het in NS6 en Mozilla nagenoeg identiek. Alleen de width: 100% voor de A class pakt 'ie niet, zodat de hover beperkt is tot de breedte van de link tekst (vandaar ook de DIV eromheen met een achtergrond kleur)

[Verwijderd]

Ik heb de toevoeging van de extra DIV's geprobeerd, maar het werd er niet mooier op in IE. Er kwam een witregel tussen de subitems te zitten:

<HTML>
<HEAD>
<TITLE>Menu</TITLE>
<STYLE TYPE="text/css">

BODY { background-image :
url(../../icons/background.jpg);
background-position: center;
background-repeat: repeat;
background-color : #FFFFFF;
background-attachement: fixed;
}
DIV.Menu { width: 100px;
height: 17px;
overflow: hidden;
}
DIV.MenuItem { width: 100%;
color: black;
text-align: center;
border-color: black;
border-style: solid;
border-left-width: 10px;
border-right-width: 2px;
border-top-width: 2px;
border-bottom-width: 0px;
font-family: Arial, Sans-Serif;
font-size: 12px;
font-weight: bold;
}
A.SubItem { width: 100%;
text-align: center;
border-color: #000000;
border-style: solid;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 2px;
border-bottom-width: 0px;
font-family: Arial, Sans-Serif;
font-size: 12px;
text-decoration: none;
margin-left: 10;
}
A.SubItem:Link { font-weight: 400;
color: black;
background-color: #FF904D;
}
A.SubItem:Visited { font-weight: 400;
color: black;
background-color: #F0C374;
}
A.SubItem:Hover { font-weight: 400;
color: white;
background-color: black;
}
</STYLE>
</HEAD>
<BODY>

<DIV CLASS="Menu" onMouseOver="style.height='auto'" onMouseOut="style.height='17px'">
<DIV CLASS="MenuItem">Homepage</DIV>
<DIV CLASS="SubItem"><A CLASS="SubItem" HREF="main.php">Start</A></DIV><BR/>
</DIV><BR/>

<DIV CLASS="Menu" onMouseOver="style.height='auto'" onMouseOut="style.height='17px'">
<DIV CLASS="MenuItem">Bestellen</DIV>
<DIV CLASS="SubItem"><A class="SubItem" href="bestellen.php" target="main">Bestellen</A></DIV><BR>
<DIV CLASS="SubItem"><A class="SubItem" href="bekijkbestel.php" target="main">Bekijk bestelling</A></DIV><BR>
<DIV CLASS="SubItem"><A class="SubItem" href="klantgegevens.php" target="main">Klantgegevens</A></DIV><BR>
</DIV><BR/>

<DIV CLASS="Menu" onMouseOver="style.height='auto'" onMouseOut="style.height='17px'">
<DIV CLASS="MenuItem">Links</DIV>
<DIV CLASS="SubItem"><A CLASS="SubItem" HREF="http://www.tweakers.net" TARGET="main">Tweakers</A></DIV><BR>
<DIV CLASS="SubItem"><A CLASS="SubItem" HREF="http://www.startpagina.nl" TARGET="main">Startpagina</A></DIV><BR>
</DIV><BR/>

<DIV CLASS="Menu" onMouseOver="style.height='auto'" onMouseOut="style.height='17px'">
<DIV CLASS="MenuItem">Aanbieding</DIV>
<DIV CLASS="SubItem"><A CLASS="SubItem" HREF="aanbieding.php" TARGET="main">Bekijken</A></DIV><BR>
</DIV><BR/>
<DIV CLASS="Menu" onMouseOver="style.height='auto'" onMouseOut="style.height='17px'">
<DIV CLASS="MenuItem">Gastenboek</DIV>
<DIV CLASS="SubItem"><A CLASS="SubItem" HREF="showguest.php" TARGET="main">Bekijken</A></DIV><BR>
<DIV CLASS="SubItem"><A CLASS="SubItem" HREF="addguest.php" TARGET="main">Toevoegen</A></DIV><BR>
</DIV><BR/>

<DIV CLASS="Menu" onMouseOver="style.height='auto'" onMouseOut="style.height='17px'">
<DIV CLASS="MenuItem">Tour</DIV>
<DIV CLASS="SubItem"><A CLASS="SubItem" HREF="Tour.php" TARGET="main">Neem tour</A></DIV><BR>
</DIV><BR/>

<DIV CLASS="Menu" onMouseOver="style.height='auto'" onMouseOut="style.height='17px'">
<DIV CLASS="MenuItem">Informatie</DIV>
<DIV CLASS="SubItem"><A CLASS="SubItem" HREF="overons.php" TARGET="main">Over ons</A></DIV><BR>
<DIV CLASS="SubItem"><A CLASS="SubItem" HREF="algemeneinfo.php" TARGET="main">Algemeen</A></DIV><BR>
</DIV><BR/>


</BODY>
</HTML>

[Verwijderd]

Die witregel kan overigens wel ongedaan gemaakt worden door de <BR> weg te halen, maar of dat de bedoeling is...

[crisp]

Op donderdag 24 januari 2002 08:44 schreef Dr.Aigner het volgende:
Die witregel kan overigens wel ongedaan gemaakt worden door de <BR> weg te halen, maar of dat de bedoeling is...

<DIV> genereerd inderdaad al een linebreak. De <BR> weghalen is dus de oplossing (had ik zelf trouwens ook gedaan, maar vergeten te melden).

[Verwijderd]

Op donderdag 24 januari 2002 09:26 schreef crisp het volgende:

<DIV> genereerd inderdaad al een linebreak. De <BR> weghalen is dus de oplossing (had ik zelf trouwens ook gedaan, maar vergeten te melden).

Het is wel een goede gewoonte om een <br /> direct voor de afstuittag van een <div> of <td> te zetten. Die wordt toch niet meer gerendert als er niets meer achteraan komt, maar hier en daar kan het weleens voorkomen dat een paar pixels ruimte overblijven. Vooral in tables.

[drm]

Nou, ik vind het 3x niks zo'n menu. 100x liever onClick dan onMouseOver

[crisp]

Op donderdag 24 januari 2002 09:35 schreef drm het volgende:
Nou, ik vind het 3x niks zo'n menu. 100x liever onClick dan onMouseOver

Mee eens, ik zou het ook met een onClick doen, is wat 'rustiger', maar dat is natuurlijk zo aan te passen.