Cum pot face un meniu ca asta?

Versiune printabilă

19th August 2008, 13:00
Federals

1 Ataşament(e)

Cum pot face un meniu ca asta?

Am un meniu in Photoshop (deci pot sa iau usor culorile samd), dar nu stiu cum sa fac butoanele sa se repete la dreapta cu tot cu separator.

Demo-ul e in atasament.

Ma gandesc la un rezultat de genul:

<div id="menu">Home</div>
<div id="menu">About us</div>
........

Nu ma mai complic si cu dimensiunea, o sa fac un buton de dimensiuni fixe care e albastru la hover si negru in rest.

La partea cu hover-ul ma descurc :) Cu repetarea in functie de cate div-uri am... aici e problema.

Ma puteti ajuta?

Mersi!
19th August 2008, 13:30
Federals

2 Ataşament(e)

Am reusit asa, in caz ca va intereseaza:

<html>
<head>
<style type="text/css">

a.menu
{
color: white;
font: 12px Arial,Helvetica,sans-serif;
text-decoration: none;
display: block;
width:97px;
height: 29px;
padding-top:8px;
text-align:center;
background-image: url('button_1.png');
background-repeat:no-repeat;
float: left;
}

a.menu:hover
{
background-image:url('button_0.png');
background-repeat:no-repeat;
font-weight: bold;
width:97px;
height: 29px;
float:left;
}

</style>
</head>
<body>
<a class="menu" href="home.html">Home</a>
<a class="menu" href="news.html">About us</a>
<a class="menu" href="menu.html">Offers</a>
<a class="menu" href="locations.html">Shipping</a>

</body>
</html>

Butoanele sunt in atasament.
19th August 2008, 19:37
Dever

Vezi sliding doors aici si aici pentru dimensiuni variabile si eventual css sprites aici.
19th August 2008, 20:16
Federals

Citat:

Postat în original de Dever

Vezi sliding doors aici si aici pentru dimensiuni variabile si eventual css sprites aici.

mersi!
21st August 2008, 14:45
Federals

sorry pentru post dublu, dar mai am o curiozitate:
cum pot sa fac ca atunci cand sunt pe o pagina, background-ul butonului paginii sa ramana albastru iar restul negre? si tot asa, cand ma plimb in fiecare pagina. se poate direct din css?

mersi!
21st August 2008, 14:56
forapathy

sa ramana selectat butonul adica?

din css nu stiu sa existe aceasta posibilitate.. insa din php se poate face..

faci o clasa pentru buton asa cum e el.. si inca una cand e selectat.. si cu php verifici ce pagina e selectata si selectezi doat clasa de css de care ai nevoie..

sau daca ai doar pagini html.. pui pt fiecare pagina in parte alta clasa pt acel buton..
21st August 2008, 15:28
Federals

mersi, o sa incerc
21st August 2008, 16:46
Dever

Am scris recent despre asta pe blog aici.

Din css poti daca setezi un id pe body pt fiecare pagina:
Daca HTML-ul homepage-ului arata asa:

Cod:

<body id="homepage"> .... <ul> <li><a id="home" href="link_catre_homepage">Go Home</a></li>

CSS-ul ar putea sa arate asa:

Cod:

#homepage #home { /* stil pentru butonul de pagina activ */ }

De asemenea aceeasi problema se poate rezolva din PHP setand o clasa "activ":

Cod:

//verificare pagina cumva if ($pagina == "home") { echo ' class="activ" '; }

si CSS-ul se simplica fiind doar pt 1 clasa:

Cod:

a.activ { /* stil pentru butonul de pagina activ */ }
21st August 2008, 18:04
CristiC

Uite aici unul din multele exemple de meniuri in css.

Pentru cel curent - vezi ca in cod la un moment dat apare class="current".

Poti sa te inspiri sau sa modifici direct scriptul asta si sa schimbi cu imaginile tale.
21st August 2008, 18:39
Federals

mersi tuturor!