Notifikationer

Markér alle som læst Log ud

jannikf Nybegynder

17. november 2005 - 15:19 Der er 6 kommentarer og
1 løsning

CSS menu uden javascript

Efter at have set en menuen hos http://www.billboard.com/ tænkte jeg at det snildt kunne lade sig gøre i ren CSS. Dog er det ikke lykkes mig at komme frem til en løsning.

Menuen skal indeholde to "tabeller" enten i CSS eller html, og ved onmouseover på den øverste skal den nederste skifte mellem forskellige "tabeller" alt afhængigt af hvilket menupunkt man har musen over. Men hvordan skal jeg gøre det?

Synes godt om

milandt Nybegynder

17. november 2005 - 16:33 #1

"og ved onmouseover på den øverste skal den nederste skifte mellem forskellige "tabeller""

Dette kan jo ikke lade sig gøre uden javascript..

Synes godt om

olebole Juniormester

18. november 2005 - 15:19 #2

<ole>

- og hvad skulle meningen med at bruge CSS til det dog være?

Meningen med 'de nye' standarder er at opsplitte koden i data, formatering og funktionalitet. Derfor bør den slags naturligvis laves med script :)

/mvh
</bole>

Synes godt om

jannikf Nybegynder

19. november 2005 - 01:07 #3

Har været væk. Jeg er ikke så vild med javascripts af den simple grund at jeg ikke har noget forstand på det, og derfor umiddelbart får sværere ved at redigere i det senere hen. Skulle javascriptet derimod blot bestå af nogle enkle linier, vil jeg meget gerne se denne løsning.

Synes godt om

roenving Novice

22. november 2005 - 01:55 #4

Tjah, hvis det skal være nogenlunde sammenhængende, er der ingen vej udenom en stak javascript, men ikke så voldsomt omfattende:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin=;padding:0;}
#site{position:relative;width:780px;margin:0 auto;}
.menu{width:100%;text-align:center;}
.menu td{text-align:center;cursor:pointer;}
#subs{height:20px;overflow:hidden;}
.sub{display:none;}
</style>
<script type="text/javascript">
function showMenu(elm,id){
var sibs = elm.parentNode.getElementsByTagName("td");
for(i=0;sibs.length>i;i++)
sibs[i].style.backgroundColor = "";
elm.style.backgroundColor = "#cac";
var submenus = document.getElementById("subs").getElementsByTagName("div");
for(i=0;submenus.length>i;i++)
submenus[i].style.display = "none";
document.getElementById(id).style.display = "block";
}
</script>
</head>
<body>

<div id="site">
<table class="menu">
<tr>
<td onmouseover="showMenu(this,'sub1');">Menu1</td>
<td onmouseover="showMenu(this,'sub2');">Menu2</td>
<td onmouseover="showMenu(this,'sub3');">Menu3</td>
</tr>
</table>
<div id="subs">
<div id="sub1" class="sub">
<table class="menu" style="background-color:#ff0;">
<td>Undermenu 1-1</td>
<td>Undermenu 1-2</td>
<td>Undermenu 1-3</td>
</table>
</div>
<div id="sub2" class="sub">
<table class="menu" style="background-color:#faf;">
<td>Undermenu 2-1</td>
<td>Undermenu 2-2</td>
<td>Undermenu 2-3</td>
</table>
</div>
<div id="sub3" class="sub">
<table class="menu" style="background-color:#aff;">
<td>Undermenu 3-1</td>
<td>Undermenu 3-2</td>
<td>Undermenu 3-3</td>
</table>
</div>
</div>
</div>

</body>
</html>

Synes godt om

jannikf Nybegynder

04. januar 2006 - 19:12 #5

Jeg har fundet en anden løsning hvor jeg benytter mig af flash, men kan fortælle at jeg flere steder efterfølgende har set at sådanne menuer kan lade sig gøre i ren CSS, men nok om det.

Synes godt om

olebole Juniormester

08. januar 2006 - 16:54 #6

Det er sikkert også en meget god idé ... hvis man er ligeglad med, om søgemaskinerne indekserer ens sider :)

Synes godt om

jannikf Nybegynder

08. januar 2006 - 17:47 #7

Det tror jeg faktisk stadig den gør, da det ikke er en flash fil, men et flash script op at html'en i source ligner en normal <li> og <ul> listeform.

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS