Posted By

codingforever99 on 11/23/14


Tagged

css menu bar navigation


Versions (?)

css navigation menu bar


 / Published in: CSS
 

URL: http://function-code.blogspot.com/2014/11/css-navigation-bar.html

useful and simple css navigation menu bar.

  1. <style>
  2. .horizontal-nav {
  3. width:100%;
  4. height:30px;
  5. padding: 0px;
  6. margin-bottom: 10px;
  7. }
  8.  
  9. .horizontal-nav ul {
  10. margin: 0px;
  11. padding: 0px;
  12. float: left;
  13. text-align: center;
  14. border-radius: 6px;
  15. border: 1px solid #727272;
  16. background-image: -moz-linear-gradient(center bottom , #404040 0%, #5F5F5F 100%);
  17. }
  18.  
  19. .horizontal-nav ul li {
  20. display: table-cell;
  21. float: left;
  22. margin: 0px;
  23. padding: 0px;
  24. border-left: 1px solid #727272;
  25. }
  26.  
  27. .horizontal-nav ul li:first-child {
  28. border-left: 0 none;
  29. }
  30.  
  31. .horizontal-nav ul li a {
  32. display: block;
  33. padding: 5px 30px;
  34. color: #fff;
  35. font: bold 12px Arial,Tahoma,Helvetica,sans-serif;
  36. text-decoration: none;
  37. border-top: 1px solid rgba(255,255,255, 0.25);
  38. border-left: 1px solid rgba(255,255,255, 0.25);
  39. }
  40.  
  41. .horizontal-nav ul li:first-child a {
  42. border-left: 0 none;
  43. }
  44.  
  45. .horizontal-nav ul li a:hover {
  46. background: #282828;
  47. }
  48.  
  49. .horizontal-nav-a-selected {
  50. background: #282828;
  51. }
  52.  
  53. .horizontal-nav ul li:first-child a {
  54. border-top-left-radius: 6px;
  55. border-bottom-left-radius: 6px;
  56. }
  57.  
  58. .horizontal-nav ul li:last-child a {
  59. border-top-right-radius: 6px;
  60. border-bottom-right-radius: 6px;
  61. }
  62.  
  63. </style>
  64.  
  65.  
  66. <div class="horizontal-nav">
  67. <ul>
  68. <li><a href="#">Menu 1</a></li>
  69. <li><a class="horizontal-nav-a-selected" href="#">Menu 2</a></li>
  70. <li><a href="#">Menu 3</a></li>
  71. <li><a href="#">Menu 4</a></li>
  72. <li><a href="#">Menu 5</a></li>
  73. </ul>
  74. </div>

Report this snippet  

You need to login to post a comment.