Ul & li - meny

HTML & CSS

6 svar · 453 visningar · startad av Travoni 27 apr. 2006

TravoniMedlem sedan okt. 20041 556 inlägg

Frågan27 apr. 2006 22:00#1

Jag skulle vilja ha en "nested" ul och il - meny enligt bilden.

Men jag fattar inte hur jag skall få till det.

I bildexemplet så har man valt ex. Saab och motorer.

Går det att få till detta med css? Hur?

(Det skall inte vara javascript och någon hovermeny, det viktiga är bara att "elementen" kommer som på bilden)

Hälsningar
/t

zcorpanMedlem sedan dec. 20042 245 inlägg

27 apr. 2006 22:32#2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
  <title>listor</title>
  <style type="text/css">
   .foo { text-transform:uppercase; font-weight:bold; white-space:nowrap; }
   .foo li { display:inline; position:relative; padding-right:1em; }
   .foo ul { position:absolute; top:2em; left:0; margin-left:0; padding-left:0; font-size:small; }
   .foo ul::before { content:"\21B3  "; }
   .foo ul ul { top:1.8em; }
  </style>
 </head>
 <body>
  <ul class="foo">
   <li>Volvo</li>
   <li>Saab 
    <ul>
     <li>Fälgar</li>
     <li>Motor 
      <ul>
       <li>Förgasare</li>
       <li>Tändsystem</li>
       <li>Block</li>
      </ul>
     </li>
     <li>Kaross</li>
     <li>Belysning</li>
    </ul>
   </li>
   <li>BMW</li>
   <li>Mercedes</li>
   <li>Volkswagen</li>
  </ul>
 </body>
</html>

TravoniMedlem sedan okt. 20041 556 inlägg

28 apr. 2006 06:49#3

Härligt, de funkar ju.

Detta:

.foo ul::before { content:"\21B3 "; }

verkar inte funka i IE. Men det spelar mindre roll kanske.

zcorpanMedlem sedan dec. 20042 245 inlägg

28 apr. 2006 08:18#4

Näe, IE saknar stöd för CSS genererat innehåll. Om du behöver en pil i IE kan du kanske använda en bakgrundsbild istället. :)

TravoniMedlem sedan okt. 20041 556 inlägg

29 apr. 2006 21:03#5

Hum, jag kom på att jag har en till fråga.
Om jag vill sätta min lilla meny i en div (se bild).
Så lägger sig menyn utanför.
Jag skulle vilja att diven "följer med", går det å i sådana fall hur?

#cont{ border:1px dotted green;width:400px;}
...

<div id="cont">
  <ul class="foo">
   <li>Volvo</li>
   <li>Saab 
...
</div>
Text text text text

zcorpanMedlem sedan dec. 20042 245 inlägg

29 apr. 2006 21:25#6

Eftersom den använder absolut positionering kan inte boxen anpassa storleken automatiskt, men förmodligen vet du den tänkta höjden (beroende på hur många rader du har) så du skulle kunna ange det manuellt:

.foo { height:4.5em; ... }

TravoniMedlem sedan okt. 20041 556 inlägg

30 apr. 2006 07:31#7

Ok, vad värdelöst.
Trodde att man kunde göra så. Att ul-menyn förhåller sig absolut positionerad i förhållande till lagret.

Nix, menyn är dynamisk och kan vara fler rader än vad som jag har angett.

Trist.