32 Macam Menu Navigation Horizontal Part 2

Untuk cara pemasangan menu navigation horizontal di bawah ini klik disini

  • Menu navigation 11

image

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style>
#bg_nav{background:#000; width:960px; height:29px; font-size:11px; font-family:Arial,Tahoma,Verdana; color:#FFF; font-weight:bold; margin:0px auto 0px; padding:0px; border-top:1px solid #333; border-bottom:1px solid #000; overflow:hidden}
#bg_nav a, #bg_nav a:visited{color:#FFF; font-size:11px; text-decoration:none; text-transform:uppercase; padding:0px 0px 0px 3px}
#bg_nav a:hover{color:#FFF; text-decoration:underline; padding:0px 0px 0px 3px}
#navleft{width:720px; float:left; margin:0px; padding:0px}
#navright{width:220px; font-size:11px; float:right; margin:0px; padding:6px 5px 0px 0px}
#navright a img{border:none; margin:0px; padding:0px}
#nav{margin:0px; padding:0px; list-style:none}
#nav ul{margin:0px; padding:0px; list-style:none}
#nav a, #nav a:visited{background:#222; color:#FFF; display:block; font-weight:bold; margin:0px; padding:8px 15px; border-left:1px solid #000}
#nav a:hover{background:#6e6d6d; color:#FFF; margin:0px; padding:8px 15px; text-decoration:none}
#nav li{float:left; margin:0px; padding:0px}
#nav li li{float:left; margin:0px; padding:0px; width:150px}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#333; width:160px; float:none; margin:0px; padding:7px 30px 7px 10px; border-bottom:1px solid #000; border-left:1px solid #000; border-right:1px solid #000}
#nav li li a:hover, #nav li li a:active{background:#666; padding:7px 30px 7px 10px}
#nav li ul{position:absolute; width:10em; left:-999em}
#nav li:hover ul{left:auto; display:block}
#nav li:hover ul, #nav li.sfhover ul{left:auto}
</style>
<div id='bg_nav'>
<div id='navleft'>
<div 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 12

image

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style>
#menubar{background-color:#e1e1e1; padding:0; margin:0}
.btnmenu ul{font:15px verdana; padding:0; margin:0}
.btnmenu ul li{list-style:none; display:inline; padding:0; margin:0}
.btnmenu ul li a{padding:2px 20px; text-decoration:none; float:left; background-color:#e1e1e1; color:black; border:solid #e1e1e1; border-width:4px 1px; -webkit-border-radius:9px; -moz-border-radius:9px; border-radius:9px}
.btnmenu ul li a:hover{padding:1px 20px 3px 20px; background-color:#FFF; border-style:outset}
.btnmenu ul li a:active{padding:3px 20px 1px 20px; border-style:inset}
</style>
<div id='menubar'>
<div class='btnmenu'>
<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></ul></div><div style='clear:both; '></div>
</div>

  • Menu navigation 13

image

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBJ_dMfYI/AAAAAAAACwU/ROgYM1pOzzo/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(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvBJ7Gdz_I/AAAAAAAACwY/o6Vlnp00pyk/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>

  • Menu navigation 14

image

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvASpRftuI/AAAAAAAACvU/Zu86nlwjvhQ/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(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvAS5-xgjI/AAAAAAAACvY/f0YjqMbxzqY/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 navigation 15

image

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu-pihZsRI/AAAAAAAACuM/M_WqlslWGI0/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(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu-ppvYxHI/AAAAAAAACuQ/aL8WsHpvlSo/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 navigation 16

image

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvASky0MXI/AAAAAAAACvM/lCN12ooOQ_o/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(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvASjsu31I/AAAAAAAACvQ/h_VW2YzIljU/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 navigation 17

image

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu9PCVjbFI/AAAAAAAACts/MclSzL8Aza4/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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu9Pd4oqxI/AAAAAAAACtw/3ldOBb2QV-g/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 navigation 18

image

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBBx63ZtI/AAAAAAAACwE/lOu0RDcHs_c/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(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvBB9V8tWI/AAAAAAAACwI/rmnQz1WjK-g/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 navigation 19

image

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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>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>

  • Menu navigation 20

image

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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>

Previous page1Next

 

 

Jangan lupa like & share yach…!!!!

Tidak ada komentar:

Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top