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