Tab menu med CSS og XHTML
Skrevet tirsdag, 22 december, 2009
En tab lignende menu er en af de mest brugte på mange nyere hjemmesider og menuen kan laves ret nemt med CSS og HTML. Egentlig er det bare et <ul> tag der bliver stylet ved hjælp af CSS. Vi har 3 tags, der skal styles for at vi kan opnå det ønskede resultat: <ul> tag, <li> tag og <a> tag.
HTML koden til tab menuen
<div id=”menu”>
<ul>
<li class=”first current”>
<a href=”#”>Home</a>
</li>
<li>
<a href=”#”>About</a>
</li>
</ul>
</div>
<ul>
<li class=”first current”>
<a href=”#”>Home</a>
</li>
<li>
<a href=”#”>About</a>
</li>
</ul>
</div>
Nu har vi defineret vores simple XHTML struktur og så er det egentlig bare at overlade resten til vores CSS.
CSS til vores tab menu
#menu {margin: 20px 0;}
#menu ul {list-style: none;margin:0;padding:0 0 0 20px;border-bottom: 1px solid #ccc;height: 30px;}
#menu ul li.first a {border-left: 1px solid #ccc;} /* Det første tab skal have en border til venstre */
#menu ul li, #menu ul li a {float: left;font-family: Tahoma, sans-serif;}
#menu ul li a {padding: 5px 10px 0 10px;color: #666;font-weight: normal;text-decoration: none;font-size: 13px;border-top: 1px solid #ccc;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;height: 24px;} /* Sæt padding, font og border på */
#menu ul li.current a, #menu ul li a:hover {border-bottom: 1px solid #fff;color: #000;} /* Det valgte tab og hover på et tab */
#menu ul {list-style: none;margin:0;padding:0 0 0 20px;border-bottom: 1px solid #ccc;height: 30px;}
#menu ul li.first a {border-left: 1px solid #ccc;} /* Det første tab skal have en border til venstre */
#menu ul li, #menu ul li a {float: left;font-family: Tahoma, sans-serif;}
#menu ul li a {padding: 5px 10px 0 10px;color: #666;font-weight: normal;text-decoration: none;font-size: 13px;border-top: 1px solid #ccc;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;height: 24px;} /* Sæt padding, font og border på */
#menu ul li.current a, #menu ul li a:hover {border-bottom: 1px solid #fff;color: #000;} /* Det valgte tab og hover på et tab */
CSS’en kan selvfølgelig optimeres lidt, men idéen er da til at få øje på.
Den endelige tab menu
Der er selvfølgelig uanede muligheder for at style menuen lige som man vil have den. Kun fantasien sætter grænser her og det er ikke noget jeg har meget af. God fornøjelse.