Dec
8
CSS- menu
Filed Under Web standards
Näyttävän menun, tekemiseen hover-efekteineen, ei tarvita välttämättä ollenkaan javaScriptiä. Molemmissa on hyvät ja huonot puolensa, mutta molempia yhdistää ainakin se, että kumman tahansa voi tehdä hyvin tai huonosti. Ja luonnollisesti huono toteutus onnistuu meiltä kaikilta käden käänteessä. Hyvään lopputulokseen pääseminen ei toki ole vaikeaa. Se vain vaatii hieman enemmän asiaan paneutumista ja ehkä jonkin verran suunnittelua. Toisaalta, kun ajattelu ja suunnittelu on kerran tehty ja omaksuttu, ei tulevaisuudessa tarvitse enää keksiä pyörää uudelleen. Vanhaa CSS:n ja menun XHTML:n voi helposti liittää suoraan uusiin projekteihin ja muokata sitä tarpeen mukaan.
En käy tässä esimerkissä läpi pudotusvalikoita, vaan tarkoitus on lähinnä näyttää miten yksinkertaisen CSS-menun rakentaminen käy.
Sisältö
Valmistelut
Aloitetaan siis luomalla menun grafiikat. Käytän menussani seuraavanlaisia:
button_normal.gif (w=200px, h=40px)
button_hover.gif (w=200px, h=40px)
XHTML
HTML-sivulle kirjoitetaan seuraava:
<ul id="menu"> <li><a href="javascript:;">Main 1</a></li> <li><a href="javascript:;">Main 2</a></li> <li><a href="javascript:;">Main 3</a></li> </ul>
Listan muotoon rakennettu menu on hyvä ratkaisu sen rakenteen takia. Sitä on helppo päivittää, koska valikon hierarkia on selkeästi hahmotettavissa. Ratkaisu on hyvä myös saavutettavuuden kannalta, koska myös ruudunlukija (Screen reader [en]) osaa kertoa käyttäjälleen menussa olevien elementtien (linkkien) suhteet.
CSS
Menu ei näytä kovin kummoiselta ilman CSS-muotoilua (menu ilman muotoilua), joten katsotaan seuraavaksi mitä asialle voidaan tehdä.
Aloitetaan määrittelemällä itse menun tyylit (fonttiperhe, koko ja tyyli):
ul#menu{ display:block; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; font-style:normal; }
Oletuksena selaimet lisäävät listaelementtien alkuun mustan pallon. Tämä on poistettava.
ul#menu li{ list-style:none; }
Seuraavaksi muotoillaan itse linkit.
ul#menu li a{ display:block; background:#6FB200 url(button_normal.gif) no-repeat top left; padding:10px 0 0 10px; text-decoration:none; width:190px; height:30px; }
Anchor- tagi <a> on määriteltävä block level- elementiksti, jotta sille voidaan määrittää taustakuva, padding, korkeus ja leveys. Muutoin edellä mainituilla ominaisuuksilla olisi vaikutusta.
Lopuksi määriteellän vielä menun interaktiivinen osuus.
ul#menu li a:link, ul#menu li a:visited{ color:#165800; } ul#menu li a:hover, ul#menu li a:active{ background:#6FB200 url(button_hover.gif) no-repeat top left; color:#fff; }
Ensin siis määritellään linkin “normaalin” ja “käytetyn” tekstin linkin väri ja sen jälkeen linkin hover sekä aktiivinen tila.
Lopuksi
Saata miettiä, että menusta ei ole paljon hyötyä, koska sivustosi vaati vaakatasossa olevan menun. Not to worry… menusta saadaan käden käänteessä tehtyä vaakaversio. Lisätään vain linkin määrittelyyn float-ominaisuus:
float:left;
Selkeyden vuoksi lisäsin vielä tummat reunat linkkiboxien vasempaan reunaan. Näin linkit on helpompi erottaa toisistaan.
Pystymenun CSS | Vaakamenun CSS
Kuten huomaat, CSS:n avulla sivun elementtien muotoilu käy todella helposti. Muutos tehdään CSS-tiedostoon ja muutos päivittyy koko sivustolle. Helppoa ja yksinkertaista.
Comments
9 comments to “CSS- menu”
Leave a comment
Some Rights Reserved
Hmm… Hyvä juttu ja saisin varmaan toimimaan omilla sivuillani (nykyinen on vähän huono, toimii vain firefoxissa), mutta valitettavasti valikon kaikkien kuvien koko on erilainen. Onko tuota mahdollista soveltaa niin?
On toki. Voit määrittää, jokaiselle anchor-tagille erikseen koon, esim. antamalla jokaiselle linkille oman id:n. Tähän ID:hen viittaamalla voit sitten määrittää CSS-failissa jokaiselle linkille uniikin koon.
Kiitoksia paljon.
Tein ohjeiden mukaan ja sain toimimaan, mutta huomasin kun linkkiä painaa niin siihen tulee joku muu teksti, miten tuon saisi pois?
(En tarkoita sitä, kun laitetaan hiiren kursori päälle ja “kuva” vaihtuu, se toimii kunnolla).
“kun linkkiä painaa niin siihen tulee joku muu teksti”.
Valitettavasti en nyt kyllä ymmärrä mitä varsinaisesti tarkoitat.
Selvitin ongelman itse. Hyvät sivut sinulla.
list-style:none; poistaa kyllä mustat pallot, mutta vasempaan reunaan jää ikävästi 40px tyhjää tilaa. Miten sen saisi pois?
@ Masaon
Lisää seuraavat tyylit
ul#menu
{
/*
Lisää alla oleva edellisten jatkoksi.
*/
margin-left: 0px;
padding-left: 0px;
}
Tere !
Kiitos hyvästä sivusta ja neuvoista.
http://www.oswd.org Kyseiseltä sivulta latasin Rounded_2 ilmaisen paketin ja muuten hyvin kaikki mutta en saa vasemmalla puolella olevia linkki painikkeita siirrettyä sivun ylä osaan.
Yritin soveltää tämän Haverisen sivun inline komentoa mut ei toimi/vaikuta.
Ja html puolella linkit on nyt peräkkäin ilman tyhjiä välejä.
http://raulihaverinen.fi/web/ohje/navigointi/
Eli haluaisin että leipäteksti alkaa painikkeiden alta.
Tulee vain 3 painiketta ja haluaisin ne vaakaan peräkkäin.
Ja jos jollain vois määrittää niiden etäisyyttä toisista.
tuossa on copy/paste css tyylitiedosto jossa määritykset on.
Kiitos.
/**************************************************/
/* Body and Wrapper */
/**************************************************/
body {
background: #000099 url(images/back.png) top center repeat-x;
margin: 0;
padding: 0;
font: normal 8pt/13pt verdana, arial,sans-serif;
}
#wrapper {
margin: 0 auto;
width: 800px;
padding: 0;
text-align: left;
}
/**************************************************/
/* Top Piece */
/**************************************************/
#top {
background: url(images/bgtop.png) top center no-repeat;
width: 800px;
height: 78px;
}
/**************************************************/
/* Content
another wrapper that holds all the content */
/**************************************************/
#content {
background: url(images/bgmiddle.png) center repeat-y;
width: 766px;
height: 100%;
padding: 0px 17px 0px 17px;
}
/**************************************************/
/* All the content */
/**************************************************/
#header {
background: url(images/header_muokattu.png) top center no-repeat;
width: 746px;
height: 106px;
margin: 0px 0px 10px 0px;
padding: 60px 0px 0px 20px;
color: white;
font-size: 50px;
text-align: ;
}
/* Menu */
#menu {
width: 200px;
height: 100%;
margin-left: 10px;
float: left;
text-align: left;
}
#menu li a {
height: 37px;
voice-family: “\”}\”";
voice-family: inherit;
height: 29px;
text-decoration: none;
text-align: left;
}
#menu li a:link, #menu li a:visited {
color: navy;
display: block;
background: url(images/off.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: left;
}
#menu li a:hover {
color: blue;
background: url(images/on.png) top center no-repeat;
padding: 8px 0 0 10px;
height: 29px;
text-align: left;
}
ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
#stuff {
background: url(images/texttop.png) top left no-repeat;
width: 500px;
margin: 0px 0px 0px 30px;
padding-top: 55px;
border: 2px navy;
}
img {
border: none;
}
/**************************************************/
/* Bottom */
/**************************************************/
#bottom {
background: url(images/bgbottom.png) bottom center no-repeat;
width: 800px;
height: 50px;
}