Gå til innhold

Komplisert å lage "undermenyer"?

perpetrus382

Anbefalte innlegg

perpetrus382

perpetrus382

Skrevet
Skrevet (endret)

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

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 av sagberg

Videoannonse

Videoannonse
Annonse
Skjeggevara

Skjeggevara

Skrevet
Skrevet

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>

Lokaltog

Lokaltog

Skrevet
Skrevet

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

Skjeggevara

Skrevet
Skrevet
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.

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...