Koleksi Menu Navigasi Horizontal Keren Bag. II

Koleksi Menu Navigasi Horizontal Keren Bag. II

Desain Blog proBlogiz sebelumnya telah membagi 10 Menu Navigasi Horizontal yang cantik dan keren, kali ini kembali menampilkan 10 Koleksi Menu Navigasi Horizontal Keren Bag. II. Dari # 11 sampai # 20 kumpulan menu navigasi dengan menggunakan CSS dibawah ini disertakan juga 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

Berikut Koleksi Menu Navigasi Horizontal Keren Bag. II dari # 11 sampai # 20 untuk Anda :

Menu Navigasi Horizontal # 11

<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/AVvXsEi6rQR7wNxZa4YDNLnCmdBpTltZBUbx4AAYJBfjn28kFR1LZPqJRB4kpy3eisMDtmZT-1Cq_fuGhPoB_T8QH3DTQ3SvC_lcZns_fPDWeGC5_Relhq6FUCii7wgZhgFoiMSCBT-yT2f86Q0/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/AVvXsEh4nsQTBGEhC3aEuBVyw-qfFIXgEWGSYdUFMpb6CcXsTWw8m597M8FxiSn0Jj5TN2__Kn9NzVKZD6OoRrub5fOMCrTpE7fjNK-xQPt5EOtSyJ-04qqdomp53FJEhfeG4aGcoZv7OdJy0pY/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> <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>

Menu Navigasi Horizontal # 12

<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/AVvXsEgHXwZFXtcpza3Avv7Gn_irkmNl-Jt18kqU0QVj40P3M-_liEN2Neh5v_sGCByTevX38WDnFeg9MG2JRHNDQclQ02N8fDV3xMAsgAVbsevHQ1tX-6F8FnztBV1sgOyr6V-5xoB_PMQ5Am0/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/AVvXsEjkpjs5xmmL9UDx6NjDN7syKv1VqGWVC3B8uWtwQgtaqJmJhGYzLKymkAQcIW74WKmAQVl_4YcI5MrSG-YAS9fzdC-28b34WWrmMYp-8IGDDoGABFwuHFKyHKqnVdOrgfxDFiz6KRyWf0Y/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> <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>

Menu Navigasi Horizontal # 13

<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/AVvXsEiLHapLsT79Smdf9n_TEQ8f3-U_zIraG5kBh6KS0yDUXTrRg5YZYbWzHjnwTWki369j0MEh0wd9KYHk9hAcQPM-wxDnmrBn6lXAWwa3_4sgz3IdjAs-WJkSZlP4O2fMdWA1ShkZWr2MmNU/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/AVvXsEgjApEf2qP8P1Qz5QAHXKY63lSN5MRPA4dIsVwegjQQarq6g0vrL-uT1qxX80RtQp6Q7i5SpID-JR4FAbSn2WFhw8rZwhxOZUWMflteo2zKpkDrvIw_Fd8BKxoNB9sgbwnpNYLd2TR5ENI/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> <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>

Menu Navigasi Horizontal # 14

<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/AVvXsEiWWOPCS6sQq2KhRCF1YuzcKnTrfg4lS_m0UC0ODwv-I49cKP-7vvom7WJM06tX1_4PLjRDWZX9WeWuLcp6gUu1lfBWzS1My4w9l_Zo087v9Zt1_NCx_PpTcxfCIVMsy0HXRGXM91jvX2Y/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/AVvXsEgj1C9OX6Skl-jbZoOZ1M_fOZi4vtDgYMvbKJwiIeWfcIOmDB-7Ab27dj5t-Col_w2R73wa-DNC-rxP0q5f-VS1T_2GuATqlG_2yoQ425MowUXjFwngnP85rtsg1l8kX0qbaqT-4JVgIVw/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> <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>

Menu Navigasi Horizontal # 15

<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/AVvXsEjrdUESmL82-7x0v3CrHpcIEjkVPO8UAUUXmk9qvzFmD2Pu5jlsqK4Dm64PUDUrBi99RWLDeEhyIFYmz6bLSVYvNh8M97eusWm8zDHscw5oCUtvXQdbpK0PMYO_tMtOGweCkVe0MjBo0aQ/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/AVvXsEjRDUFVvX_baCbB8akQvqV_Jk6Y-uONCjMfL1dc9v1JGTkG0anh_5q9UL7CJBpWBmaXst2Yt2mgr_A8QZYGxPTXLS6WQIjefoLYsZUJsYmbrE_tWJweRQGZdwkYowAAQsjPMvRFha4Gopk/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> <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>

Menu Navigasi Horizontal # 16

<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/AVvXsEiaOfKidwTNkAtNtYVMytRTDId7hn-b6gamxFH2m2OFLLLpZ98WNOEjO8mCoiHv202u73ksGrbtXUr6PzbfouvVm6YWkPwbeZtreeijyxf4c5Xhdq3FJ0ctX_aSQpBTuIKFiSAHId5QQXI/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/AVvXsEjrt7HimtDE3lJv-B6ayXC24lCJEJlCpjxGuzN2s-8bRYBPVdjNZb5NSFaAI5trTtKfVOlIlVSCJHdwkYfFlVy_kWLufHSqYlNN9iekAH9czmdz-NJD7NinqY63kt0DAreOqBCTmiAttRA/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> <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>

Menu Navigasi Horizontal # 17

<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/AVvXsEiclVRvPGa92KSKrWHYiITZkBTD0u9TV4BC48PKwYUAqSIIBO_xuwbHWIXfMDycy6CvbPCcsQYI4kI8sNMsYeiyAP4zjEhswjx7uUxwrIHENn0TrMSqG7QkPBiYEOkj-7LChH47GTFIutA/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/AVvXsEgvnAvLLYXdP6IAR95aJ3xMsvBOwK92Wm57bsdpNxSay2VwNpVvB_0I82mjD7ZYIq8jg55rO73iPhOgP-FiSS_t-lIDizyjU2Or4Y3euFi-p3pGJFcDCw3Jfl6cGJw7o83gHgsldlGboWs/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> <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>

Menu Navigasi Horizontal # 18

<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/AVvXsEh9hAQx1fBh1ehrz148TsEAoS721OqEB4Jhfjt7OEU8RuZ64bUUAwZRKEorc7KChs_jB1BJNUpQuZ47Tg58N-_8X4gkK5mGZkkkGlUgQ5iItvkWW9XTir96xCzQi5wv5UFWV-a5ZGV71is/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/AVvXsEio3nFrrKBOwB5U9_kvUS_J9Lv9D979XWJrvvQf3TcRs5NWeBdI4O6BQ1jhgRgxlszs6hPOqDPdoyKWOfIsstyDUqAVb0P-F_W24E916QBak0hPqFl63E2z9-VQ6fpx0pJtin3qpl5FjJM/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> <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>

Menu Navigasi Horizontal # 19

<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/AVvXsEiOX1ANEvTKEkDp1mGLNrQWBDWqnVDnbgQwaae1YY4w_FL7mmMAvbc_Cbk8pSZmN2Hi4oKsJuGi82GOOuygP-x0fBwkOCdnGy6Zys_MIhYzWa1Cjype4TGO4qPi7hCE8txlTEucGPJFZ1Q/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/AVvXsEgb4739aAbxnJxCAAOyJb7CAhbWNHAWa5PIcRBno3LanyYfqxUxmqcEyBtJRAjUmReDJTr_Ut_ZgDowE5f-fIwTnjziEoO5Ps6SqOe8pSIDwW0ZtwXynV8Z3B71pzC5IvQ1tlVO9u-83xo/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> <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>

Menu Navigasi Horizontal # 20

<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/AVvXsEjKnf0-2PVv72uhOz3FyURLWgmGwnqEylRyJmLfc8uf8Qqkb04d8sPD3C4f5e3aUgGjJ76cyg5-9uBEKgltUKeGjpk-IYCx_GyZxqUD2W9F6ltX-KqnH10CXJurN_skldfL8HTdPt5Uou8/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/AVvXsEj5SP2gCZ-A-Tg5ormkIyO1toOSQSgEFg5Sh897fyHvLBiYI_F6q2wz-LUjn9tT5akQGwXHwulvFzsfjX24oPViWNj-D-WLJT3Ob4EfWMSpNLLPI5GjRfVzJbyPaSFRtyVixgMfUSfzG7s/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> <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>

Setelah melihat kumpulan menu tab diatas Anda masih belum melihat yang sesuai coba cek / lihat juga Menu Navigasi Horizontal Keren Bag. I dan Bag. III

Lihat juga selanjutnya :

Menu Navigasi Horizontal # 21- # 30