Taigi pradedame su meniu, kuris bus rodomas viršutiniame langų regione.
Jūs jau paruošėte daug darbo šiam meniu. Jūs tikriausiai prisimenate gražų spalvų pereinamąjį efektą, kuris buvo išsaugotas kaip vieno pikselio grafika. Tuo tikslu šis efektas dabar panaudojamas. Tačiau prieš tai reikia sukurti tinkamą HTML struktūrą meniu srityje. Tai galėtų atrodyti taip:
<div class="header"> <div class="header-top"> <h1>Jūsų mokesčių konsultantas</h1> </div> <div class="topmenu"> <ul> <li><a href="index.html">Pradžia</a></li> <li><a href="#">Apie mus</a></li> <li><a href="#">Kaip mes dirbame</a></li> <li><a href="#">Kontaktai</a></li> <li><a href="#">Imprintas</a></li> </ul> </div> <div class="header-img"> </div> </div>
Fono dizainui naudojamas vienas pikselis, kuris yra pakartojamas vertikaliai tiek kartų, kad visa elementas užpildytas.
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
Toliau meniu gali būti suformatuotas. Čia iš esmės nėra jokių ypatingų dalykų, kuriuos reikia atkreipti dėmesį. Sprendžiant šiuos menius, svarbūs paprasti dalykai:
• Paslėpti sąrašo ženkliukus naudojant list-style-type: none;.
• Pasirūpinti, kad sąrašo elementai būtų rodomi greta.
Aš šioje vietoje dirbu - kaip jau žinote - su spalvų pereinamuoju efektu, kuris yra įgyvendinamas per grafiką. Šiuo metu, žinoma, meniuems yra dar daugybė alternatyvų. Galbūt galvojate apie JavaScript platformas kaip jQuery. Čia aišku, atskleisti visas šias galimybes viršytų laiko ir vietos ribas. Bet jau yra daugybė internetinių generatorių, kuriais galima greitai sukurti menius. Vieną iš jų - be jokios vertinimo, ar jis yra genialiausias savo rūšies - rasite čia http://www.cssmenubuilder.com/.
Vienokai aš pasirinkau tokią variantą:
.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;
}Dešinysis meniu
Svetainėje yra ne tik viršuje meniu, bet ir dešiniame langų regione bus pateiktas dar vienas meniu.
Šis meniu priklauso div srityje su klase content-right. Šios svetainės plėtros stadijoje ten įdėjau tik laikinas turinio dalis.
<div class="content-right"> <h2>Pagrindinis meniu</h2> <ul> <li><a href="#">Nuoroda 1</a></li> <li><a href="#">Nuoroda 2</a></li> <li><a href="#">Nuoroda 3</a></li> <li><a href="#">Nuoroda 4</a></li> <li><a href="#">Nuoroda 5</a></li> <li><a href="#">Nuoroda 6</a></li> <li><a href="#">Nuoroda 7</a></li> <li><a href="#">Nuoroda 8</a></li> <li><a href="#">Nuoroda 9</a></li> <li><a href="#">Nuoroda 10</a></li> </ul>
Sritis pirma bus tinkamai ir pageidautinais matmenimis nustatyta ir padėta.
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}
Toliau einama prie paties meniu apibrėžimo. Šį kartą elementai yra vienas po kito. Taigi jums tik reikia pasirūpinti, kad sąrašo ženkliukai būtų paslėpti. Likusi meniu stilizavimo detalės paliekamos jums.
.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;
}Naršyklėje dabar turėtumėte matyti šią vaizdinę:
Apatinis meniu
Svetainės apatinėje dalyje bus kitas meniu. Čia, PSD-Tutorials.de naudojamas panašus meniu, kad būtų pateikti nuorodos į bendrą informaciją.
Mūsų svetainėje taip pat yra autorių teisių pranešimas. Abu dalykai iš esmės yra tipiški svetainėms. Pirmiausia vėl HTML struktūra.
<div class="bottom"> <ul> <li><a href="index.html">Pradžia</a></li> <li><a href="#">Apie mus</a></li> <li><a href="#">Naujienos</a></li> <li><a href="#">Valdymo skydas</a></li> <li><a href="#">Kontaktai</a></li> <li><a href="#">Impressum</a></li> <li><a href="#">Svetainės žemėlapis</a></li> </ul> <p>© Autorių teisė 2014 pagal PSD-Tutorials.de</p> </div>
Tai yra paprastas ul-sąrašas. Kiekvienas sąrašo elementas yra meniu elementas. Po ul sąrašo yra p-elementas, kuriame yra autorių teisių pranešimas. Dabar vistiek trūksta CSS sintaksės.
.bottom {
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Kaip jūs apibrėžiate apatinę dalį, galiausiai priklauso nuo jūsų. Aš vėl naudoju spalvų perėjimą. Tačiau jūs galite naudoti paprastą fono spalvą arba net CSS3 sintaksę. Tačiau mano grafinėje variante svarbu, kad naikinimas būtų uždraustas background-repeat: no-repeat;.
Pirmiausiai pažiūrėkite į rezultatą:
Kas čia išsiskiria, tai balti brūkšniai, kurie yra rodomi šalia kiekvieno meniu elemento. Šie apibrėžiami naudojant skirtingus border-left nurodymus, kas iš esmės reiškia, kad kiekvienas nurodymas taikomas kairiojo elemento kraštui.
Iš viso, apatinio meniu sintaksė atrodo taip:
.bottom ul {
margin-top: 30px;
list-style-type: none;
}
.bottom ul li {
display: inline;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #fff;
}
.bottom ul li a {
font-size: 12px;
color: #fff;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
}
.bottom ul li a:hover {
text-decoration: underline;
}
.bottom p {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a {
font-size: 12px;
color: #fff;
margin-top: 40px;
}
.bottom a:hover {
text-decoration: none;
}
Čia yra ypatingumas palyginti su viršutiniu meniu. Iš tikrųjų, "hover" atveju papildoma grafika nėra įkeliama. Tačiau norint, kad lankytojai suprastų, jog pele pasirinktas nuorodas, kiekvienos nuorodos bus pabraukiamos "hover" įvykio metu.
Po šio vadovo pagrindiniai žingsniai į svetainę yra padaryti. Kas dar trūksta, tai puslapio gražinimas. Apie tai daugiau ateis kituose vadovuose.
