Menu Navigasi Horizontal Keren Bag. III
Desain Blog proBlogiz melanjutkan artikel seri Menu Navigasi Horizontal yang cantik dan keren Bag. I, Bag. II, inilah Koleksi Menu Navigasi Horizontal Keren Bag. III. Seperti seri kumpulan menu navigasi / menu tab sebelumnya menu navigasi dengan CSS ini dimulai dari # 21 sampai # 30 juga disertakan kode CSS dan Live Demo atau preview design yang bisa Anda gunakan untuk melihat tampilan menu navigasi tersebut. Untuk melihat tampilan preview / demo live menu navigasi dibawah Anda bisa gunakan tool proBlogiz-Desain Preview, caranya klik tombol Clear dibawah kolom CSS area, kemudian copy kode CSS Menu Navigasi dan pastekan diarea CSS selanjutnya klik tombol Preview untuk melihat tampilan menu tab.
Lihat Tampilan Menu Navigasi Horizontal klik >>>> Design Preview
Untuk cara pasang menu horizontal di blogger Anda bisa lihat di Koleksi Menu Navigasi Horizontal Keren Bag. I
Koleksi Menu Navigasi Horizontal Keren Bag. III # 21- # 30
Menu Navigasi Horizontal # 21
<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/AVvXsEh3cYtL8R2BLt46IGS3yv7Xptb8IcnqTVpf9xPIJFxjxQbfOOn2VNXZiEvbL1oUNL39_IX3vFFvtOfd7Dm6LehpYKNt7jbKfxScbTj_iLiHCHR46HKH3z-Q3TFmWQOnG4EJxdPExjEVHwY/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/AVvXsEh-Nc3F2C35kS7-XfWKawXNVA85JND9lMwHgTiWCdN__YDMXgKZrl0yg9cI6FxsUe5Hveh-q1dln0lmF_c1zp1TkjijjppmWJ1i_iwpqIYO1DHDmsdDra7TLjHRGlrbaOfbvG1pAoFcH7Y/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> <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> Menu Navigasi Horizontal # 22
<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/AVvXsEgOoFhEeOFRGUut2sgTqzCIa3A1M81gLcc2FcYWxeii7Gj6G1zT-t7lWMrwN3oWcdpp4nGc5g90mY84CqXX24NTCnpvvTJ7h0zI7TozUUbp35bcdfOmtL-LPp032FA3t_byX2PNIZckCEA/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/AVvXsEjHnegEhFJgHBZxVNPNa2PSfblBhVdKku5dT4f1Migud_NLOvPGwR_3s3KMxa2hqJEoiWZ8lncXbmGGeaDLMPbzezIATqUjBwmDwxYceRnFVYSkmnmqrFceK0Xv0O6Gqzm0TLNDbofu17E/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> <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>
Menu Navigasi Horizontal # 23
<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> <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>
Menu Navigasi Horizontal # 24
<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> <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 Navigasi Horizontal # 25
<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/AVvXsEh1qts7_xVTi5TByJsayM3kONIXFqqjiZRaQOA77dFp_hCsFTxPwEB3EdELEm1llzjUFfsY-lhyphenhyphenY4S8-kGFRro3msoJH29juuYnqPmH9M0M23VPctneJfOxvtZ9wteWqGVUHdj5ZFvaq80/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/AVvXsEhhqn6_3bb-1xVfnTXxxUxYfUo-iJ_oBCAkgZVqhcfZC4vwvjlsoyc8w_GhJnyLGNyARjSMDdXxnbyazVPQ04nz7zDSgw4Glyro9nywLOfOy9Lij_fOgkqbFzOnevi28cZZxnIP3g8xi8g/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> <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>
Menu Navigasi Horizontal # 26
<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/AVvXsEgQTahZRYAi8VAQUdy75IhGM5cq0_rb0tzqcZ7Xaze6YHGhLjBbnbMIryrzULdwghUKeVG8xBxaVLArWHTjrQkvR4OFX8OjxbNfCrVQZ9BE76Tpzahblpf-LJQ2liv5HV4E_FsgxjzuqvA/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/AVvXsEiK2B_QFhoqttoXlYOQ4nIEjdD55V3OfOK2xQk2XAXLYGVK604_Z3uS-8EaJoKRC0Yc_1Z1w26I0XGPmsGgEupI4c5MUYLHrT3SczN10UiO1cTFNl1TwEqbUmr_IAce4ZG4J_M2N636SEk/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> <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>Menu Navigasi Horizontal # 27
<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/AVvXsEinqMGHLboAjjz2N831OXYHVl6vw4jO2p-kRJe6uGwgt88bwqkdppSRVCbmLrRSjn-SorKxUC83A53srfugowB6sE1rEgu67XZTn8uvQNpxldHAlW-UAQNBhpNOvMUU3VeH-L2stEEoFiQ/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/AVvXsEjl4GzqU36IU772qAAjUlfsUrOoIfnKT9rryAVVreDN5-f3W-WIXn0r47Dy9lk1_5Cfe8g_yXAfk_3D3Ri-TyYs9ZZB5Cwev-0PBYypx_c38V7yH-3TlOpB9ZQdIhOh8tqGCXyj3r_Yvy0/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> <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>
Menu Navigasi Horizontal # 28
<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/AVvXsEgc7TkfIJlDIPXlf8e3REXsLtjd9D7uFXI0Q4Y4DqhWeDs9x6s6-_MmAwRnM43g7dLHMoN-HsYHYq33VBwIeJ7nWYCVOSQFJGtXV8ox9hkkGnr8lN5TVpNGz2topf_Dbw15xjkygtPnpHs/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/AVvXsEjvop4FAAJo-iKrX0vcnb4aC548eiHAmVb9bIfXMQVrkeklXLpwUk0TzsgXFSHvta1c33o184I5m41SU1HL4dtc17YA7jtfPhwr32rrebKFDpESmh8z7UJlWrNzAB9ci8MwK-jT7QAP50Q/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> <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>
Menu Navigasi Horizontal # 29
<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/AVvXsEh-j1zUg_ZrNP6OoDzxgKWoo5D0w5GvTnBsc93IxsTV7_lzIznI9Brv_0JbYz5tiAkI_oLskgZy_g1IV9x6EMn-7oI_AeSQmM8YfbVEHAAQ-fc-oiJBcjXYH86-prmX3DhS_m1F89BcvZI/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/AVvXsEhbrhoWwmY852u7hjmXaYOx73s1H4Gs0-KPfyIy_4pdzqU1CnSK64wWxxgvLBsA8tbb_4c-vHsvlJY0sTalL6V31P9wijbm9l1juwV6DWMC7CqdWm8nq9PWJNJcapxHv6CzF53C1Z7FdHY/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> <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>
Menu Navigasi Horizontal # 30
<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/AVvXsEhlzoBGHRiQhNaAr79SYmTdHDmP7zJ43kiPO5tKKyV1iEHvXCL4exHwGStELBOLcrWMs4AMuVsZyVHytZrpTkvTnaffeXiZMhcXxX0obryjdKK4VR2JoSohyphenhyphen18mBbsP47E3FQPCFG6vI4E/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/AVvXsEg9422RZ7hbhTdAOSfHYTuteRi1RWwwL4Q72JJ4pfapxMjBsvUo9rkOYs9DsYA1d-x3yymQYOj00kYzEFk5BN7wHUBBhyphenhyphenHXDrVeAFC7mJwhrDja3uDaf7eI9991mGOP6jWaN8_MUIQnzjI/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> <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>
Itulah seri Koleksi Menu Navigasi Horizontal Keren Bag I, Bag II, Bag III yang saya kumpulkan dan sedikit memodifikasi kode CSS, agar bisa digunakan atau Anda pilih salah satunya untuk dipasang pada blog sobat di Blogger.
Akhirnya proBlogiz bisa sharing kembali dan senang rasanya bisa membantu....
Jangan lupa klik Share It di sosial media atau Like It di pada Facebook Fan blog ini.
Berilah saran dan komentar....kami menghargai semua saran Anda untuk perkembangan dan kemajuan Blog ini.
