Gå til innhold

CSS Dropdown pull-down meny


Anbefalte innlegg

Heisann folkens :)

 

Jeg har nå sett rundt på nettet etter måte å lage en meny ala den på siden på denne siden:

http://oksnoen.no/main2.htm

 

I bare CSS (og sikkert noe JavaScript på grunn av IE...), men har ikke funnet noe.

Jeg har funnet mange pop-out menyer hvor det kommer ut underlister ved siden av menyen, men det vil jeg ikke ha, jeg vil ha en hvor elementene i menye kommer til syne _under_ kategorien, men over neste kategori.

 

Jeg bruker ikke tekst i min meny, men bilder som er akkurat 192px brede, og 32px (eller var det 16px..?) høye.

 

Er det noen av dere som vet hvordan jeg kan få til noe slikt.? :hmm:

 

Håper på svar :w00t:

Jon

 

EDIT:

--------------------------------------------

 

Jeg trenger ikke at menyene går glidende ned, de kan godt bare komme til syne.. Jeg vil også gjerne, hvis mulig, at menyen skal trekke seg sammen igjen hvis brukeren flytter musen vekk fra kategorien eller listen, eller hvis han velger en annen kategori. :)

Endret av Jonhoo
Lenke til kommentar
Videoannonse
Annonse

Denne flytter seg ikke på mouseover- men det går sikkert an å modifisere javascriptet litt:

 

<script type=text/javascript>
/***********************************************
* Switch Menu script- by Martial B of [url=http://getElementById.com/]http://getElementById.com/[/url]
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit [url=http://www.dynamicdrive.com/]http://www.dynamicdrive.com/[/url] for full source code
***********************************************/

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("menu").getElementsByTagName("span"); //DynamicDrive.com change
	if(el.style.display != "block"){ //DynamicDrive.com change
		for (var i=0; i<ar.length; i++){
			if (ar[i].className=="submenu") //DynamicDrive.com change
			ar[i].style.display = "none";
		}
		el.style.display = "block";
	}else{
		el.style.display = "none";
	}
}
}

</script>

<ul id="menu">

   <li><a onclick="SwitchMenu('sub1')" href="#">Meny001</a> 
        <ul class="submenu" id="sub1">
	   <li><a href="#">Submeny001</a></li>
       <li><a href="#">Submeny002</a></li>
       <li><a href="#">Submeny003</a></li>
	 </ul>
      </li>

   <li><a onclick="SwitchMenu('sub2')" href="#">Meny002</a> 
        <ul class="submenu" id="sub2">
	   <li><a href="#">Submeny001</a></li>
       <li><a href="#">Submeny002</a></li>
       <li><a href="#">Submeny003</a></li>
	 </ul>
      </li>

   <li><a onclick="SwitchMenu('sub3')" href="#">Meny003</a> 
        <ul class="submenu" id="sub3">
	   <li><a href="#">Submeny001</a></li>
       <li><a href="#">Submeny002</a></li>
       <li><a href="#">Submeny003</a></li>
	 </ul>
      </li>

   </ul>

Endret av Garreth
Lenke til kommentar

"SwitchMenu II fra DynamicDrive".. jeg kopierte koden og alt det der. Det funka fint i IE, men får ikke opp i Firefox. Men hvis jeg besøker demoen på webisida så funker det i Firefox også. Er det noen som vet hva det skyldes??

 

EDIT:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Måtte fjerne dette for at det skulle dukke opp i Firefox. Hva har det å si for siden jeg lager, dersom jeg fjerner dette? Er det noen andre "riktige" måter å løse dette på i stedet for å fjerne hele den kodelinjen?

Endret av LBoN
Lenke til kommentar
Men har du mulighet til å vise meg hvordan askil8?

 

Jeg har jo spurt etter en i bare CSS fra starten av, men ikke fått noe svar på det..

6745188[/snapback]

Hei, denne var den beste jeg fant. Dessverre bruker også den javascript, så det er ikke sikkert det er noen vei utenom hvis du skal ha en slik meny.

http://tutorials.alsacreations.com/modelesmenus/vd1.htm

 

Selv syns jeg det er litt irriterende å måtte trykke for å få se hele menyen, men hvis du har en veldig lang meny, slik som de på siden du viste til, så er den vel grei. Ellers har jeg mange eksempler på CSS-menyer hvis du vil ha.

Endret av askil8
Lenke til kommentar

Bli med i samtalen

Du kan publisere innhold nå og registrere deg senere. Hvis du har en konto, logg inn nå for å poste med kontoen din.

Gjest
Skriv svar til emnet...

×   Du har limt inn tekst med formatering.   Lim inn uten formatering i stedet

  Du kan kun bruke opp til 75 smilefjes.

×   Lenken din har blitt bygget inn på siden automatisk.   Vis som en ordinær lenke i stedet

×   Tidligere tekst har blitt gjenopprettet.   Tøm tekstverktøy

×   Du kan ikke lime inn bilder direkte. Last opp eller legg inn bilder fra URL.

Laster...
×
×
  • Opprett ny...