Thursday, March 3, 2011

30 Macam Tab Menu Navigasi Simple

 Menu Navigation #1


Black-Orange
Kode CSS

<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style>

Kode HTML

<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul>
</div>



Menu Navigation #2

Purple-White-Navigation

Kode Css

<style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; } </style> 






Kode HTML

<div id="navcontainer"> <ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Menu Navigation #3
Boxed 1

Kode Css

<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; } </style>

Kode HTML

<div id="navcontainer"> <ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Menu Navigation #4


LIGHT-GREY



Kode Css

<style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style>

Kode HTML

<div id="navcontainer"> <ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>




Menu Navigation #5

Bulleted-top-NavigationKode Css

<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjausYXZdprrWkXvdfD_hdAXYVfZ4HoKDm6-qvoO9vdkRghqCmKliObnTCwQNWmuF17JmFswzhZN6qHmie0arHJEwNXpYy5gwpzw_Uv3NjNYZe0EeMFl52t3xARPOY6b_eRNntYVLhFTG0/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style>

Kode HTML

<div class="container"> <ul id="nav">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Menu Navigation #6

Tab Menu I
Kode Css

<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1TehUIjFLub1TikzD_8nEC_OD7L6lcIiH-irI1sMyFxyIvKPVsZFvFl1_8pzO-H0r0uuth92N4XrVZYOxj2vNt8NJeu8K-zhAFenQ_AUiWN66lj81IjMC9v_GjRFP_E4G8gHwH0_60Ig/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY0Q_NUeVkAwGkNbP8KYiS_14Xq8wyzfx10JgT_CLyiigDD_1oNKoqjGi-RYlvmRs49frW5zrZpOhWbatoT3BaBvaHXEp83-NkT8RDogo2SgbvZOvp3BMnY70pGSJ4LbiUzqEFUQOUNCU/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabsI"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Menu Navigation #7
 Tab Menu G
Kode Css

<style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsG li { display:inline; margin:0; padding:0; } #tabsG a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxDDnEppOsSZMqDeAM71zJvtHj8kdkPSvh8MJ62UG2BxS1vVtD6r_1wq4GrttdkgofnGJqlMfytYfmqW1w12o-zzNgcHQLfmESoxqojXRaJfwLT81BnK9d3BxUYcSHAKbAMrAQoycATwI/s1600/tableftG.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsG a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb0E7VB0OLB9yV8BUyq6SsuoIEcS2PYphwLgXUKMI9IfzgSHikWdkxOJ6LIZLF_lFO9wOBm02Ook3Ikgy_c58PidmNse3uwXybj3gJNOed6-F-WBikmBDoWju1JYE684oYs_0HcHuBXzA/s1600/tabrightG.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsG a span {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; } #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span { background-position:100% -42px; } </style> 

Kode HTML

<div id="tabsG"> <ul> 
<li><a href="#"><span>Link 1</span></a></li> 
<li><a href="#"><span>Link 2</span></a></li> 
<li><a href="#"><span>Link 3</span></a></li> 
<li><a href="#"><span>Link 4</span></a></li> 
<li><a href="#"><span>Link 5</span></a></li> 
<li><a href="#"><span>Link 6</span></a></li> 
<li><a href="#"><span>Link 7</span></a></li> 
</ul> </div>





Menu Navigation #8
Tab Menu F

Kode Css

<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW8iWzFFco0T3tTdpaQDxONGTLOZD0M-h3V9-2EKU2nwjCVWwdwFTfHZJ0JtdD3sIo3zHOq3wcHqewXqQrMJrZLSMoaOZ64GbXU9hqHF_NVNpPDX3UJVZrklts3AocZWXodU09kQLaZgo/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm0cd5Ge25XK3O52WIPEZ8GhSwL7CrxezEj7ZF98hA4N5MLKM69AifGaZ74xa1KMmq4RJiZg4LuVp3mIuP6NM9bgf5Y_IiytDWU0u76_7mhorY0C9aMU6AP54SD4ZtZrZhObTqjWQ9efc/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabsF"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Tab Menu #9

ZDnet Emulation Kode Css

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style>

Kode HTML

<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Tab Menu #10

Tab Menu E
Kode Css

<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuZ2aBbxNyCYXnHKzbMYNO__H9YV30V9YRgRoiwNXAEh-KI6NyMXvyQhCtEcMzxFuaDT2nl4IEKWwxq_4J6rrAqJNMOZszCU72KYcJXLCNyYNesTQyVb0rJwnd6J_RfTOU-9HePmVVdRI/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYOL6RwVJAgzUZX5-saqXOqwz83BhXMj2d-OJK0Bcn5dUE4TEOjJXHUVdl6xWyMjQxzz-rJY3V9uM0o-lCKCbxziOAgBBGZV9DouaOJEVYwYezia-8N5UqTyWMqjE5ghEK_MltGUg75-A/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; }
</style>

Kode HTML

<div id="tabsE">
<ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>




Tab Menu #11

Tab Menu DKode Css

<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdPe0ES59xK9bKA-ibiOX5snUCxh4Fc4Q30Iht0BvTYOfuuS42YGGOlqQ8SqegwpUcDTE8Y095sSJ5cXwv8wA6Dxlzl269hk00Mmt92t9tBs5azv-LvSmsfEAf0h_Nt5GO_XUyhl4mKDs/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjU4ab5pp5fUSguYlrzHSagQGGN7u9vlpgl3ICHlvqFYFuzRzEiM5MCqxL558iEpf2MpMuTX5UIWP96W39hbd8YadqmYgzh4yuRJFilkwTXndBfoRpAkyMM6G_MUvMZrYC5c5jqcRMS4E/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabsD"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Tab Menu #12
Tab Menu 12
Kode Css

<style> #tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBT5MJYOp3JKWqlkK5CkthfcxY0qD1jcO4x86rc7Zeo7_7FtuQ6Iis4PHg79mQHWInd0SlZHO9D-4OXy7sRgxA5D0wf5G0p2e4Hl-eqYbaBQDtjT-SNTmM0PKt2HlfXjs0t9wTitXRRKs/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPHViJ0KM8TcrBS4W0YYRob-Rf-MMpSEFZpB5fI0YN3Xo2BaRwFXyTJiHGFPpsPpR9ZVhs6sGa1FQcWQ_1WxxU-eVqqA5PCJ9BbpTCw8BBXtpTYZSVMzYu9NrJSIVCbbSG__Uhgbk5eyI/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabs12"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>




Tab Menu #13

Tab Menu 11 Kode Css

<style> #tabs11 img { border: none; } #tabs11 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs11 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs11 li { display:inline; margin:0; padding:0; } #tabs11 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinJcwUwmP24XwMYbppVqHBymLx66IMzi5lGQGv9d2xDYn_FyIG6qBxPvrvY5N3xL-4QUBGqmcg1Un4BYSL-J2fwNR4el8fV-CO2fBYSyFP7ihPgorpalDrQRLpPK9RcuBXvxX_zrmVj0A/s1600/tableft11.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs11 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgULeIfWMgCqovKYAa75aVV3r-7YpkSvDwKJgkvZszHLWb3TPFPMnUA-CQsceTF0AYBD3taYi-02K9MkBLxhEBi9IlCcFdexHwnfvO6qy7ciCqrxDvf2VxibTSPqw_6mFfriigUVykbQgw/s1600/tabright11.png) no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs11 a span {float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; } #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span { background-position:100% -42px; } #tabs11 #current a { background-position:0% -42px; } #tabs11 #current a span { background-position:100% -42px; } </style> 

Kode HTML

<div id="tabs11"> <ul> 
<li><a href="#"><span>Link 1</span></a></li> 
<li><a href="#"><span>Link 2</span></a></li> 
<li><a href="#"><span>Link 3</span></a></li> 
<li><a href="#"><span>Link 4</span></a></li> 
<li><a href="#"><span>Link 5</span></a></li> 
<li><a href="#"><span>Link 6</span></a></li> 
<li><a href="#"><span>Link 7</span></a></li> 
</ul> </div> 



Tab Menu #14

Tab Menu 10
Kode Css

<style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimsiHVzuuWZqXSDL5PHF8r3i258gHBeCNSAiJL3HSpGbsJ2g7VPgFGqkn1p9DUNGYhEsZfqFTRghsNRKRceTat8V1ghYIb_Y2sSVlCo_s8gzQ7u7D3ljL5rqg6UYg4y70if5SsJaWHW1w/s1600/tableft10.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJbo1TF50J2c31vcKekMIEj2duLhykN-cAcd7i0BKVMQ7N1AcbjCe82Bd5Vk09czKMIVZWooMOxyEsFj6HRrnSOdp_tLKqL8-Tp8FlCa9iVQX1g-0g6luC41WZ6I8yyJelxd96-POtSU/s1600/tabright10.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabs10"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li> </ul> </div>




Tab Menu #15
Tab Menu 9 Kode Css

<style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEjLa7KJo_yj8NSsN_i-iIARL7IpXO9f-aiPLEXtig5MdLyAywtT4Hvqs0PirroNYVJlnbYEssJX2pJZKcYzAAVCjrjAcJLxUPM9qDUgV59MTFivnFnKTAPydDFG_BsJGiH4AYqu3I-70/s1600/tableft9.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBb83zh1F9nPmdCClxt12bfCbEQdWQlPyHEWufeqQE_vrcNIUcbvhSfr9OuYkf7rXbMf-ZgtuAcicvU7tk-JuKDKHF3wAXCofd6QEUV1qXvZFUcKUM0ZYrNP0YsNJkpQ45cBq7o_3KP6A/s1600/tabright9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabs9"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>




Tab Menu 16

Tab Menu 6
Kode Css

 <style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJuzbKe1eQWgnVCOpgvLMwffuM579J9itLC7DT6LfCYDoO-wFaEJEMSzBOURnOU7zKfgNCy08zvoqGAZFwYTQfyRbKu_XioMiHIa9drIf3c0jvB9YaRk70gehqr34PDlQL4jYfl93WX2Y/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-lph-pqv85ev5EmDKJowCmJJkd759A03uPDWinIIW7G-0Xxng9aNLPT93koJuPeJu0XYyQVbaRm4tFDfV8cvbL2IscGK69Ie5-dfMUNew5_wv3rfY9YQswRfxW3fFbtHuL9fVV3Y2fI/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabs6"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Tab Menu #17
Tab Menu 8
Kode Css

<style> #tabs8 img { border: none; } #tabs8 { float:left; width:100%; background:#FCF1F6; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #E276A7; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBWWikfG0yXAPyXNyxRamoaaZSVyEJwHWcAatMu6wuVwQcE1I4fuYziQyHX62bS8RYMqBUl0OtlWhdSIvHOU_2Lr1PeJhbHJFvWaR4cTpDZRYdslfrB-XNCadQRkwTeA2FzbZ5zotWcYY/s1600/tableft8.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLgqhppwRFfrlEBgzy8RqUYDlumDLoOdmbylhFAntyBck3ABgxr3yzI6cS1vL5WZgQa1rh9y0_JXvUSAzRDJQd-D4K5FAD66yiE6IBNvUXs5QjuXofOH2KnLfCnelG83vGNQotw_vn9hQ/s1600/tabright8.png) no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabs8"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Tab Menu #18
Tab Menu 7Kode Css

<style> #tabs7 img { border: none; } #tabs7 { float:left; width:100%; background:#D4DAE7; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #333B66; } #tabs7 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs7 li { display:inline; margin:0; padding:0; } #tabs7 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioFIvfjSlRImd5mkQEB0yegHZ6lVYsi_FJRdQTBlH2E2sMv_BSk7xtEnqZLG3e53GfdjdZa1GJqi_zM0P10dEgmg81_FjMtwkkZLni0Q8Gxn0yPXBHrt7ZMpYGIKxm30Mfh_HIzw6KUtE/s1600/tableft7.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs7 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQvY0pteDRNLPOO8uI3kh38T2vSi5kiiLcveuYey34j8NVAbjisUMZyCo2gIuHfwMn0NmTNrubet_eAdVYSQ1TYPhNy8vnqjK5TUVK0jwLo25CjBnU1gS0PwcAVCI2WT4WZUYNG9vWFyY/s1600/tabright7.png) no-repeat right top; padding:5px 15px 4px 6px; color:#999; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs7 a span {float:none;} /* End IE5-Mac hack */ #tabs7 a:hover span { color:#ECB546; } #tabs7 a:hover { background-position:0% -42px; } #tabs7 a:hover span { background-position:100% -42px; } #tabs7 #current a { background-position:0% -42px; } #tabs7 #current a span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabs7"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>




Tab Menu #19
Tab Menu KKode Css

<style> #tabsK { float:left; width:100%; background:#E7E5E2; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #54545C; } #tabsK ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsK li { display:inline; margin:0; padding:0; } #tabsK a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTsbjQwfNTUrLPFXoYYlRnRzsGd3zu5yksoS30RWAINM6q5D8dZZF_OPwHPucEnQwObJ-PIou27uKjyBuJ_zv9ZLmY31n92qoCjt1Gk49Nz_MHdOsRjcd0iGX-T11oXgmtlErtCzdHI5Q/s1600/tableftK.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsK a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZZ-nPC0-_IhH8k5YPJ-XW7IYXFApTT9lqHWy5mAdMeVVeVbL26cyNpuOZ4Naj4uLTWvgNFsS-bCUju4B1shhUZQGPvVy2IAeBmaV0RMT9mbMKN1vTN5bteJiUvGYePMKuDv1v8xuJ3Ik/s1600/tabrightK.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsK a span {float:none;} /* End IE5-Mac hack */ #tabsK a:hover span { color:#FFF; background-position:100% -42px; } #tabsK a:hover { background-position:0% -42px; } #tabsK a:hover span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabsK"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Tab Menu #20
Tab Menu 4Kode Css

<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRvE-GVPCO3b4uYznoZMp1tHjlbvpNZyHiWB4qH8I8pPwPY0ixmfP81vvJ-QFXfNDNwkaaLAcTZzp5Nj0sDQ8RIrXMv_uoRvmGwhCyQT-bgdBXCLWaroZynmNT_cbg666R4DC8CXJcIaQ/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh26W0xTyMNM2hQlz1VamdnlV5N5gEJgTWKFm9hjKNWjP15z43pVJnda-AhyQU82D6DeQdLiwgDK9SJjbav2wGSccFc6LilYpT4JMmL3_ezhG-LycSD9Ss-MPiOQQr7oilyxs9dIGp-g4Y/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabs4"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>




Tab Menu #21
Tab Menu 3 Kode Css

<style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; } #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; } #tabs3 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBfTVpyi2yYNRmnDgghrMaGpHa6Pw6OT41A4S2PTQj4JmoD_EOrBdRsn1ckn4tFKpGWUoZdbgNkucOrr1B_2rA0J_dmQNHdi0TBe7VC4D2IHYQzC1epfmI4teUMm8iyn6iFzajFf2BuLw/s1600/tableft3.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs3 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSQ_GuEg9cKdckRxX5QtBsK8e2bog0pS20k7sz9qjCxtyCjjgvFPpBwO7Hbc5c4PJmHB5yjh5QKO3M3OgjNbpi49S4tDG-ozAVumAn8YhgAKUE-XexXgA5Mg-PgX3-c0NJRnbrWczvGak/s1600/tabright3.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; } #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; } #tabs3 #current a span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabs3"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Tab Menu #22
Tab Menu 2Kode Css

<style> #tabs2 img { border: none; } #tabs2 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #84776B; } #tabs2 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs2 li { display:inline; margin:0; padding:0; } #tabs2 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpPwjvVvdrBy0qtiaO3R3E1bPHWdaNzGEz3ENJCC4p1NSmbz7oUezy5_HuffUHu0s2YpaEGKsNCnW5qQakbsok7TCexLJCCRYNJ3Ta3i12UXvs4Krha6no-WmbelZAAsvgztl1eQcDi90/s1600/tableft2.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs2 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCml2o28Qgh2dLEFq4DLgn4hzO3DaFWnTPPowgAp2SUCTndWPwjI1ewMWDoJjR1noPaQhtu9bGhHMmfSsKcEOgppvC3qkf8ITsyMoUWPY32Up7vwVxB3ZwHnQ9j1nQjbfhbPBW0Zb1_qs/s1600/tabright2.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#84776B; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs2 a span {float:none;} /* End IE5-Mac hack */ #tabs2 a:hover span { color:#74675B; } #tabs2 a:hover { background-position:0% -42px; } #tabs2 a:hover span { background-position:100% -42px; } #tabs2 #current a { background-position:0% -42px; } #tabs2 #current a span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabs2"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>




Tab Menu #23
Square Kode Css

<style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style>

Kode HTML

<div class="container"> <ul id="navSquare">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Tab Menu #24
Horizontal Buttons Kode Css

<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style>

Kode HTML

<div id="navcontainer"> <ul id="navlist">
<li><a href="#"><span>Liddddnk 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Linddddkdd 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Linddddk 7</span></a></li>
</ul> </div>


Tab Menu #25
Tab Menu H
Kode Css

<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG-uGHCIX7dfefEh-mjn7jHIDmQjSnTviXOjT29zjUG-fhOlSvRElERM4NliD-1ec0peQiDaGE28K-w5h9PYQ2sb2-NQ0afKBSZbCbAhenoxeFeeLGzpkPIJ8wGMbyanE-i8Yb-Ur5vrw/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1I_k157ZTVCCNn-S3vttAGxNxo__va6uhJAquU6pgcW_A7z0s8L7t64qcyR-5fnNU6-DxZoxBBI-Kz_HJWENi1VEs12A8up62egj8a4jQoG_qjTMMKzn_xHtM1R_XU_bt2h0byqBOf20/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabsH"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Tab Menu #26
Tab Menu 1Kode Css

<style> #tabs1 img { border: none; } #tabs1 { float:left; width:100%; background:#F4F7FB; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizPo-YkQEM_Rka12xfoTG3NT2B8UGexJOWbagk_9zDxX-ksV0sNjh99yIWTwsMmPdGMLFZApfD9HqAIOhGvF1WJ2fMpeURSfbql8URo7CS9I7mpPXF-0v16eE7BW95aGbSpPHHSg97iOg/s1600/tableft1.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglEwfKGQgk2kD-56odUhwqaXo9y10yeQ1Ig6Uo_LeGzKT0kfEhROTUDv15Oz8XnL2eCKl5IEPg9pcd9I16NdF0iHQGwqgck_Nce0n3L6XrsYdNylBljeOwUUZlE3iifEH_ECkCVdz00hc/s1600/tabright1.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } #tabs1 #current a { background-position:0% -42px; } #tabs1 #current a span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabs1"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Tab Menu #27
Tab Menu A Kode Css

<style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLCQU9Yb_V4u5qcPtImU7scmlmNSgrK0GsV0Km1-SPJZDUFZgqWtgSig0ivyFF2kriiiOPFXtm6CvaIeoasFsoPWqc13Z-fuSEiKApGyNILPqkjbXgC_dK2ymp-yKcHlT9FNSGjL06lLk/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfeTry7azc2f69kgdSeSKdQ47ZlswryAhSAUg5WqzUc8LoTZEEFHWmisMR3iEqpC7uz-sZDv6PfbE-LD4A8dJzhvedBGb13TOspQOGtcjokQEkIRAiV2a6gFcrd642RuVHlSGD1gloVL8/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabs"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Tab Menu #28
Tab Menu 5Kode Css

<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwRjPVNMcadx7QY2sK_z5etW4Y76EMGqcVjHuWCImBP3Bh3fROuwLVdOMvzHnuJrmuJZxWiFW5BWQ2FyXgYFAYwQcrBCtT-kyQVYbdHxsTSp8_nLD6n5cz_b0SakiCFBLxiiETiQNq3tw/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ78DE_hLW6Ghq61p2M2nE_V3ZdENHxzl55NUuCyXgxuD5aO2Ur85nbM8LOW1cFUQGyYy7_yfV_sroZmwilV3RFkxJBdlqXIK81J-dGJsn4Apns_DZFxTaWQfb6XuOrpUycz-kX9Go3RY/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabs5"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>




Tab Menu #29 Tab Menu B
Kode Css

<style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTl-r52aDi4MRJAiZxa2n2rCyqRNW8ypp9aMf1dIV7ZD4qTjRFCgN3x2ii3Bgng4P8mgP9KzuUSxgwA3ViJPA-vDrpuJ_GlSW5w4hLe905jYciBQm02c4k70E2U2tpSQnFMN4saS77fpM/s1600/tableftB.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3IT-2YhXnm2fkwRBRkFaAEm0KYVY1aVZcXth3bl_z_vcIxe-e98Nl5eN7SFHiIiJvCagMIkjzBUgV7L0l0MsynR1pU6K07bav13C3oiOlTy_sNm6FMUNE-BjBUqIH4bsbJfP789bDc2Y/s1600/tabrightB.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabsB"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Tab Menu #30

Tab Menu J
Kode Css

<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIsN1BUnukINi0_rQrPUgsyANapjJ5CnmpiFgahBOKhoGJPolJJ6LqHjZjWT34iHBZ8f6wnkxBPXZcfOSDcktnoF812kaWG4g7QJzKBCNWFcyKboGFt80nEaHO8zNm6j31fr6V7OTdDtw/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRYKDRFlKGS2Gn05aDSAPb-x-Oqhym4ovoT4nGJsKsymzItF_BEkqlVHFFrk_3cFtYc5OkTC_9rpxoa0xQjSeVQ4Gupo17jbhlYrDV-qPmm3iycjbQ_MYvEWqEJrX5xEM5fSdx_9iXHVQ/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style>

Kode HTML

<div id="tabsJ"> <ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul> </div>



Untuk Penempatan Kode Css Silahkan Baca Di Penempatan Css

Untuk Penempatan Kode HTML Silahkan Baca Di Penempatan HTML

Untuk Macam Macam Warna Silahkan Baca Di Kode Warna HTML
Read more »

2 comments:

Anonymous March 3, 2011 at 9:50 PM

mantab kang ryan, thanks b4

Anonymous March 7, 2011 at 11:58 PM

makasih ya tutorial yang sangat berguna bagi saya.

Post a Comment

Copyright © Ryan La Vegas 2011 I N2Y Eksperiment by Nano Yulianto Modified by ryanlavegas