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>
|
