Nedtrekksmeny i ren CSS & XHTML

Nedtrekksmenyer kan være en smart løsning i noen sammenhenger, men hvis det er inkludert javascript for at de skal virke kan det virke mot sin hensikt. Enkelte slår av javascript i et snev av sikkerhetsparanoia, og Google klarer ikke lese javascriptmenyer når de skal indeksere sider. Derfor er det, både for tilgjengelighet og søkemotoroptimalisering, et smart trekk å lage en meny som ikke er avhengig av javascript. Les videre for å se hvordan jeg lager en nedtrekksmeny med bruk av kun CSS og XHTML.

Her går vi bare rett på sak. Ikke noe poeng i å snakke rundt grøten. Det første vi gjør er å lage menyen i XHTML:

1. <ul id="navigasjon">
2. <li>Menypunkt 1
3. <ul class="undermeny">
4. <li>Undermeny 1</li>
5. <li>Undermeny 2</li>
6. <li>Undermeny 3</li>
7. </ul><!-- .undermeny -->
8. </li>
9. <li>Menypunkt 2
10. <ul class="undermeny">
11. <li>Undermeny 1</li>
12. <li>Undermeny 2</li>
13. <li>Undermeny 3</li>
14. </ul><!-- .undermeny -->
15. </li>
16. <li><a href="#">Menypunkt 3</a>

17. <ul class="undermeny">

18. <li><a href="#">Osv..</a></li>

19. <li><a href="#">...</a></li>

20. </ul><!-- .undermeny -->

21. </li>
22. </ul><!-- #navigasjon -->
23. Osv. Du skjønner tegningen.

Deretter står CSS-filen for tur.

1. ul#navigasjon {
2. margin: 0;
3. padding: 0;
4. height: 30px;

5. background-color: #2e548e;

6. list-style-position: inside;

7. list-style-type: none;

8. }

9. ul#navigasjon li {

10. padding: 0 10px;

11. line-height: 30px;

12. float: left;

13. position: relative;

14. }

15. ul#navigasjon li a {

16. text-decoration: none;

17. color: #fff;

18. display: block;

19. }
20.  
21. /* undermeny */

22. ul#navigasjon li ul {

23. margin: 0;

24. padding: 0;

25. display: none;

26. position: absolute;

27. top: 30px;

28. left: 0px;

29. list-style-type: none;

30. }

31. ul#navigasjon li:hover > ul {

32. display: block;

33. background-color: #2e548e;

34. }

35. ul#navigasjon li:hover > ul li {

36. padding: 0;

37. width: 170px;

38. float: none;

39. }

40. ul#navigasjon li:hover > ul li a {

41. display: block;

42. padding: 0 10px;

43. border-bottom: 1px dotted #97aac7;

44. }

45. ul#navigasjon li:hover > ul li a:hover {

46. background-color: #ccc;

47. color: #333;

48. }

Menyen er testet i Firefox 2.0 og Safari 3.0 og ser slik ut:

Du kan prøve CSS & XHTML menyen her.