Jak zrobić menu ze zmieniającym się kolorem po lewej stronie

Często takie menu jest realizowane za pomocą JavaScript. Poniżej przedstawię rozwiązanie za pomocą XHTML i CSS.

style :

<style type="text/css">
<!--
div#menu { float: left; margin-right: 2px; }

div#menu a { display: block; text-decoration: none; color: #000000; padding: 1px; border-left: 6px solid #CCCCCC; margin-top: 3px; }

div#menu a:hover { color: #FF0000; border-left: 6px solid #FF0000; }
-->
</style>

w sekcji BODY:

<div id="menu">
<a href="/"> Menu I</a>
<a href="/"> Menu II</a>
<a href="/"> Menu III</a>
<a href="/"> Menu IV</a>
<a href="/"> Menu V</a>
</div>

lub w całości:

<style type="text/css">
<!--
div#menu {
    float: left;
    margin-right: 2px;
}

div#menu a {
    display: inline-block;
    text-decoration: none;
    color: #000000;
    padding: 1px;
    border-left: 6px solid #CCCCCC;
    margin-right: 10px;
}

div#menu a:hover {
    color: #FF0000;
    border-left: 6px solid #FF0000;
}
-->
</style>

<div id="menu">
<a href="/"> Menu I</a>
<a href="/"> Menu II</a>
<a href="/"> Menu III</a>
<a href="/"> Menu IV</a>
<a href="/"> Menu V</a>
</div>

 

Projekt © 2009 - INFOPROG 70166 odwiedzin