Posted By

jamepaul on 08/11/10


Tagged

menu CSS3 html5


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

SideSix
craftymethod


Rounded Menu Bar with html5 and css3


 / Published in: CSS
 

I tried a menu bar with html5 and css3. Please give me some advice for more advance.

  1. a {
  2. text-decoration: none;
  3. }
  4. nav {
  5. background-color: #A3A5A8;
  6. border: 1px solid #FFF;
  7. border-radius: 6px;
  8. display: block;
  9. -moz-border-radius: 6px;
  10. -webkit-border-radius: 6px;
  11. -moz-box-shadow: 0 0 14px #123;
  12. -webkit-box-shadow: 0 0 14px #123;
  13. box-shadow: 0 0 14px #123;
  14. font-size: 15px;
  15. margin-bottom: 10px;
  16. padding: 8px 2px;
  17. width: 450px;
  18. }
  19. nav a {
  20. padding: 5px 10px;
  21. color: #141414;
  22. }
  23. nav .active,
  24. nav a:hover {
  25. background-color: #000;
  26. border-radius: 6px;
  27. color: #FFF;
  28. -moz-border-radius: 6px;
  29. -webkit-border-radius: 6px;
  30. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: Sverri on August 11, 2010

You should target a:link, a:visited, a:hover and a:active (to better remember: LoVe/HAte). While it does work targetting a on its own it is good practice to target all its states.

"background:#000" is the same as "background-color:#000". There are many short-hands in CSS and you can use them.

Other than that it seems quite okay :)

You need to login to post a comment.