css menu

**ispuk** · 22-03-2010, 19:25

ciao a tutti ,mi serve un parere da esperti

vorrei realizzare un menu di questo tipo(http://codeigniter.com/) ,prendete per esempio il menu principale roso,orizzontale

ma mi potete spiegare per ottenere l'effetto che visualizza la voce di menu bianca su ogni pagina che cambio come si può fare?
si usano i css o il javascript?

inizialmente pensavo fosse la class a:active dei css ma poi mi sono accorto che non è proprio quella che serve

una birra offerta a chi mi delucida

**miki003** · 22-03-2010, 20:07

Un esempio vale più di mille parole, in rosso come fare quello che tu hai chiesto

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <title></title>
 <style type="text/css">
<!--
body {
        background: #FFF;
        color: #000;
        font: 12px Verdana, Arial, Helvetica, sans-serif;
        margin: 0;
        padding: 0;
}
a:link, a:visited {
        color: #FF2A84;
        text-decoration: underline;
}
a:hover, a:active {
        color: #FFF;
        text-decoration: none;
        background: #FF2A84;
}
#navigation {
        background: #DDD;
        border-bottom: 1px solid #A1A1A1;
        margin: 1em 0 0;
        padding: 0.6em 0 0;
        font-weight: bold;
}
#navigation ul, #navigation ul li {
        list-style: none;
        margin: 0;
        padding: 0;
}
#navigation ul {
        padding: 5px 0 5px;
        text-align: center;
}
#navigation ul li {
        display: inline;
}
#navigation ul li a {
        background: url(tableft.gif) no-repeat left top;
        color: #FFF;
        text-decoration: none;
        padding: 5px 0;
}
#navigation ul li span {
        background: url(tabright.gif) no-repeat right top;
        padding: 5px 7px 5px 3px;
        margin: 4px 0 4px 4px;
}
#navigation ul li a:hover span {
        text-decoration: underline;
        background-position: 100% -75px;
}
#navigation ul li a:hover {
        background-position: 0 -75px;
}
#navigation #current a {
        background-position: 0 -150px;
}
#navigation #current a span {
        background-position: 100% -150px;
}[/COLOR]


/*- Internet Explorer...It's Hacktastic!--------------------------- */

/*\*//*/
#navigation ul li a {
        display: inline-block;
        white-space: nowrap;
        width: 1px;
}

#navigation ul {
        padding-bottom: 0;
        margin-bottom: -1px;
}
/**/

/*\*/
* html #navigation ul li a {
        padding: 0;
}
/**/
-->
</style>
        </head>

        <body>
                <div id="navigation">
                        <ul>
<li id="current"><span>Home</span>[*]<span>Products</span>[*]<span>Services</span>[*]<span>Support</span>[*]<span>Order</span>[*]<span>News</span>[*]<span>About</span>
[/list]
                </div>
        </body>
</html>

**ispuk** · 22-03-2010, 21:10

cioa grazie mille davvero

dovrei provare l'esempio ,adesso ho poca voglia :P
in caso sei sicuro che con questo ottengo l'effetto desiderato?
cioè non vorrei un effetto rool hover

vorrei fare in modo che quando mi sposto di pagina in pagina la voce di menu collegata alla pagina si auto colori ma non tutte

cioè l'id "current" devo metterlo si e no giusto?

o meglio nella home.html metterò l'id solo a link che richiama la home

nella contatti.html metterò l'id solo alla voce link che richiama contatti.html

è cosi?

**miki003** · 22-03-2010, 22:25

Si è così!!!

**ispuk** · 22-03-2010, 22:28

perfetto!! grande miki grazie

a buon rendering

Discussione: css menu

Strumenti discussione

Ricerca discussione

Visualizza

css menu

Permessi di invio