Selamat Malam sob, malem ini fahmi mau memberikan tutorial Nav Menu yang sangat sederhana ini hasil experiment, heheheee... sengaja ga di kasih Screen shoot sob, tapi ada kok demo nya :D Tapi demo nya nanti belakangan :p . Ok langsung saja.

CSS :

body{margin:40px;}

nav{ font-family:arial; font-size:15px; color:#000; }

nav a{ width:80px; position: relative; padding: .4em .4em .4em 2em; *padding: .4em; margin: .5em 0; background: #ddd; color: #444; text-decoration: none; -moz-border-radius: .3em; -webkit-border-radius: .3em; border-radius: .3em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

nav a:hover{ background: #eee; }

nav ul{ display:block; }

nav li{ list-style:none; padding:0; display:inline; margin-right:20px; }

ol{ counter-reset: li; list-style: none; *list-style: decimal; font: 15px 'trebuchet MS', 'lucida sans'; padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255,255,255,.5); }

ol ol{ margin: 0 0 0 2em; }

nav a:hover:before{ -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); box-shadow:0 0 10px #000; }

nav a:before{ color:#fff; content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 50%; margin-top: -1.3em; background: #FA0132; height: 2em; width: 2em; line-height: 2em; border: .3em solid #fff; text-align: center; font-weight: bold; -moz-border-radius: 2em; -webkit-border-radius: 2em; border-radius: 2em; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

.yellow a:before{ background:#FAD801; }

.green a:before{ background:#4BFA01; }

.blue a:before{ background:#01A2FA; }

.purple a:before{ background:#FA01DD; }

.yell-green a:before{ background:#A2FA01; }​

HTML :

<nav>
<ul>
<ol>
<li><a href='#'>Homepage</a></li>
<li class='yellow'><a href='#'>About</a></li>
<li class='green'><a href='#'>Blog</a></li>
<li class='blue'><a href='#'>Contact</a></li>
<li class='purple'><a href='#'>Article</a></li>
<li class='yell-green'><a href='#'>Follow me</a></li>
</ul>
</ol>
</nav>

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