|
|
| Line 15: |
Line 15: |
| | | | |
| | </head> | | </head> |
| - |
| + | <script type="text/javascript" src="https://sites.google.com/site/mariozoner/gb-mario/jquery-1.3.2.js"></script> |
| | + | |
| | + | <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> |
| | + | |
| | + | <style> |
| | + | *Navigasi*/ |
| | + | ul#navigation { position:fixed; margin:0px; padding:0px; top:-20px; left:370px; list-style:none; z-index:999999; width:675px; font:normal 16px Electrolize,Sans-Serif bold; -webkit-animation:2s fxhompinav ease-in-out; -moz-animation:2s fxhompinav ease-in-out; -ms-animation:2s fxhompinav ease-in-out; animation:2s fxhompinav ease-in-out; } ul#navigation li { width:95px; display:inline; float:left; margin:0 0 0 2px; } ul#navigation li a { display:block; float:left; margin-top:-74px; width:95px; height:28px; background-color: rgba(0, 0, 0, 0.6); |
| | + | background: rgba(0, 0, 0, 0.6); |
| | + | color: rgba(0, 0, 0, 0.6); background-repeat:no-repeat; background-position:50% 150px; border:2px solid #b9b9b9; -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); box-shadow:0 1px 2px rgba(0, 0, 0, 0.5); -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; border-radius:0px 0px 10px 10px; color:#333333; text-decoration:none; text-align:center;color:#f1f1f1; text-shadow:0 1px 1px #000; padding-top:95px; -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out; } ul#navigation li a:hover { margin-top:-3px; background-position:50% 25px; color:#7b7b7b; position:relative; } ul#navigation li a:hover:after { content:""; width:0px; height:0px; position:absolute; top:100%; left:45%; margin-top:2px; border-width:5px; border-style:solid; border-color:transparent transparent lime transparent; } |
| | + | ul#navigation li:nth-child(1) a {background-image:url(Url Gambar Menu ke 1); } |
| | + | ul#navigation li:nth-child(2) a { background-image:url(Url Gambar Menu ke 2); } |
| | + | ul#navigation li:nth-child(3) a { background-image:url(Url Gambar Menu ke 3); } |
| | + | ul#navigation li:nth-child(4) a { background-image:url(Url Gambar Menu ke 4); } |
| | + | ul#navigation li:nth-child(5) a { background-image:url(Url Gambar Menu ke 5); } |
| | + | ul#navigation li:nth-child(6) a { background-image:url(Url Gambar Menu ke 6); } |
| | + | |
| | + | @-webkit-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @-moz-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @-ms-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} } @keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;} |
| | + | /*Navigasi*/ |
| | + | |
| | + | </style> |
| | + | |
| | + | |
| | + | |
| | <script language='javascript' src='https://sites.google.com/site/tutorialseoblogger/file/jquery_mini.js'></script> | | <script language='javascript' src='https://sites.google.com/site/tutorialseoblogger/file/jquery_mini.js'></script> |
| | <script language='javascript' src='https://sites.google.com/site/tutorialseoblogger/file/jquery.dimensions.js'></script> | | <script language='javascript' src='https://sites.google.com/site/tutorialseoblogger/file/jquery.dimensions.js'></script> |
| | | | |
| | <body> | | <body> |
| | + | |
| | + | <ul id="navigation" style="margin-left:270px"> |
| | + | <li class="nav1"><a href="http://nthoeng.blogspot.com/">Home</a></li> |
| | + | <li class="nav2"><a href="http://nthoeng.blogspot.com/feeds/posts/default">Rss Feed</a></li> |
| | + | <li class="nav3"><a href="http://nthoeng.blogspot.com/p/blog-teman.html">Blog Teman</a></li> |
| | + | <li class="nav4"><a href="http://nthoeng.blogspot.com/p/site-map_21.html">Site Map</a></li> |
| | + | <li class="nav5"><a href="javascript:showHideGB()">Guestbook</a></li> |
| | + | <li class="nav5"><a href="http://nthoeng.blogspot.com/p/fan-page.html">Fan Page</a></li> |
| | + | <li class="nav1"><a href="http://nthoeng.blogspot.com/">Home</a></li> |
| | + | <li class="nav1"><a href="http://nthoeng.blogspot.com/">Home</a></li> |
| | + | |
| | + | </ul> |
| | + | |
| | + | |
| | <div id="bg_top"> | | <div id="bg_top"> |
| | <div id='floatMenu'> | | <div id='floatMenu'> |
"
