hallo sahabat Unbee,Nah Css menu navigasi kali ini bertema go green cocok sekali untuk site yang bertema hutan atau tumbuh-tumbuhan silahkan kalian edit lagi.
Contoh :
Kode Css Silahkan kalian copy paste dan masukan kedalam notepad dengan format .html
<style> #cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a { margin: 0; padding: 0; } #cssmenu { background: #F6F8EE; border-bottom: 1px solid #95AA61; box-shadow: inset 0 2px 4px rgba(149, 170, 97, 0.5); -moz-box-shadow: inset 0 2px 4px rgba(149, 170, 97, 0.5); -webkit-box-shadow: inset 0 2px 4px rgba(149, 170, 97, 0.5); } #cssmenu:after { content:''; display: block; clear: both; } #cssmenu a { display: inline-block; font-family: Calibri, Arial, sans-serif; color: #333; text-decoration: none; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } #cssmenu a:hover { background: #95AA61; } #cssmenu ul { list-style: none; height: 34px; padding: 10px 0; } #cssmenu > ul > li { float: left; height: 34px; margin: 0 5px; position: relative; } #cssmenu > ul > li > a { background: #899752; box-shadow: inset 1px 1px 3px rgba(18,19,16,0.2); -moz-box-shadow: inset 1px 1px 3px rgba(18,19,16,0.2); -webkit-box-shadow: inset 1px 1px 3px rgba(18,19,16,0.2); border-radius: 17px; -moz-border-radius: 17px; -webkit-border-radius: 17px; line-height: 24px; padding: 5px 10px; } #cssmenu > ul > li.active a { background: #121310; color: #F6F8EE; } #cssmenu .has-sub ul { background: #F6F8EE; border: 1px solid #95AA61; border-top: 0 none; height: 0; overflow: hidden; padding: 0; position: absolute; opacity: 0; top: 44px; left: 0; width: 200%; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; -ms-transition: opacity 0.2s; transition: opacity 0.2s; } #cssmenu .has-sub:after { content: ''; display: block; padding: 0 10px; position: absolute; bottom: -10px; left: 0; height: 10px; width: 200%; } #cssmenu .has-sub:hover ul { border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; webkit-border-radius: 0 0 5px 5px; height: auto; opacity: 1; padding: 10px; } #cssmenu .has-sub li, #cssmenu .has-sub li a { padding: 0 5px; width: 100%; } #cssmenu .has-sub li { margin: 8px 0; } #cssmenu .has-sub li a { border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; } </style> <div id='cssmenu'> <ul> <li class='active '><a href='index.html'><span>Home</span></a></li> <li class='has-sub '><a href='#'><span>Products</span></a> <ul> <li><a href='#'><span>Product 1</span></a></li> <li><a href='#'><span>Product 2</span></a></li> </ul> </li> <li><a href='#'><span>About</span></a></li> <li><a href='#'><span>Contact</span></a></li> </ul> </div>
Oke semoga bermanfaat jangan lupa tinggal kan komentar yang relevan dan jika anda rasa artikel yang terdapat dalam blog ini berguna mohon dishare terimakasih.