Poetra Tasik: Menu Navigasi Horizontal Blogger 1

Menu Navigasi Horizontal Bag. III # 21- # 30

Menu Navigasi Horizontal # 01

<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> <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 # 02
Purple White ( no image )

<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> <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 # 03
Boxed ( no image )

<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>
 <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 # 04
Light Grey ( no image )

<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> <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 # 05
Bulleted Top Navigation

<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/AVvXsEhh15NHsZf9pUSKevE27J7afuqp8j7saEXh2fEl8_WliA3kdsVaF9hU4bIhSHZ5zfzbKpP69P2VdPngMbru_PprC1V85oKaRHm87Ub6YoyQi83g2P8Z-0rDTGGPVw78pER8yvd1gfd07uc/s1600/Inverted.png)
 no-repeat top center; border-top: 4px solid #5F6A71; } </style> 
<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 Navigasi Horizontal # 06
Orange Blue

<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/AVvXsEhYIFxmwvljhZ2YyHGdoOAzxXs4kZTeTJRQGy6TpIH9E-zJecKCiBczjutlBLiYt1HMUnPDFKNag0s926H0e_dzr-ypo-aObQJFDkR1D2a8gjBsVazUGxyMthdiNtkPByxPuBNlDErQ_PA/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/AVvXsEgv6KX7MyAqVHil2vzX8iiGfV9uc_bZaUymVhGQXwvgGJyT8GE3eXh63Jdp1A2VjiKOjkwCsF1b-obz4-QW45nn6E0pJVlj84-eSts5DnKO0ZP90c9GNTqO9VfyGjNUS0ed_Cau9b2IM1A/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> <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 Navigasi Horizontal # 07
Grey Blue

<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/AVvXsEjQPYXZuEm3LbeHDCJZ08hkClVT3W2m2-V8Uoemj6aiZ3od4-oy_lalJiFW__sNw7Mj5BxDbWVunInGK8MleXVAd9nw5ZleMs4ZP4w3cmE-hC96-NJVqepsDYvDzfirp97QmP9jbQjh5K0/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/AVvXsEh3Zx2q2TyB6bmGU0qcNIgQ9a19bQTS1tLJhWeAQwDJvBWumIncaUnOo2tC1wM3qWR8Dz5ITMJ1LQu7whJaxD9zMHzS6cCVNZXx8bBiOH6fTJrUbLnrGvsCbLD070FvL6sma7Nm8OVasNk/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> <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 Navigasi Horizontal # 08
Rounded

<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/AVvXsEi5rGvsunyuSaBzbcoBymt3MkOCqNEHb0f9OvxLxYCC_XWJcIdbZcOznK9kXT6URGbBKYfbyncQQiMkCxCTjfIg83dO5TNNhjqYGCdMfvMF_QS4_uCR3MPgVvdtKuqFEk-POFecITWUvxc/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/AVvXsEiw8uEFJXQ-ESsoXc_mMXmvpBwQ0K7d_z-Jzi94x6iiwMQZT5wkswvwEZVAlAyiQlMpuk2U6gUfr5umI778LnM9IqBNJnI73H0sScobFasF2pNqn6xhYsVHDWL3FtWW9wAsJXWSe_Rf38k/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> <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>

Menu Navigasi Horizontal # 09
ZDnet Emulation ( no image )

<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> <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 # 10
Red Boxed

<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/AVvXsEh69njnZ6OqpyBJsK8zwVK7bxpid-kkKsUv7VoYrWw2-ynixO-V17MJIWHzBZD6MbB-h32_Q6prOnNEOLniFZkDVWZv3_HsW_aKJ3iHRpyH5HayOZC8blAr6iVysFbyMbCxuv30IcY3JxQ/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/AVvXsEhsrJkVX-Gac9w6PDbLoMew59JP07qeyU3D9w2HaC_tJ4XsaZB4FVKaDiqNLp29kpj1EKGmQkRk8caqiVWSGAjQGNIIsDW69KyEZzfOxLCYC-EDppvkFpoAz2n9sT0BsHR0zkptIRMTdcA/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> <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>

Koleksi Menu Navigasi Horizontal Keren selanjutnya dapat Anda lihat pada artikel Koleksi Menu Navigasi Horizontal Keren Bagian Dua, klik :

>>>>>> Menu Navigasi Horizontal # 11 ~ # 20 <<<<<<

Poetra Tasik

Menu Navigasi Horizontal Blogger 1

Menu Navigasi Horizontal Bag. III # 21- # 30

No comments:

Post a Comment

Menu Navigasi Horizontal Blogger 1

Menu Navigasi Horizontal Bag. III # 21- # 30

No comments:

Post a Comment

Subscribe To: