Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- menu css3
- /* style for menu css 3 without javascript */
- #day-menu, #day-menu ul {margin: 0;padding: 0;list-style: none}
- #day-menu {width:100%;margin: 0 auto;border:0;background-color: #111;background-image: -moz-linear-gradient(#444, #111);background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));background-image: -webkit-linear-gradient(#444, #111);background-image: -o-linear-gradient(#444, #111);background-image: -ms-linear-gradient(#444, #111);background-image: linear-gradient(#444, #111);-webkit-border-radius: 6px;border-radius: 0;-moz-box-shadow: 0 1px 1px #777;-webkit-box-shadow: 0 1px 1px #777;box-shadow: 0 1px 1px #777}
- #day-menu:before,
- #day-menu:after {content: "";display: table}
- #day-menu:after {clear: both}
- #day-menu {zoom:1}
- #day-menu li {float: left;border-right: 1px solid #222;-moz-box-shadow: 1px 0 0 #444;-webkit-box-shadow: 1px 0 0 #444;box-shadow: 1px 0 0 #444;position: relative}
- #day-menu a {float: left;padding: 7px;color: #fff;text-transform: none;font: normal 600 13px Signika,sans-serif;text-decoration: none;}
- #day-menu li:hover > a {color: #fafafa}
- *html #day-menu li a:hover { color: #fafafa}
- #day-menu ul {margin: 10px 0 0 0;_margin: 0;opacity: 0;visibility: hidden;position: absolute;top: 38px;left: 0;z-index: 9999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 -1px rgba(255,255,255,.3);-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);box-shadow: 0 -1px 0 rgba(255,255,255,.3);-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out}
- #day-menu li:hover > ul {opacity: 1;visibility: visible;margin: 0}
- #day-menu ul ul {top: 0;left: 150px;margin: 0 0 0 20px;_margin: 0;-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);box-shadow: -1px 0 0 rgba(255,255,255,.3)}
- #day-menu ul li {float: none;display: block;border: 0;_line-height: 0;-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;box-shadow: 0 1px 0 #111, 0 2px 0 #666}
- #day-menu ul li:last-child {-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none}
- #day-menu ul a {padding: 5px;width: 130px;_height: 10px;display: block;white-space: nowrap;float: none;text-transform: none}
- #day-menu ul a:hover {background-color: #0186ba;background-image: -moz-linear-gradient(#04acec, #0186ba);background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));background-image: -webkit-linear-gradient(#04acec, #0186ba);background-image: -o-linear-gradient(#04acec, #0186ba);background-image: -ms-linear-gradient(#04acec, #0186ba);background-image: linear-gradient(#04acec, #0186ba)}
- #day-menu ul li:first-child > a {-moz-border-radius: 3px 3px 0 0;-webkit-border-radius: 3px 3px 0 0;border-radius: 3px 3px 0 0}
- #day-menu ul li:first-child > a:after {content: '';position: absolute;left: 40px;top: -6px;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #444}
- #day-menu ul ul li:first-child a:after {left: -6px;top: 50%;margin-top: -6px;border-left: 0;border-bottom: 6px solid transparent;border-top: 6px solid transparent;border-right: 6px solid #3b3b3b}
- #day-menu ul li:first-child a:hover:after {border-bottom-color: #04acec}
- #day-menu ul ul li:first-child a:hover:after {border-right-color: #0299d3;border-bottom-color: transparent}
- #day-menu ul li:last-child > a {-moz-border-radius: 0 0 3px 3px;-webkit-border-radius: 0 0 3px 3px;border-radius: 0 0 3px 3px}
- ---
- Letakkan code ini di bawah <!-- end header-wrapper --> lalu sesuaikan dengan menu blog
- ---
- <div id='menu'>
- <ul id='day-menu'>
- <li><a href='/' rel='nofollow'>Home</a></li>
- <li><a href='#' rel='nofollow'>Postingan</a>
- <ul>
- <li><a href='/search/label/catatan'>Catatan</a></li>
- <li><a href='/search/label/inspiration'>Inspiration</a></li>
- <li><a href='/search/label/web%20design'>Web Design</a></li>
- <li><a href='/search/label/news'>News</a></li>
- <li><a href='/search/label/hack'>Hack</a></li>
- <li><a href='/search/label/wordpress'>Wordpress</a></li>
- <li><a href='/search/label/download'>Download</a></li>
- <li><a href='/search/label/facebook'>Facebook</a></li>
- <li><a href='/search/label/firefox'>Firefox</a></li>
- <li><a href='/search/label/gmail'>Gmail</a></li>
- <li><a href='/search/label/google'>Google</a></li>
- <li><a href='/search/label/windows'>Windows</a></li>
- <li><a href='/search/label/youtube'>YouTube</a></li>
- <li><a href='/search/label/mobile'>Mobile</a></li>
- <li><a href='/search/label/video'>Video</a></li>
- </ul>
- </li>
- <li><a href='#' rel='nofollow'>Page</a>
- <ul>
- <li><a href='/p/something.html' rel='nofollow'>Something</a></li>
- <li><a href='/p/about-me.html' rel='nofollow'>About Me</a></li>
- </ul>
- </li>
- <li><a href='/?m=1' rel='nofollow' target='_blank'>Versi Ponsel</a></li>
- </ul>
- </div>
- ---
- Welcome and enjoy!
- Day Milovich,,
- http://daymilovich.blogspot.com
Advertisement
Add Comment
Please, Sign In to add comment
