Jump to content
Sign in to follow this  
Jonhoo

CSS Dropdown pull-down meny

Recommended Posts

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

Edited by Jonhoo

Share this post


Link to post

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>

Edited by Garreth

Share this post


Link to post

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

Edited by LBoN

Share this post


Link to post

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

Share this post


Link to post
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.

Edited by askil8

Share this post


Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...