Ákos mai cikkében bemutatja, hogyan készíthetünk a weboldal tetejére lebegő, animált navigációs sávot.
A script hatására a menüpontok legördülnek ( előbújnak ), ha rávisszük az egérmutatót:
A megvalósítás IE8 alatti verziókban nem működik!
1. A HTML felépítése
A navigációhoz szükség lesz egy rendezetlen listára.
A listaelemeknek a nevével megegyező stílus nevet adunk, ezek lesznek a menüpontok.
A listát id-vel látjuk el, mert a JQuery ben erre fogunk hivatkozni.
< ul id = "navigation" >
< li class = "kezdolap" > < a href = "" > < span > Home </ span > </ a > </ li >
< li class = "info" > < a href = "" > < span > A </ span > </ a > </ li >
< li class = "kereses" > < a href = "" > < span > Keresés </ span > </ a > </ li>
< li class = "kepek" > < a href = "" > < span > Fotók </ span > </ a > </ li >
< li class = "rssfeed" > < a href = "" > < span > RSS hírcsatorna </ span > </ a> </ li >
< li class = "podcast" > < a href = "" > < span > Podcast </ span > </ a > </ li>
< li class = "contact" > < a href = "" > < span > Kapcsolat </ span > </ a > </li >
</ ul >
2. A CSS
Először definiáljuk a CSS-ben a lista tulajdonságait:
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}
A listát, vagyis a menünket az oldal jobb felső sarkához pozícionáljuk( top,right értékekkel).
A navigációnak mindig elérhetőnek kell lennie a felhasználó számára, még akkor is, ha görgeti lefelé az oldalt, ezért a pozíciót is ennek megfelelően állítjuk ( position ).
A lista alapértelmezett értékeit eltávolítjuk, mert ezekre nincs szükség( margin, padding, list-style ).
Gondoskodnunk kell arról, hogy az oldalon semmi se takarhassa el a navigációnkat, ezért a z-indexet magasra kell tennünk ( z-index ).
A menünknek fix szélességet kell adnunk, hogy az oldal átméretezésekor se csússzanak az elemek össze, mivel a listaelemeket lebegéssel fogjuk egy sorba rendezni.( width )
Most nézzük a lista elem tulajdonságait:
ul#navigation li {
width: 103px;
display:inline;
float:left;
}
Ez teszi az elemeket egymás mellé, és nem egymás alá.
A listában lévő linkek CSS tulajdonságai:
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#E7F2F9;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
Ez a közös stílus a link elemekhez. A menüpontokhoz külön stílusok lesznek, ahogy már a html-ben elkészítettük.
Extra css:
A keret ( moz-border-radius; webkit-border-bottom-right-radius; webkit-border-bottom-left-radius; khtml-border-bottom-right-radius; khtml-border-bottom-left-radius ) a lekerekített keret készítése, de sajnos nem működik Internet Explorer böngészőn .
Az átlátszóság beállításai ( opacity; filter - Internet Explorer)
A menüpont színe, ha fölé viszik az egérmutatót:
ul#navigation li a:hover{
background-color:#CAE3F2;
}
A menüpontok szövegének beállításai:
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
text-shadow: 0 -1px 1px #fff;
}
A text-shadow árnyék a szöveghez (IE-nél nem működik).
Menüpontokhoz tartozó beállítások:
ul#navigation .kezdolap a{
background-image: url(../images/home.png);
}
ul#navigation .info a {
background-image: url(../images/about.png);
}
ul#navigation .kereses a {
background-image: url(../images/search.png);
}
ul#navigation .podcasts a {
background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a {
background-image: url(../images/rss.png);
}
ul#navigation .kepek a {
background-image: url(../images/camera.png);
}
ul#navigation .contact a {
background-image: url(../images/contact.png);
}
Tehát itt már csak a képek beállítása történik meg.
A JavaScript
A menü animálását a jQuery-vel fogjuk megoldani.
A html-be a head részbe a következőt tegyük ( természetesen az útvonalat aktualizálni kell )
<script type="text/javascript" src="jquery-1.3.2.js"></script>
( lehet nagyobb verzió számú is, de kisebb nem )
Az animáló script: ( Ezt a body-ban kell elhelyezni! )
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
A működés közben először eltüntetjük az összes elemet ( -80 px margó beállítással el elmozgatjuk a képernyőn kívülre ).
A jQuery fogunk először az összes elemet eltűnnek első a "zongora-szerű" módon, amíg a lényeg, hogy csak akkor tudjuk látni a szöveget a linkeket. Ha lebeg tétel fölött van, tesszük az egész elemet húzza ki a tetején. Mindezek, azt adjuk meg a következőket:
JQuery letöltés: ( legfrissebb )
http://blog.jquery.com/2011/11/03/jquery-1-7-released/
A menü megvalósítható a fent leírt módonn, de script forrása és megvalósításhoz szükséges állomány letölthető a következő helyről is.
http://tympanus.net/codrops/2009/12/08/beautiful-slide-out-navigation-revised/
Az oldalon részletes leírás és demó található. (angol )
Az ikonok pedig innen leszedhetők:
http://dryicons.com/free-icons/preview/colorful-stickers-icons-set/
http://dryicons.com/free-icons/preview/colorful-stickers-part-2-icons-set/
http://dryicons.com/free-icons/preview/colorful-stickers-part-3-icons-set/
http://dryicons.com/free-icons/preview/colorful-stickers-part-4-icons-set/
Jó gyakorlást kívánunk!
További, hasonló honlapkészítési megoldásokért iratkozzon be Webdesigner Mester képzésünkre, melynek sikeres elvégzése után képzett Webdesignerként dolgozhat!
2012 januártól képzéseink az aktuális munkaerő piaci elvárásokhoz igazodva megújultak, a Webdesigner Mester képzés már WordPress modult is tartalmaz.
Olvassa el a részleteket a képzésről:
Webdesigner Mester képzés- emelt szintű weblapkészítő tanfolyam
További, január végén induló webes, grafikai, és tervezői képzéseink PHP-Weprogramozó, Web Artist (PHP + Webdesign), Photoshop képzések, Corel, Grafika Mester, Auto-és ArchiCad , Illustrator, InDesign:
Kiscsoportos informatika tanfolyamok januárban
Jelentkezési határidő január 27!
Jelentkezzen itt!
Várjuk szeretettel januári képzéseinkre!
Budapest-Pécs
Gyakorlat orientált informatika oktatás rugalmas időbeosztással!
www.netlogi-c.net
