2015.06.09. 12:46, Enma22
Maga a men alapja ez lesz, ide jnnek a linkek div trolban. Igazbl nehz lenne pontosan elmagyarzni mi micsoda, csak gy hasznld az a lnyeg.
A zlddel jellt rsz annyiszor ismtled meg, ahny menpontod lesz, ha kevesebb mint most nlam, akkor ki kell trlni ket, ha tbb akkor beilleszteni mg.
A menubar az a div trol neve, lehet ms is.
(ul - lista, jells nlkli)
Ez pedig mr maga a CSS kd hozz, ami megadja, hogy ezek a linkek hogyan is nzzenek ki, hogyan mkdjn a dolog. Lehet vzszintes ment is ltrehozni vele, olyankor a float helyre azt kell rni, hogy left, vagy right.
.menubar a:link, a:viseted rsz:
A display az block, nem is nagyon szoktak mst, s nlam annak a mrete a 150px. Ilyen szlessgben fogja rzkelni magt a linket. rdemes akkorra lltani, hogy a szvegedet vgigrje. A tbbi formzs rajtad ll.
.menubar a:hover, a:active rsz:
Itt azt lehet belltani, hogy mi trtnjen, ha rviszed a linkre az egeret. Nlam ugye alap helyzetben nincs httrszn, ami amgy lehetne, s ssze vannak hzva a betk, hogy ltvnyosabb legyen, mikor egrrel fl megyek. Ezt gy oldottam meg, hogy szthzza a szveget, de akr 0 is adhattam volna meg, akkor alaphelyzetbe ll a szveg. Sajt formzst adhatsz neki, n csak ennyi vltozst szerettem volna rajta elvgezni.
.menubar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.menubar li {
float: center;
}
.menubar a:link, a:visited {
display: block;
width: 150px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
padding: 4px;
letter-spacing: -3px;
text-decoration: none;
text-transform: uppercase;
}
.menubar a:hover, a:active {
background-color: #F5CAE4;
letter-spacing: 2px;
}