Blogger Note

Article :

CSS3 Animated Navigation Menu








CSS3 Animated Navigation Menu

Pada hari ini saya akan memberikan tutorial,yaitu 'CSS3 Animated Navigation Menu',menu ini saya temukan dari http://tutorialzine.com/,dan tahukah apa keunggulan menu ini,yupz, kalo gak tau aku beritahu nih.keungguylan menu ini antara lain adalah tanpa menggunakan JQuery sehingga tidak mempengaruhi loading blog,bagaimana menarik bukan,untuk demonya anda bisa melihatnya diatas ini,dengan desain yang elegan pasti akan membuat blog makin keren,ok langsung saja tutorialnya. 
Kode CSS
 .fancyNav{
/* Affects the UL element */
overflow: hidden;
display: inline-block;


border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;


box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
-webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}


.fancyNav li{
/* Specifying a fallback color and we define CSS3 gradients for the major browsers: */


background-color: #f0f0f0;
background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);


border-right: 1px solid rgba(9, 9, 9, 0.125);


/* Adding a 1px inset highlight for a more polished efect: */


box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;


position:relative;


float: left;
list-style: none;
}


.fancyNav li:after{


/* This creates a pseudo element inslide each LI */   


content:'.';
text-indent:-9999px;
overflow:hidden;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
opacity:0;


/* Gradients! */


background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));


/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */


box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;


/* This will create a smooth transition for the opacity property */


-moz-transition:0.25s all;
-webkit-transition:0.25s all;
-o-transition:0.25s all;
transition:0.25s all;
}


/* Treating the first LI and li:after elements separately */


.fancyNav li:first-child{
border-radius: 4px 0 0 4px;
}


.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;


border-radius:4px 0 0 4px;
}


.fancyNav li:last-child{
border-radius: 0 4px 4px 0;
}


/* Treating the last LI and li:after elements separately */


.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;


border-radius:0 4px 4px 0;
}


.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
/* This property triggers the CSS3 transition */
opacity:1;
}


.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
/* Hides the targeted li when we are hovering on the UL */
opacity:0;
}


.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
opacity:1 !important;
}


/* Styling the anchor elements */


.fancyNav li a{
color: #5d5d5d;
display: inline-block;
font: 20px/1 Lobster,Arial,sans-serif;
padding: 12px 35px 14px;
position: relative;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
z-index:2;
text-decoration:none !important;
white-space:nowrap;
}


.fancyNav a.homeIcon{
background:url('http://demo.tutorialzine.com/2011/05/css3-animated-navigation-menu/assets/img/home.png') no-repeat center center;
display: block;
overflow: hidden;
padding-left: 12px;
padding-right: 12px;
text-indent: -9999px;
width: 16px;
}
Kode HTML
<nav>
            <ul class="fancyNav">
                <li id="home"><a href="#home" class="homeIcon">Home</a></li>
                <li id="news"><a href="#news">News</a></li>
                <li id="about"><a href="#about">About us</a></li>
                <li id="services"><a href="#services">Services</a></li>
                <li id="contact"><a href="#contact">Contact us</a></li>
            </ul>
        </nav>
 

126 comments:

13 Desember 2011 00.02

wahhh keren navigasinya!!!. tetapi tidak bisa diletakan sublink atau yang barisan link muncul kebawah ya?

13 Desember 2011 00.04

masuk spam ya komentarku?

13 Desember 2011 00.05

pertamaX

13 Desember 2011 00.07

@FarixsantipsEnggak mas,aku gk nyepam

13 Desember 2011 00.07

bags juga ya navigasi menunya. menggunakan kombinasi linear-gradient background :) tetapi sayang tak bisa di lengkapi dengan sublink atau barisan link yang keluar pas link di sentuh,

13 Desember 2011 00.07

@Mbah Qopet (10 Blog Deal)Ente keduax tuh mbah :)

13 Desember 2011 00.08

keren masbro , ane suka warna gradientnya , jadi ada inspirasi bikin menu :D pertamaX di curi T.T

13 Desember 2011 00.08

@Musa Khairul Umambukan gitu. tapi komentarku masuk spam gak? lihat deh di dashboard trus comment → spam. ada gak?

13 Desember 2011 00.09

ane coba otak-atik kodenya ya , buat menu blog ane biar cocok :D

13 Desember 2011 00.09

@FarixsantipsMaksudnya horizontal mas? hmmmm,gimana ya,ya bner juga sih buat sub link nih menunya emang belum dilengkapi

13 Desember 2011 00.12

@Mbah QopetOk kalo gitu hehhe....,buat pertamaxnya ikhlasin aja tuh hehhee...

13 Desember 2011 00.14

@Farixsantipsweh,ada juga tuh komen kk yang di spam,hmmmmm.aku juga gk tau kok bisa gitu :(

13 Desember 2011 00.15

@FarixsantipsHehehe... iya mas... :)

13 Desember 2011 00.16

@Mbah QopetOk lah kalo begitu

selamat berkreasi :)

13 Desember 2011 00.17

hiks,, cara pasang nya bejimane mas musa..? =)) apa di templokin aja di widged..? o_O

13 Desember 2011 00.20

@Rama88Ya enggak lah mas,buat cara pemasangannya taruh aja seperti biasanya wkwkwkk :D

13 Desember 2011 00.30

@Farixsantips asemmm koneksi dewa :v

13 Desember 2011 00.32

Weidiiih,Update Css keren :D Menu page Silver :D
Makin keren aja nih blog :D Salaut deh wat musa :D

13 Desember 2011 00.35

Gan,kok di arsive homenya ngak bisa scroll ya? prasaan kemarin bisa kok ? Knapa ya?
apa browser ane ya :D

13 Desember 2011 01.43

menunya gede banget sob ukurannya, bisa dikecilin gax sob?
oya bisa di tambah drop down menu gx sob?

13 Desember 2011 01.54

masih kurang ngerti yang satu soalnya masih belajar ni mas bro

13 Desember 2011 03.38

tampak kayak nyata ya menunya :o

13 Desember 2011 04.52

Keren ya ternyata kalau bikin menu page pakai Css :D

13 Desember 2011 08.45

Hmm,,, Menunya emang kliata simpel siy.. gak banyak warna yg mencolok.. & yg penting gak banyak Kode2 yg pastinya gak bikin lemot Blog!!
ituu yg MANTAAFFFF!!!
^_^

13 Desember 2011 21.09

wakwakwakwak,, modifnya susah,, gak cocok terus dgn template gw,, :'( tadinya mau pasang yg ini,, gak jadi deh karena gak pas,, :'(

13 Desember 2011 21.18

Rama88: kalau di template blog saya gmn?

13 Desember 2011 22.12

keren bro menunya tapi animasinya mana ya

14 Desember 2011 02.32

Keren!!Izin nyoba gan :)

14 Desember 2011 03.14

mantap kayaknya menunya :D

14 Desember 2011 03.47

Munculin Demonya dong gan,,!

14 Desember 2011 04.18

@Seandainya Saya Anggota DPD RIEnggak mas,itu hanya efek responsive web yang kemarin saya terapkan mas hehhe... :)

14 Desember 2011 04.20

@ZONA DOWNLOAD GRATISKalo buat ukuran menunya mungkin width sama heightnya bisa disetting sendiri sob

kalo buat dropdown itu belum aku setting mas hehehe....

14 Desember 2011 04.20

@Admin-Wahid Sahiduya udah ente pelajarin dulu nih menunya :)

14 Desember 2011 04.21

@Bayu Aldi Yansyahyang dimaksud nyata yang mana mas ?

14 Desember 2011 04.21

@Aku mau gratisanYa mas bener,dan yang jelas gk akan membuat blog terasa berat :)

14 Desember 2011 04.22

@BagiBagiBlogBlog ente juga mantaff kok hehehe.... aplagi blogazinenya :)

14 Desember 2011 04.23

@Rama88Sulitkah,yaudah kalo gitu,yang penting udah ada usaha :)

14 Desember 2011 04.25

@Aku mau gratisanKalo masalah itu yang penting paduan warnanya mas,kalo menurut saya warna dasar blog yang cocok buat dengan menu adalah noise abu2

14 Desember 2011 04.27

@Zh!nThoBuat animasinya,itu ada diefek hover,tapi sayangnya animasinya masih kurang tampak dibrowser2 tertentu

14 Desember 2011 04.28

@Musa Khairul Umamtuh kan apa ane bilang goo***.com udah aneh sekarang dengan blogger

14 Desember 2011 04.28

@IT-Soft CenterSilahkan dicoba,dan semoga berhasil

14 Desember 2011 04.28

@Mharjipes blogDemonya sudah dipojok atas postingan ini mas hehhe...

14 Desember 2011 04.29

btw ente bisa saja nih nyari menu navigasinya keren hehehehe

14 Desember 2011 04.41

@FarixsantipsAne cuma nemu pas lagi jalan-jalan kok

hehehe... :)

14 Desember 2011 05.22

@Musa Khairul Umammantap berarti jalan jlananya, jalan jalan bawa oleh oleh :D huahauhauha

14 Desember 2011 07.36

Keren juga ni sob, lumayan buat koleksi,,tapi kyknya kagak cocok ne untyk dipasang di blog ane,,hehe :D

14 Desember 2011 21.47

mampir di mari cari makan :) :D

14 Desember 2011 23.00

keren sob, langsung dicoba, makasih yach salam kenal

14 Desember 2011 23.59

aih lucu banget bisa kayak gitu..... aku pake Jquery buat sliding image malah test di Yslow malah jd slow T_T cedih
Nice tips

15 Desember 2011 01.16

keren tipsnya sob...

15 Desember 2011 01.44

Nice n keren Sob,tiap posting emang bagus :D
Walau jarang update nih :D He..he.. :D

15 Desember 2011 02.18

Pena hadir dan absen malam gan...menu navigasinya jadi cool...

15 Desember 2011 02.50

mantap bro.., dgn sentuhan warna perak agak berkilau2.. *smile

15 Desember 2011 02.58

balik lagi ni sob, ramein acar disini

15 Desember 2011 03.46

Kunjungan silaturahmi malam saudaraku...css nya bagus saudaraku

15 Desember 2011 04.17

kunjungan lagi lah ke blognya musa :) btw ane punya konten baru sob :) semoga sobat sudi membacanya :) monggo :)

15 Desember 2011 04.40

@Musa Khairul Umam
Tapi Efek Hover nya apa bukan berganti background aja,. . .aku pake chrome kok masa gak keliatan

15 Desember 2011 05.32

mantap sobat..

15 Desember 2011 05.47

mantap... makasih gan atas tutorialnya :)
salam kenal ya...

15 Desember 2011 17.21

absen pagi hadir menyapa...nice tutorial..thx ea

15 Desember 2011 20.53

mantab sob, nanti saya coba ahh diblog baru saya. :D

15 Desember 2011 22.31

terimakasih kawan sudah berbagi tutorial yang keren banget nich...salam :-)

15 Desember 2011 23.52

Blognya Musa sekarang nuansanya beda :D
jadi Black Blog :D
Wkkkkk... =))

16 Desember 2011 00.13

Keren blognya!! Salam kenal...

16 Desember 2011 04.42

Mnatab sib tutorialnya.Izin menyimak dulu ya?baru bertanya hehehe

16 Desember 2011 06.39

gan ada demonya gak?

16 Desember 2011 18.57

mampir lagee ahh,, =))

16 Desember 2011 21.28

Musa : Kalau mau di edit panjang menunya ,yg mana nih yg di edit :D

17 Desember 2011 02.54

Wahh,, Rumahnya Berubah lagi nigh, gak kayk Postingan kemarin
tapi infonya Mantab dah,
Thankss

17 Desember 2011 15.57

keren mas lanjutkan kreasinya

17 Desember 2011 23.09

datang dan berkunjung lagilah sembari izin mengintip postingan terbarunya musa :D

17 Desember 2011 23.10

Balik lgi Gan untuk Berkomntar,

Succes for yu!

17 Desember 2011 23.59

mampir lagi mas musa :)

18 Desember 2011 03.53

Ikutan ahh Mampir :D
Sukses buat musa (^_*)

18 Desember 2011 05.06

wah, ganti baju truss nih, bajunya keren2...
bisa dicoba nih sob tutorialnya
nice share...

18 Desember 2011 19.30

@Zh!nThoTapi aku pake ff 8 bisa kelihatan tuh efeknya,mungkin browser kamu harus diupdate mas

18 Desember 2011 20.48

jos!

19 Desember 2011 00.11

Sipds :) tetap axis :D
Mana nih,yang baru :D HE..he..

19 Desember 2011 01.04

wahhhhh lagi sibuk di dunia offline ya sob :) kunjungan lagi deh untuk meramaikan blog sobat :)

19 Desember 2011 10.49

blognya makin keren nih sob,, sdh lama banget saya tdk berkunjung disni,, baru sempatnya sekarang,,

19 Desember 2011 20.00

wuihh keren mas :)

19 Desember 2011 21.27

Mampir lagi ahhhh, biar rame kayak pasar :D Wkkkk

19 Desember 2011 23.16

belum sempat di balas ya sob komentarnya :)

20 Desember 2011 03.07

keren gan lanjutkan karyanya

20 Desember 2011 03.21

nyata kayak menu punyanya Apple mas :)

20 Desember 2011 06.14

Authornya kemana nigh, gak update2

20 Desember 2011 16.28

wah keren abies sobat,, saya jadi kepengen pasang juga nih di blog saya sob...

20 Desember 2011 19.35

Kayaknya keren ni, tapi tolong di tambah demonya sob biar lengkap :)

20 Desember 2011 20.15

hadir lagi menyapa sahabat :-)

20 Desember 2011 20.31

HAdir lagi,sambil intip2 yang baru Sob :D HE..hee,,

20 Desember 2011 23.23

dateng lagi ni sob, semoga kau happy

21 Desember 2011 00.14

absen aja disini

21 Desember 2011 02.30

keren gan... :D

21 Desember 2011 17.11

datang lagi di blog sobat sambil belajar css3 sobat...

21 Desember 2011 17.20

nyoba diterapin di blog ane gak pas ya....
belajar lagi ah disini ama musa.....

21 Desember 2011 17.24

tutorial yang bermanfaat sob, lanjutkan :)

21 Desember 2011 17.25

Kunjungan kemari lagi sobat musa....

21 Desember 2011 17.31

izin bookmark dulu, ntar saya coba,,,

21 Desember 2011 18.47

belum ada postingan baru sob samapai sekarang :) kemana aja sobat :)

21 Desember 2011 19.16

Silaturahmi kembali sahabat

21 Desember 2011 19.26

wah tutorial keren nie

22 Desember 2011 02.03

Kayaknya blog ini Lama gak update yagh,,
Trus berkarya Kawan!

22 Desember 2011 02.14

ihhh mantep banget templaet nya bang haahha

22 Desember 2011 02.29

Ha,,ha,,intip2 siapa tahu ada yg baru :D

22 Desember 2011 04.16

nunggu updatean terbaru dari mas musa neh :)

22 Desember 2011 19.53

waw mantaps nih tambah2 ilmu css

22 Desember 2011 20.38

Mampir nunggu makanannya :D

22 Desember 2011 21.15

bisa gak ya buat ganti menu navigasi di blog saya. harus dicoba neh

23 Desember 2011 17.29

mantaps gan..
:D
mampir ke blog ane jga ya

24 Desember 2011 04.04

buset dah 10 harian gak update :D kemana aja ente :D

26 Desember 2011 03.45

ahhh yang kak Musa juga sama ngga ada gambar propil komentarnya :p
gimana nih, bantuin saya buat munculinnya avatrnya dong :D

26 Desember 2011 16.53

belum ada updatennya ya mas, jalan jalan pagi aja kalau gitu

27 Desember 2011 01.09

wah :D
pngen praktiek..
tpi tunggu waktu yg tepat :D

bookmark dlu :D

27 Desember 2011 17.53

mampir kemari mas musa . :)

27 Desember 2011 18.30

@Musa Khairul Umamkalau buat merubah warna font nya gimana mas?

27 Desember 2011 18.30

@Musa Khairul Umamkalau buat merubah warna font nya gimana mas?

29 Desember 2011 02.31

mantap tutornya gan, nice blog and keren habis dah

29 Desember 2011 04.13

asik bener dah tampilan blog ini :D

29 Desember 2011 17.34

wiih, desainer blog indonesia udah mulai bermunculan... konsep template blognya keren Sob. salam kenal :)

30 Desember 2011 01.20

simple yah..
btw nice info :)

3 Januari 2012 19.33

keren dan simple manu, nanti saya coba dulu menu, makasih infonya

4 Januari 2012 04.16

saya mw blajar tpi mulai drmn ya?

4 Januari 2012 06.21

Ini dia.. nice info gan... ane mo pasang menu di blog haha.. bermanfaat banget nich.. :D

5 Januari 2012 07.36

gimana cara masukin ke HTML nya mas dimna tempat masukinnya baru belajar Nge Blog nih mas mohon bantuannya

12 Januari 2012 00.04

amankan dulu sob. sangat membantu untuk tugas saya. makasih postnya sob keren :)
and sukses selalu

Posting Komentar