A blog szerzői:

Weinzierl Anett
felnőttképzési szakértő, marketing tanácsadó, Doktorandusz

Duschák Zoltán
felnőttképzési szakértő, informatika tanácsadó

Vendégszerkesztők
Zsenák István
gazdaságinformatikus, PHP oktató

Eilinger Ákos
mérnök-informatikus, oktató

Filus Attila
Photoshop művész (PS Artist), kiadványszerkesztő, oktató

NetlogiC School Informatika Tanfolyamok

Kiscsoportos számítógépes tanfolyamok, gyakorlat orientált informatika oktatás, képzési hírek, ingyenes tutorialok. Képzések munkalehetőséggel: AutoCAD-Műszaki Tervező, Webdesigner, Webprogramozó, Webes-és nyomdai grafikus (Corel, Photoshop, Kiadványszerkesztő), ArchiCAD Tervező, Valamint irodai tanfolyamok: Excel, Word, Office képzés Pécsett.

A blog szerzői

A blog szerzői:

Weinzierl Anett
felnőttképzési szakértő, marketing tanácsadó, Doktorandusz

Duschák Zoltán
felnőttképzési szakértő, informatika tanácsadó


Zsenák István
gazdaságinformatikus, PHP oktató

Eilinger Ákos
mérnök-informatikus, oktató

Filus Attila
Photoshop művész (PS Artist), kiadványszerkesztő, oktató

Bejegyzések

Friss topikok

Címkék

! (1) 201 (1) 2010 (3) 2011 es (1) 2012 (2) 2d (1) 2 3D autocad tanfolyam (1) 3d (3) a (1) ablak (1) access (1) adatbázis (1) adatmentés (2) adobe (13) agytröszt (1) ajándék (2) akció (4) akkreditált (3) akkreditált php képzés Baranya megye (1) akkreditált PHP webprogramozó tanfolyam (4) akkreditált tanfolyam (2) akkreditált webdesigner képzés (4) akkreditált webdesigner tanfolyam Pécsett (4) akkreditált webdesign oktatás (4) alkalmazása (1) alkalmazások (2) államilag (1) álláslehetőséggel (13) angol magyar bizonyítvány (5) animáció (1) animációs (1) animálás (1) aranymetszés készítése photoshopban photoshop tanfolyam Pécsett photoshop oktatás webgrafikus képzés webgrafika oktatás Pécs (1) archicad (6) arcképből (1) áron (1) artist (1) arvchicad (1) autocad (9) autocad 2 3D (2) autocad oktatás Pécs Baranya (4) autocad tanfolyam (4) autocad tanfolyam Pécsett (2) baranya (37) Baranya megye (9) basic (4) blogmotor (1) böngészőkre (1) budapest (9) budapesten (2) cad (5) cad modellező tanfolyam (1) captcha (1) cd (1) cégeknek (1) céges (2) cikkek (1) cms (1) corel (8) corelben (4) coreldraw (34) CorelDraw tanfolyam Pécsett (4) cover (1) csm (1) css (3) css3 szabvany animációs lehetőségei (1) dátumok (1) designer (1) dimenziós (1) díszek (1) doboz (1) draw (2) dreamweaver (2) effektek (1) effektekkel (2) effektusok (2) egyetemistáknak (1) elismert (1) emelt (2) építésze (1) építészeti (2) és (1) excel (5) e business (2) fedlap (1) felbukkanó (1) felhasználóbarát (1) felirat (1) feliratkészítés (1) felirattal (1) felnőttképzés (56) felnőttképzés felnőttoktatás (5) felnőttoktatás (48) fényképek (1) flash (5) formázási (1) fotók (2) fotózás (1) frontpage (1) galéria (1) galéria készítés weboldalra (1) generátorral (1) geometria (1) gif (1) grafika (53) grafikai (6) grafikával (2) grafika képzés (4) grafika mester képzés (7) grafikus (35) grafikus tanfolyam (2) gragfika (2) gyakorlat (4) gyakorlatias (1) gyakorlat oreintált informatika tanfolyam (5) gyakorlat orientált (4) gyakorlat orientált felnőőtképzés (8) gyakorlat orientált képzés munkalehetőséggel (8) gyakorlat orientált oktatás (1) hálózatfejlesztés (2) happy (1) három (1) hatás (2) hiba (1) honalpkészítő (1) honlap (4) honlapkészítés (26) honlapkészítő (14) honlapkszítő (1) honlapoptimalizálás (1) honlapra (1) htaccess (1) hűsítő (1) húsvét (1) illustrator (1) Illutrator tanfolyam webgrafikus oktatás nyomdai grafika képzés Pécsett képek színezése (1) indesign (2) induló (1) informatika (52) informatikanyomdai (1) informatika képzések (3) informatika oktatás Pécs (2) ingyen (3) ingyenes (1) ingyenhonlapkészítés (1) internet (6) internetes (1) inygen (1) irodai (1) január (1) januári (1) javítása (2) jelölőnégyzetek (1) jelszóvédelem (1) joomla (1) jövő (1) karácsonyi (2) karikatúra (1) kedvezmény (2) kedvezményes (4) képek (4) képkeretezés (1) képzés (80) képzésanimációs (1) képzések (13) képzés munkalehetőséggel (1) keresőmarketing (9) keresőoptimalizálás (8) készítés (9) készítése (12) készítő (2) kezdéssel (1) kezelése (1) kiadványszerkesztés (1) kiadványszerkesztő (3) kihelyezett (3) kiscsoportos (4) kiscsoportos informatika oktatás (3) kóddal (1) könnyedén (1) kontrasztjának (1) kördiagram (1) körvonalazás (1) középiskolásoknak (1) last (1) layer (1) lebegő (1) lehetőségek (1) letölthető (1) létrehozása (1) lightbox galéria készítése (1) linklista (1) linkmarketin (1) linkmegosztók (1) marketing (9) megelőzése (1) megjelenítése (2) meglepetés (1) megoldások (1) megye (16) megyében (1) menü (1) menükészítés (2) mester (5) mikulás (2) minute (1) modellezés (2) munka (2) műszaki (2) műszaki rajzoló oktatás (2) műszaki tervező képzés (2) myqql (1) mysql (6) napakció (1) navigációs (1) névjegykártya (1) növelése (1) nyári (3) nyomadai (1) nyomdai (9) nyomdai-webes grafika oktatás Pécsett (1) offce (1) office (1) oktatáas (3) oktatas (9) oktatás (93) oktatás tanfolyam Baranya megye (10) online (9) orientált (3) országosan (3) padlóáras (4) padlóáron (1) pályázatíró (1) pécs (44) pécsett (10) Pécsett (2) pendrive (2) perspektivikus (1) pest (4) photoshop (37) Photoshop-CorelDraw tanfolyam Baranya (3) photoshopban (7) photoshop képzés Pécs (1) phottoshop (4) php (30) php és webdesigner képzések (6) plakátkészítés (1) popup (1) powerpoint (1) prgrammal (1) prhotoshop (3) probléma (1) professzionális (5) professzionális nyomdai webes grafikus tanfolyam (4) program (2) programmal (4) programozása (1) projektmenedzser (1) projektmenedzsment (1) rajzolás (2) rajzoló (1) ranfolyam (1) rendszerek (2) retusálás (1) retusálása (2) rugalmas időbeosztással (2) sablon (1) saját (6) sáv (1) scriptekkel (1) segítségével (2) sikerszakmák (2) sminkelés (1) stíluslapok (1) summer (1) szakma (2) szakmavonal (1) szám (1) számítástechnika (32) számítástehcnika (2) számítógép (11) számítőgépes (3) számítógépes (25) számítógépes tanfolyam Baranya megye (4) számítógépes tanfolyam Pécs (5) számítógéppel (2) szeptember (1) színek (1) szintű (2) tábor (1) támogató (1) támogatott (2) tanácsadás (2) tandíjkedvezményes (5) tandíjkedvezményes autocad tanfolyam nyáron (1) tandíjkedvezményes informatika képzések (2) tandíjkedvezményes informatika tanfolyam (1) tandíjkedvezményes képzés nyáron (2) tanfolyam (91) tanfolyamok (23) tanfolyam gyakorlat orientált (2) tanulmány (4) tartalmak (1) tartalomkezelő (1) térbeli (2) tervezés (5) tervező (4) tervezői (3) tippek (3) tnfolyamok (1) torzítás (1) tuti (2) tutorial (1) üdítős (1) űrlapkezelés (2) valentin (1) vállalati (3) vállalkozás (1) védelem (3) védelme (1) védelmi (2) végzettség (3) vírusirtás (2) vírusírtás (2) visual (4) visual basic (1) vizes (1) vonalas (1) web (1) webdesginer (6) webdesign (31) webdesigner (42) webes (4) webfejlesztés (1) webgrafika (21) webgrafikus (11) webkamera (1) webkatalógusok (1) weblap (2) weblapkésíztés (2) weblapkészítés (26) weblapkészítéshez (1) weblapkészítési (1) weblapkészítő (32) weblapra (1) weboldal (15) weboldal készítés (9) webprogramozás (30) webprogramozás oktatás Pécsett munkalehetőséggel (12) webprogramozó (30) webprogrmaozás (5) word (3) wordpress (3) zajtalanítás (1) Címkefelhő

Lebegő, animált navigációs sáv készítése weblapra!

2012.01.14. 10:10 oktatas_szamitogepes_tanfolyamok


Á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

share

 

 

 

Szólj hozzá!

Címkék: oktatás php pécs tanfolyam megye grafika baranya képzések emelt képzés szintű cad sáv készítése lebegő tervező honlapkészítő navigációs honlapra menükészítés webdesginer weblapkésíztés weblapra

A bejegyzés trackback címe:

https://oktatas-szamitogepes-tanfolyamok.blog.hu/api/trackback/id/tr285254737

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Nincsenek hozzászólások.
süti beállítások módosítása