cheap nfl jerseys china cheap nfl jerseys free shipping wholesale nfl jerseys china wholesale jerseys from china cheap nfl jerseys free shipping cheap nfl jerseys for sale cheap jerseys free shipping wholesale nfl jerseys from china cheap nfl jerseys sale cheap nike nfl jerseys china wholesale jerseys free shipping cheap nfl jerseys wholesale wholesale nfl jerseys online cheap nfl jerseys wholesale china jerseys wholesale cheap coach handbags outlet authentic designer handbags cheap coach handbags outlet cheap coach purses outlet discount coach bags coach bags sale coach purse outlet cheap real coach purses coach handbags sale online coach purse outlet michael kors outlet online store cheap michael kors bags cheap michael kors purse michael kors factory outlet online cheap michael kors handbags cheap michael kors purses michael kors bags outlet online cheap michael kors purse michael kors handbags discount

<-- saved from url=(0058)http://www.meyerweb.com/eric/talks/2003/commug/commug.html -->

fare menu con poche linee CSS

i menu (navbars, toolbars, sidebars, ...), dal punto di vista strutturale sono liste di link e liste devono rimanere

<ul id="navigation">
<li><a href="index.html">WidgetCo Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="fun.html">Widgety Fun!</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="about.html" id="current">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

ma la forma dipende dal foglio di stile, che consente ampia flessibilità

[0] possiamo togliere i simboli e l'indentazione e aggiungere linee:

/* simple separators */
#navigation {padding: 0; margin: 0; font: bold 12px Verdana, sans-serif; border-bottom: 1px solid gray; width: 13em;}
#navigation li {list-style: none; margin: 0; padding: 0.25em; border-top: 1px solid gray;}
#navigation li a {text-decoration: none;}

notare: list-style: none; text-decoration: none:

[1] possiamo dare la forma di pannello:

/* panelize */
#navigation {padding: 1px; margin: 0; font: bold 12px Verdana, sans-serif; border: 2px solid; border-color: #AAA #EEE #EEE #AAA; background: #CCC; width: 13em;}
#navigation li {list-style: none; margin: 0; padding: 0.25em 1em; border: 1px solid; border-color: #FFF #AAA #AAA #FFF; text-align: center;}
#navigation li a {text-decoration: none;}
#navigation li a:link {color: black;}
#navigation li a:visited {color: gray;}

notare: border sia nel blocco che nella singla voce e background

[2] possiamo rendere i link dei blocchi della stessa dimensione:

#navigation {padding: 0 1px 1px; margin: 0; font: bold 12px Verdana, sans-serif; background: gray; width: 13em;}
#navigation li {list-style: none; margin: 0; border-top: 1px solid gray; text-align: left;}
#navigation li a {display: block; padding: 0.25em 0.5em 0.25em 0.75em; border-left: 1em solid #AAB; background: #CCD; text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: #FE3; color: #FFF; background: #332;}

notare: display: block; e lo pseudo-attributo hover

[3] possiamo visualizzarli su una riga:

/* simple inlining of previous example */
#navigation {padding: 0 1px 1px; margin: 0; font: bold 12px Verdana, sans-serif;}
#navigation li {list-style: none; margin: 0; border-top: 1px solid gray; display: inline;}
#navigation li a {padding: 0.25em 0.5em 0.25em 0.75em; border-left: 1em solid #AAB; background: #CCD; text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: #FE3; color: #FFF; background: #332;}

notare: display: inline;

[4] e possiamo farli apparire come una navbar orizzontale tradizionale:

/* traditional navbar */
#navigation {padding: 3px 0; margin: 0; border: 1px solid #BBC; background: #DDE; font: bold 12px Verdana, sans-serif;}
#navigation li {list-style: none; margin: 0; display: inline;}
#navigation li a {padding: 3px 0.5em; border-right: 1px solid #BBC; text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: #88C; color: #000; background: #AAE;}

notare: display: inline;

[5] o come se fossero tab:

/* tabbed styles */
#navigation {padding: 3px 0; margin: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif;}
#navigation li {list-style: none; margin: 0; display: inline;}
#navigation li a {padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {color: #000; background: #AAE; border-color: #227;}

[6] con anche il tab corrente evidenziato:

/* "current tab" style */
#navigation li a#current {background: white; border-bottom: 1px solid white;}

notare: #current

[7] infine aggiungiamo un titolo (inline)

<ul id="navigation">
<li id="title"><h4>Navigation</h4></li>
<li><a href="index.html">WidgetCo Home</a></li>
...
</ul>

#navigation {padding: 0; margin: 2em 0 0; font: bold 12px Verdana, sans-serif; background: white; width: 11em; border: 1px solid gray; border-width: 1px 1px 0 0;}
#navigation li {list-style: none; padding: 0; margin: 0.5em 0; text-align: right;}
#navigation li a {padding-right: 0.5em; border-bottom: 1px solid gray; text-decoration: none;}
#navigation li a:link {color: #448;}
#navigation li a:visited {color: #667;}
#navigation li a:hover {border-color: red; color: #000;}
#navigation h4 {display: inline; margin: 0; padding: 1px 0.33em; position: relative; top: -1em; font-size: 1.1em; background: white; border: 1px solid gray;}
#navigation #title {text-align: left;}

notare: h4 definito dentro il blocco come display: inline; e #title id figlio di un altro id