Advanced Search

horizontal tabs in html with css

/ Published in: CSS
Save to your folder(s)
designing a simple horizontal tab menu by using ul and il elements with css.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*=====================  CSS Code ================== */
  2. ul.tabs
  3. {
  4.     padding: 7px 0;
  5.     font-size: 0;
  6.     margin:0;
  7.     list-style-type: none;
  8.     text-align: left;
  9. }
  10.  
  11. ul.tabs li
  12. {
  13.     display: inline;
  14.     margin: 0;
  15.     margin-right:3px;
  16. }
  17.  
  18. ul.tabs li a
  19. {
  20.     font: normal 12px Verdana;
  21.     text-decoration: none;
  22.     position: relative;
  23.     z-index: 1;
  24.     padding: 7px 16px;
  25.     border: 1px solid #CCC;
  26.     border-bottom-color:#B7B7B7;
  27.     color: #000;
  28.     background: #F0F0F0;
  29.     border-radius: 6px 6px 0px 0px;
  30.  -moz-border-radius: 6px 6px 0px 0px;
  31.     outline:none;
  32. }
  33.  
  34. ul.tabs li a:hover
  35. {
  36.     border: 1px solid #B7B7B7;
  37.     background:#E0E0E0;
  38. }
  39.  
  40. ul.tabs li.selected a
  41. {
  42.     position: relative;
  43.     top: 0px;
  44.     font-weight:bold;
  45.     background: white;
  46.     border: 1px solid #B7B7B7;
  47.     border-bottom-color: white;
  48. }
  49.  
  50. /*============================= HTML Code ================== */
  51. <ul id="tab_ul" class="tabs">
  52.         <li class="selected"><a rel="tab_div1" href="#">Tab 1</a></li>
  53.         <li class=""><a rel="tab_div2" href="#">Tab 2</a></li>
  54.         <li class=""><a rel="tab_div3" href="#">Tab 3</a></li>
  55.         <li class=""><a rel="tab_div4" href="#">Tab 4</a></li>
  56. </ul>

URL: http://function-code.blogspot.com/2013/03/horizontal-tabs-in-html-with-css.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.