Gå til innhold

CSS Dropdown pull-down meny

Jonhoo

Av Jonhoo
i Programmering og webutvikling

Anbefalte innlegg

Jonhoo

Jonhoo

Skrevet
Skrevet (endret)

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

Videoannonse
Annonse
Garreth

Garreth

Skrevet
Skrevet (endret)

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
Rupal

Rupal

Skrevet
Skrevet (endret)

"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
askil8

askil8

Skrevet
Skrevet (endret)
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

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