Nav Menu Fixed Transition

Share on :

Iseng-iseng tadi sore bikin experiment menu fixed hehehee... sekali-kali bikin artikel tentang tutorial, ya meski tutorialnya terlalu gampang itu juga karena ilmu saya masih cetek :p. Oke langsung aja cekidot :D

nav{ font-family:arial; font-size:15px; color:#000; background:#8400FF; padding-top:24px; padding-left:20px; border-bottom:5px solid #000; width:100%; height:10%; position:fixed; top:0; left:0; z-index:999; } nav a{ color:#000; text-decoration:none; -webkit-transition:all 900ms linear; -moz-transition:all 900ms linear; -o-transition:all 900ms linear; -ms-transition:all 900ms linear; transition:all 900ms linear; } nav ul{ display:block; } nav li{ list-style:none; padding:0; display:inline; margin-right:20px; } nav a:hover{ color:#8400FF; background:#000; padding:24px; -webkit-transition:all 900ms linear; -moz-transition:all 900ms linear; -o-transition:all 900ms linear; -ms-transition:all 900ms linear; transition:all 900ms linear; }

Dan cara pemanggilannya sebagai berikut :D :

<nav>
<ul>
<li><a href='#'>Menu1</a></li>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
<li><a href='#'>Menu4</a></li>
</ul>
</nav>

Demo