dropdown menu maken van alfabet letters

Status
Niet open voor verdere reacties.

djeric

Gebruiker
Lid geworden
22 nov 2006
Berichten
955
hallo

ik wil graag een drop down menu maken met een bepaalde plaats in de webpagina.

ik heb een rijtje alfabetische letters gemaakt: abcdefghijklmnopqrstuvwxyz

en wil dan onder iedere letter een drop down menu maken waarin je de keuze kunt maken en dan direct naar dat punt wilt gaan in de webpagina.

v.b.

ik zoek een artiest dat begint met de letter "d" ik ga met mij muis op de letter "d" staan en direct verschijnt een lijstje metalle artiesten die met de letter d beginnen. ik maak daarin mij keuze... en klik erop. daarna ga ik naar beneden in mij web pagina en begin bij die artiest metde letter "d" t lezen.

snapie???

de code wat ik een beetje al hebt =

Code:
<a id="menu"></a>
<br>
<center><h1>

<a href="#a" title="deze letter bevat nog geen dj's" >A</a>
<a href="#b" title="deze letter bevat nog geen dj's" >B</a>
<a href="#c" title="deze letter bevat nog geen dj's" >C</a>
<a href="#d" title="dj dekker, double dj's" >D</a>
<enz enz enz... tot de letter:>
<a href="#z" title="deze letter bevat nog geen dj's" >Z</a>

<br>
<br>
<br>
<br>

< nu volgt enkel een voorbeeld waar je dan uit moet komen als ik op de letter "d" zou klikken > 

</h1></center>
<base target="_blank">

<center>
<a id="d" ><h3><FONT COLOR="#0000CC">dj's met een D</font></h3></a>
</center>
<br>
<h4><A HREF="http://www.djdekker.com"> <IMG SRC="dj/dekker.jpg" <img align="left" WIDTH=141 HEIGHT=200 BORDER=O alt="dj dekker"></A>
<FONT COLOR="#0000CC">
Dj Dekker
</font>
<FONT COLOR="#a52a2a">
 staat op op vele ....... bla bla enz enz.... (hier staat een hoop tekst)
</font></h4>
<br>
<br>
<br>
<br>
<br>
<br>
<base target="_self">
<a href="#menu"><FONT COLOR="#0000CC">terug naar menu</font></a>



kortom:

de titel moet vervangen worden door een dropdown menu.

zodra je op een letter komt met je muis, verschijnt een menu vanuit die letter en zie je allerlei namen staan die beginnen met deze letter. elke namen moeten dan een link krijgen naar de plaats waar die zich dan bevinden elders op de webpagina.

oja, de letters moeten in het groot naarst elkaar komen te staan, dus niet in een zichtbare menu te komen staan.

netzoiets dus als: http://www.skihutinfo.tk

maar dan zonder die menu lijnen....

wie weet de juiste weg voor deze code???
 
Laatst bewerkt door een moderator:
niemand enige idee? of is me uitleg te moelijk????

ik wil een rijtje alfabet letters van a tot z naarst elkaar hebben staan. zonder dat je ze in een tabel ziet, gewoon netzoals deze tekst.

als ik dan met me muis op een letter ga staan, dan verschijnt eronder een keuze lijst met namen die beginnen met die letter.

ik kies een naam uit en klik erop, daarna brengt hij mij bij die naam.

hoe doe ik dit?????
 
Met Javascript, dus ik denk dat je topic even verplaatst moet worden :)
 
Volgens mij is alles wat jij nodig hebt een simpel javascript dropdown menu. Als je daarop googlet zijn er talloze van te vinden.
 
Volgens mij is alles wat jij nodig hebt een simpel javascript dropdown menu. Als je daarop googlet zijn er talloze van te vinden.

simpel???

ja een dropdown menu = simpel, maar krijg het niet voorelkaar om de letters zonder tabel te krijgen. want in een tabel lukt alles wel.

abcdefghijklmnopqrstuvwxyz <<<< dit wil ik zo zien. en dan met een dropdown eronder die dan een link geeft per naam dat in die lijst vorkomt elders op de pagina.
 
nog steeds geen oplossing:(

Neem nou dit menu:

http://javascript-array.com/scripts/simple_drop_down_menu/

Daar kun je toch gewoon : Home Download Order Help Contact vervangen door A B C D E F etc.

Dan vervang je de sub items door de namen van de DJ's

dat is het hem nu juist....

ik krijg dat wel voorelkaar.

maar die blauwe achtergrond wil ik dan transparant hebben.

zodat je enkel die witte teksten ziet. Home Download Order Help Contact

nu staat alles in een blauwe tabel.

ik wil dan een tabel dat transparant is voor het menu. dus: Home Download Order Help Contact (oftewel wat ik wil: A B C D E etc ...)
en een drop down menu eronder verschijnt die wel een achtergrond kleur heeft

ik denk dat het wat makelijker word nu wat ik dan wil.


deze regel letters >> A B C D E F G H I J K L M N O P Q R S T U V W X Y Z komen op een bepaalde grote en kleur naarst elkaar te staan. in een transparante menu.

onder iedere letter verschijnt dan een zichtbare menu waar ik dus de achtergrond kleur kan bepalen en even eens de letter kleur.

ik lees nu wat meer over tabellen en achtergrond kleuren.

maar krijgt het niet voorelkaar de menu onzichtbaar te maken, hoe haal je die lijnen weg???? (dan word t toch transparant??? wat de bedoeling is)

er is een bepaalde code hiervoor maar weet niet hoe.

ik oefen nog steeds.
 
Laatst bewerkt:
Oeps, had ik alleen de vraag gelezen, en niet gezien dat er al antwoorden waren...:o

Maar bedoel je zoiets?
Die is alleen te bezichtigen in Firefox, en is alleen voor het idee. Moet nog gestyled worden voor Internet Explorer (+ een stukje javascript toevoegen voor IE; Google op "Suckerfish menu" voor betere voorbeelden).

Of inderdaad het dropdown-menu aanpassen dat geheim agent EricBooy007 al aangaf. :)
Wat je daarvoor moet weten, is hoe je met CSS achtergrondkleuren en voorgrondkleuren instelt. Simpel gezegd gaat het per element om de regeltjes in de css-code met:
Code:
	background: #5970B2;
	color: #FFFFFF;
De getallen zijn de kleurnummers; daarvoor kan je bv. hier grasduinen of anders hier, of Google op "html colors".
En wil je een achtergrond transparant, dan is het "transparent" (met een e):
Code:
	background: transparent;

Succes!
CSS-hunter
 
Oeps, had ik alleen de vraag gelezen, en niet gezien dat er al antwoorden waren...:o

Maar bedoel je zoiets?
Die is alleen te bezichtigen in Firefox, en is alleen voor het idee.


bijna wat ik precies wat ik zoek.

alleen verschijnt geen menu onder iedere letter.ik bekijk alles met "ie"

maar ga hiermee wel aan de slag. kijken wat lukt.
 
Ja,
alleen verschijnt geen menu onder iedere letter.ik bekijk alles met "ie"
dat klopt, want dit voorbeeldje werkt alléén in Firefox e.a. browsers, maar niet in IE.
Wat er in FF gebeurt, zie je op dit screenshot (op de namen kun je klikken, en dan scrollt de pagina vanzelf naar beneden zodat die naam bovenaan te zien is). :)

Voor IE is een klein hulp-scriptje nodig om het menu te kunnen laten zien.
Dat heb ik opgenomen in een tweede versie; deze (zie broncode).
Nu gebeurt er wel wat met het menu, als je in IE over de letters muist. - Alleen de uitklapvakjes / submenu's staan nog niet op de goede plaats, want in de styles is nog geen rekening gehouden met IE. Maar je kan hieraan wel zien dat het in principe voor IE ook werkt.

Je kan ook eens kijken hoe het menu en de submenu's gestyled zijn in "The Liquidfish", want daar heb ik mijn voorbeeldje aan ontleend. Op die pagina staat ook een link naar een Engels artikel met uitleg. Er is ook een Liquidfish testpage 2, en een Liquidfish testpage 3. Misschien kan je daar ook iets van gebruiken.

Wat ook zou kunnen, is dat je de letters A B C niet naast elkaar zet, maar aan de linkerkant van de pagina onder elkaar. Dan klappen de uitklapvakjes met de namen steeds naar rechts uit, wat ook een aardig effect kan geven. Of eventueel de letters in twee of meer kolommen naast elkaar, dan zijn ze wat overzichtelijker.
In dat geval kan je eens buurten bij de principes van "The Keyboardfish" en "The Keyboardfish 2" (de laatste met een alternatief voor browsers die javascript uit hebben staan, of die geen javascript ondersteunen: kunnen die bezoekers toch alles zien). Beide zijn voorzien van opmerkingen in het Engels. Aanvullende NL toelichting staat in de Nederlandse versie "De Keyboardfish".

Nog 2 tips:
  1. Overigens zou ik je zwaar aanbevelen om gauw Firefox te downloaden, want als je webpagina's maakt, moet je die zeker in FF kunnen testen. Als het werkt in IE, is dat nog geen garantie voor FF! En je kunt FF installeren (in een paar minuutjes gepiept) zonder dat IE er af hoeft: je kunt ze gewoon naast elkaar gebruiken. :D
  2. Het beste is éérst te ontwerpen voor FF, en daarna voor IE aanpassingen te maken; omgekeerd is veel moeilijker (omdat FF de codes veel correcter interpreteert). ;)

Succes,
CSS-hunter
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan