Komplisert å lage "undermenyer"?

perpetrus382 · 30. mai 2008

Jeg vet egentlig ikke helt navnet på det jeg er ute etter.. Men velger å kalle det undermenyer

Et eksempel: http://www.meldal.vgs.no , hvis du holder musa over meny'ene da får du frem undermenyer.

Er dette komplisert å lage? Og kan det lages i php?

Er ganske ny på programmering enda, men er veldig keen på å lære

Endret 30. mai 2008 av sagberg

Haraldson · 30. mai 2008

Har ingenting med PHP å gjøre, dette kan du faktisk løse med HTML, CSS og en liten dæsj JS for eldre nettlesere.

Son of Suckerfish.

Skjeggevara · 31. mai 2008

Kan også gjøre det litt enklere, og bruke Definition Lists. Satt opp en enkel sak nå nettopp for å illustrere. Hele poenget skjer egentlig i den aller siste linja i CSS'en, der et element som før var satt til display:none går over til display:block ved hover. Hvor høy kvalitet det er på denne koden, og hvor bra menyen ser ut, kan dog diskuteres.

<head>

<style type="text/css">

	* {
		margin:0px; 
		float:left;}

	#wrapper {
		margin:0px; 
		float:left;}

	.menu {
		display:block;}

	.menu dd {
		background-color:#ededed;
		padding:7px 0px 0px 0px;
		display:none;
		width:146px;
		border-bottom: 1px solid gray;
		border-left:1px solid gray;
		border-right:1px solid gray;}

	.menu dl {
		padding:1px;
		border:1px solid gray;
		display: block;
		width:146px;
		height:24px;
		background-color:#ededed;}

	.menu dl dt A {
		color:gray;
		padding:1px 5px 1px;
		text-decoration: underline;}

	.menu dl dd A {
		padding:0px 14px;
		color:gray;
		text-decoration: none;
		height:24px;
		width:146px;}

	.menu dl dt A, .menu dl dd A {
		font: normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;}

	.menu, .menu dd, .menu dl, .menu dl dt A, {
		text-align:left;}

	.menu dl:hover {text-decoration:none;}
	.menu dl:hover dd {display:block;}

</style>
</head>

<body>
<div id="wrapper">
	<div class="menu">
		<dl>
			<dt><a href="#">Meny 1</a></dt>
			<dd><a href="#">Submeny 1.1</a></dd>
			<dd><a href="#">Submeny 1.2</a></dd>
			<dd><a href="#">Submeny 1.3</a></dd>			
		</dl>
	</div>
	<div class="menu">
		<dl>
			<dt><a href="#">Meny 2</a></dt>
			<dd><a href="#">Submeny 2.1</a></dd>
			<dd><a href="#">Submeny 2.2</a></dd>
			<dd><a href="#">Submeny 2.3</a></dd>			
		</dl>		
	</div>
	<div class="menu">
		<dl>
			<dt><a href="#">Meny 3</a></dt>
			<dd><a href="#">Submeny 3.1</a></dd>
			<dd><a href="#">Submeny 3.2</a></dd>			
			<dd><a href="#">Submeny 3.3</a></dd>
			<dd><a href="#">Submeny 3.4</a></dd>			
		</dl>
	</div>
</div>

</body>

Haraldson · 31. mai 2008

Ganske lav kvalitet på koden, vil jeg si. En meny og en definisjonsliste er to vidt forskjellige ting.

Lokaltog · 31. mai 2008

Mener også å huske at element:hover element{...} ikke funker så bra i IE6 og lavere, og at det derfor kreves litt JS for at denne løsningen skal funke for de aller fleste.

Skjeggevara · 31. mai 2008

Ganske lav kvalitet på koden, vil jeg si. En meny og en definisjonsliste er to vidt forskjellige ting.

Som jeg nevnte i øvre tråd, så er jeg klar over det. Ønsket bare å vise muligheten.

Logg inn

Komplisert å lage "undermenyer"?

Anbefalte innlegg

perpetrus382

Lenke til kommentar

Videoannonse

Haraldson

Lenke til kommentar

Skjeggevara

Lenke til kommentar

Haraldson

Lenke til kommentar

Lokaltog

Lenke til kommentar

Skjeggevara

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer