Tehát ez a menüvel kezdődik, amely a felső ablaktáblán jelenik meg.
Ehhez a menühöz már sok előkészületet tettetek. Bizonyára emlékeztek a szép színátmenetre, amely egy pixelgrafikában lett elmentve. Pontosan ez most kerül felhasználásra. Mielőtt azonban ez történne, meg kell még létrehozni a megfelelő HTML struktúrát a menüterületnek. Így nézhetne ki:
<div class="header"> <div class="header-top"> <h1>Az adótanácsadód</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Főoldal</a></li> <li><a href="#">Rólunk</a></li> <li><a href="#">Hogyan dolgozunk</a></li> <li><a href="#">Kapcsolat</a></li> <li><a href="#">Impresszum</a></li> </ul> </div> <div class="header-img"> </div> </div>
A háttér tervezéséhez a megadott pixelgrafikát be kell tölteni és függőlegesen annyiszor ismételni, amíg az egész elem ki nem töltődik.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Ezután formázhatjátok a menüt. Alapvetően itt nincs különleges figyelembe veendő dolog. Ezeknél a menükkel valóban mindig csak a következő aspektusok számítanak:
• Az elemlistapontokat a list-style-type: none; segítségével rejtsétek el.
• Gondoskodjatok róla, hogy a listaelemek egymás mellett legyenek megjelenítve.
Ezen a ponton dolgozom – ezt már régóta tudjátok – egy színátmenettel, amelyet egy grafikonnal valósítanak meg. Azóta természetesen a menük számára számos más lehetőség is rendelkezésre áll. Gondoljatok például a jQueryhez hasonló JavaScript keretrendszerekre. Minden ilyen lehetőséget itt bemutatni, természetesen túlmutatna a kereteken. Azonban már számos online generátor létezik, amelyek segítségével a menük pár kattintással létrehozhatók. Ezek közül az egyiket – anélkül, hogy megítélnénk, hogy az éppen a maga nemében zseniális-e – az alábbi linken találjátok: http://www.cssmenubuilder.com/.
Tehát én az alábbi változat mellett döntöttem:
.topmenu ul {
width: 100%;
height: 37px;
list-style-type: none;
}
.topmenu ul li {
height: 37px;
float: left;
padding-right: 25px;
padding-left: 25px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 37px;
color: #fff;
text-decoration: none;
display: block;
height: 37px;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.topmenu ul li a:hover {
background-image: url(../images/menue-hover.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Tulajdonképpen csak a Hover állapot számít igazán. Ha ez az esemény bekövetkezik, akkor egy másik háttérgrafika jelenik meg.
A jobb oldali menü
A webhelyen nemcsak fent van egy menü, hanem a jobb ablaktáblában is látható egy.
Ez a menü a content-right osztályba tartozik. A webhely fejlesztési szakaszában ide csak a Dummy tartalom lett elhelyezve.
<div class="content-right"> <h2>Főmenü</h2> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">Link 7</a></li> <li><a href="#">Link 8</a></li> <li><a href="#">Link 9</a></li> <li><a href="#">Link 10</a></li> </ul>
Az elemet először megfelelő helyre és a kívánt méretben kell elhelyezni.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Folytatódik az effektív menü meghatározásával. Ezúttal az elemek egymás alatt helyezkednek el. Tehát csak arra kell figyelnetek, hogy az elemlistapontok el vannak rejtve. A menü többi stílusa végül is az egyén döntése lesz.
.content-right ul {
list-style-type: none;
}
.content-right ul li {
padding-left: 45px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ccc;
}
.content-right ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
text-align: left;
display: block;
}
.content-right ul li a:hover {
color: #0b90d6;
}A böngészőben most a következő fog láthatóvá válni:
A alsó menü
A webhely alsó részén további menü lesz. Itt a PSD-Tutorials.de webhelyen ilyen menüt használnak, hogy általános információkhoz tartozó linkeket biztosítsanak.
A webhelyünkön továbbá szerepel egy szerzői jogi figyelmeztetés. Mindkét dolog igazából tipikus a webhelyek számára. Először ismét az HTML struktúra.
<div class="bottom"> <ul> <li><a href="index.html">Kezdőlap</a></li> <li><a href="#">Rólunk</a></li> <li><a href="#">Újdonságok</a></li> <li><a href="#">Vezérlőközpont</a></li> <li><a href="#">Kapcsolat</a></li> <li><a href="#">Impresszum</a></li> <li><a href="#">Oldaltérkép</a></li> </ul> <p>© Copyright 2014, PSD-Tutorials.de</p> </div>
Ez egy egyszerű ul-lista. Minden listaelem tartalmaz egy menüpontot. Az ul-lista alatt található egy p-elem, amelyben a szerzői jogi figyelmeztetés van. Ami most hiányzik, az természetesen a CSS szintaxis.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: bal felső;
text-align: középre;
szélesség: 1000px;
magasság: 110px;
lebeg: bal;
}
Hogy alakítjátok ki a láblécet, az végül is rajtatok múlik. Én ismét egy színátmenetet használok. De például egy egyszerű háttérszínt is alkalmazhatsz, vagy rögtön használhatsz CSS3 szintaxist. Grafikus változatomban az a lényeg, hogy a megismétlődést a background-repeat: no-repeat; megakadályozza.
Először nézzétek meg az eredményt:
Ami itt feltűnő, azok a fehér vonalak, amelyek az egyes menüpontok mellett jelennek meg. Ezeket különböző border-left beállítások határozzák meg, ez végül is azt jelenti, hogy az adatok mindegyike a bal elem szélére vonatkozik.
Az alsó menü szintaxisa összességében a következő módon néz ki:
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: szilárd;
border-left-color: #fff;
}
.bottom ul li a {
betűméret: 12px;
szín: #fff;
szöveg-dekoráció: nincs;
jobb padding: 15px;
bal padding: 15px;
}
.bottom ul li a:hover {
szöveg-dekoráció: aláhúzás;
}
.bottom p {
betűméret: 12px;
szín: #fff;
margin-felső: 40px;
}
.bottom a {
betűméret: 12px;
szín: #fff;
margin-felső: 40px;
}
.bottom a:hover {
szöveg-dekoráció: nincs;
}
Egy különlegesség a felső menühöz képest van itt. Valójában a Hover esemény esetén nem tölt be további grafikát. Azonban, hogy a látogatók mégis megértsék, hogy az egérmutatót egy link felett mozgatják, az egyes linkeket aláhúzzák, amikor a Hover esemény bekövetkezik.
Ezzel a webhely alapvető lépései elkészültek. Ami most hiányzik, az maga a webhely feljavítása. Erről több információ a következő tutoriálban lesz.
