Toon posts:

[CSS] Submenu vanuit nested list ipv aparte list

Pagina: 1
Acties:
  • 223 views sinds 30-01-2008
  • Reageer

zaterdag 29 januari 2005 20:40

Acties:
  • Reveller
  • Registratie: Augustus 2002
  • Laatst online: 05-12-2022

Reveller

Hopla!

Topicstarter
Voor de navigatie op mijn site wil ik graag tabjes. Na veel zoeken en proberen, kwam ik onder andere uit op het sliding doors artikel van a list apart, waar wordt uitgelegd hoe je tabjes maakt die zich aanpassen aan de lengte van het opschrift van het tabje. Het artikel gaat overigens niet in op een subnavigatie en daar begint mijn probleem. Die wil ik namelijk wel.

De list die mijn cms'je standaard uitspuugt is bijvoorbeeld:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12

<ul>
  <li><a href="#">Home</a></li>
  <li id="current"><a href="#">Producten</a>
    <ul>
      <li><a href="#">Duur</a></li>
      <li><a href="#">Heel duur</a></li>
    </ul>
  </li>
  <li><a href="#">Diensten</a></li>
  <li><a href="#">Over ons</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Maar het lukte mij niet om een css bestand te definieren dat de geneste list goed verwerkte tot een subnavigatie. Toen dacht ik - laat ik het eerst maar eens met 2 aparte lists proberen. Het resultaat ziet er als volgt uit. Eronder staat de html:
Afbeeldingslocatie: http://www.danandan.luna.nl/css-tabjes.gif
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

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

<style type="text/css" media="screen">
body {
  background:#fff;
  margin:0;
  padding:0;
  color:#000;
  font:x-small Verdana, sans-serif;
  font-size:small;
}

#header {
  float:left;
  width:100%;
  background:#369 url("bg.gif") repeat-x bottom;
  font-size:85%;
  line-height:normal;
}

#header ul {
  margin:0;
  padding:10px 10px 0;
  list-style:none;
}

#header li {
  float:left;
  background:url("right.gif") no-repeat right top;
  margin:0;
  padding:0 5px 0 0;
}

#header a {
  float:left;
  display:block;
  background:url("left.gif") no-repeat left top;
  padding:5px 7px 4px 20px;
  text-decoration:none;
  font-weight:bold;
  color:#9cf;
}

#header a:hover {
  color:#fff;
}

#header #current {
  background-image:url("right_on.gif");
}

#header #current a {
  background-image:url("left_on.gif");
  color:#333;
  padding-bottom:5px;
}

#sub {
  float: left;
  width: 100%;
  font-size: 85%;
  border-bottom: #000 1px solid;
  background:url("bg-sub.gif"); repeat-x bottom;
}

#sub ul {
  margin:0;
  padding:2px 10px 0px 30px;
  list-style:square;
}

#sub li {
  float:left;
  margin:0;
  padding:0 5px 0 0;
}

#sub a {
  text-decoration: none;
  font-weight:bold;
  color:#333;
  padding-right: 20px;
}
</style>
</head>

<body>

<div id="header">
  <ul>
    <li><a href="#">Home</a></li>
    <li id="current"><a href="#">Producten</a></li>
    <li><a href="#">Diensten</a></li>
    <li><a href="#">Over ons</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<div id="sub">
  <ul>
    <li><a href="#">Duur</a></li>
    <li><a href="#">Heel duur</a></li>
  </ul>
</div>
</body></html>

Uit semantisch oogpunt is het gebruik van 2 lists alleen niet correct. En het is toch een soort halfweg-oplossing. Mijn css kennis is wat beperkt, gertuige het feit dat het mij niet lukte om meteen een geneste list te verwerken. Ik hoop dat er hier mensen zijn die mij, aan de hand van mijn css (alle kritiek welkom!), in de goede richting kunnen duwen :)

"Real software engineers work from 9 to 5, because that is the way the job is described in the formal spec. Working late would feel like using an undocumented external procedure."

zaterdag 29 januari 2005 20:51

Acties:
  • Not Pingu
  • Registratie: November 2001
  • Laatst online: 01-04 20:36

Not Pingu

Dumbass ex machina

Ipv. de sublist kun je natuurlijk ook gewoon ul ul aanspreken als stijl, dat is dus een submenu,
Geef de sublijsten absolute positionering zodat ze buiten hun parent item vallen en dat niet uitrekken, dan positioneer je ze gewoon zo dat ze net onder het hoofdmenu vallen.

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9

ul ul
{
  position: absolute;
  width: 100%;
  top: 20px;
  left: 0;
  border-bottom: #000 1px solid;
  background:url("bg-sub.gif"); repeat-x bottom;
}


Moet je wel zorgen dat je je hoofdlijst position: absolute of position: relative meegeeft.

Certified smart block developer op de agile darkchain stack. PM voor info.

zaterdag 29 januari 2005 21:01

Acties:
  • thomaske
  • Registratie: Juni 2000
  • Laatst online: 08-05 12:49

thomaske

» » » » » »

Heb je hier wat aan?

[rml][ CSS] Tabs met submenu vormgeven vanuit ordered list?[/rml]

Brusselmans: "Continuïteit bestaat niet, tenzij in zinloze vorm. Iets wat continu is, is obsessief, dus ziekelijk, dus oninteressant, dus zinloos."

zaterdag 29 januari 2005 21:56

Acties:
  • Not Pingu
  • Registratie: November 2001
  • Laatst online: 01-04 20:36

Not Pingu

Dumbass ex machina

thomaske schreef op zaterdag 29 januari 2005 @ 21:01:
Heb je hier wat aan?

[rml][ CSS] Tabs met submenu vormgeven vanuit ordered list?[/rml]
Hm, zelfde topicstarter, vrij identiek probleem :X

Certified smart block developer op de agile darkchain stack. PM voor info.

Reageer