hemmagjord select/dropdown box som fugerar?

[Christian Holmberg]

Tyckte att den klassiska dropdown-menyn är så himlans ful och passade inte in i ett projekt som jag håller på med. Så då tänkte jag att jag kodar mig en egen men har stött på lite problem i utveklandet.

Här är (x)html-koden som buggar sig.

Kod: Markera allt

	<table id="dropdown" cellpadding="0" cellspacing="0" border="0" onclick="document.getElementById('dropdownmenu').style.display='block';" onmouseout="document.getElementById('dropdownmenu').style.display='none';">
		<tr>
			<th class="display">Januari</th>
			<th class="button"><img src="smallarrowdown.png" align="middle" /></th>
		</tr>
		<tr>
			<td colspan="2">			
				<table id="dropdownmenu" cellpadding="0" cellspacing="0" border="0">
					<tr>
						<th>Januari</th>
					</tr>
					<tr>
						<th>Februari</th>
					</tr>
					<tr>
						<th>Mars</th>
					</tr>				
					<tr>

						<th>April</th>
					</tr>
					<tr>
						<th>Maj</th>
					</tr>
					<tr>
						<th>Juni</th>

					</tr>
					<tr>
						<th>Juli</th>
					</tr>				
					<tr>
						<th>Augusti</th>
					</tr>
					<tr>

						<th>September</th>
					</tr>
					<tr>
						<th>Oktober</th>
					</tr>				
					<tr>
						<th>November</th>
					</tr>

					<tr>
						<th>December</th>
					</tr>								
				</table>
			</td>
		</tr>
	</table>

Här är tillhörande css-fil

Kod: Markera allt

#dropdown {
	border-width: 1px 1px 0px 1px;	
	border-style: solid;
	border-color: #000;
	height: auto;	
}

.display {
	background: #FFF;
	width: 100px;
	height: 1.5em;
	border-bottom: 1px solid #000;
}

.button {
	background: #39F;
	width: 20px;
	height: 1.5em;
	border-left: 1px solid #000000;
	border-bottom: 1px solid #000;	
}

#dropdownmenu {
	position: relative;
	left: -1px;
	width: 120px;
	display: none;	
	border-bottom: 1px solid #000;
}

#dropdownmenu th {
	width: 120px;	
}

Bugg 1: Klicka på "knappen", tvs <th> av klassen ".button" och menyn ploppar fram, för sedan musen rakt åt vänster till <th> brevid och menyn försvinner. Konstigt tycker jag då dessa två th-objekt är ju barn av av tr-objektet som är barn av table-objektet vilket är det objekt man kickar på således borde inte menyn försvinna när man rör musen sin emellan dessa två th-objekt. Att menyn försvinner när man drar musen utanför tabellen av klassen dropdown är ingen bugg utan en finnes .

Bugg 2: Se bugg ett fast tvärt emot, dra musen från th-objektet av klassen display till th-objektet av klassen button och menyn försvinner.

Bugg 3: klicka på någon av th-objekten av klassen "button" eller "display" för att få fram menyn. Dra sedan musen neråt mot menyn och över menyn och tada! Menyn försvinner ut ur ens åsyn. Förstår mig inte på på det hela. Tabellen med id "dropdownmenu" är ju ett barn av tabellen med id "dropdown" vilket är den tabell vars barn man klickar på. Således borde table#dropdownmen räknas som en del av table#dropdown vilket borde leda till det korrekta resultatet att man kan dra musen ner på menyn och göra det man vill göra.

Koden är lika buggig under Firefox 3.6.8, Google Chrome och Internet Explorer 8. Ni som vill får gärna felsöka/fixa till buggarna för nu ska jag gå och lägga mig och sova