Tuesday, December 20, 2011

cara buat Menu Horizontal Bagus


senantiasa belajar cara membuat menu horizontal


mungkin postingan ini telah lama terkubur dan mungkin belum di jelasin secara keseluruhan tentang toutorial ini   
khususnya buat kode htmlnya dan salah satunya berkomentar disini kali ini saya bahas lengkap dengan penempatan buat kode htmlnya

Menu Horizontal Transparan Untuk Blog ini cukup bagus untuk mempercantik blog anda jika Anda Tertarik Silahkan Anda Ikuti Langkah di bawah untuk Cara membuat menu horizontal transparant Tersebut

DEMO BISA DILIHAT DISINI

1. Login ke blog anda
2. cari Code ]]></b:skin>
3. COPY CSS CODE di bawah ini tepat di Atas ]]></b:skin>


/* == 10. Horizontal menu Background == */

/*====================
 Color Scheme Begin
=====================================================================
====================================================================*/

/* Menu bar background color */
#navigation, 
#nav li ul li, 
#nav li ul li a{
background: #000; 
}

/* Menu Item text color */
#nav li a, 
#nav li a:hover, 
#nav li ul li,
#nav li ul li a,
#nav li ul li a:hover  {
color: #fff; 
}

/* Menu Item background color on hover */
#nav li a:hover, 
#nav li ul li a:hover  {
background: #9ACD32; 
}

/* Text Shadow */
#nav li a, 
#nav li a:hover, 
#nav li ul li a:hover  {
text-shadow: 0 1px 1px #333; 
}

/* Search form colors */
.searchform input, .searchform input:not(:focus){
color:#B1B1B1; /*search form text color default*/
background: #fff; /*search form background color default*/
}
.searchfield:focus{
color: #000; /* search form text color after click */
}

/*=====================================================================
=======================================================================
 Color Scheme End
====================*/

#menu_div{
clear: both;
position: relative;
top: 0;
left: 0;
} /* Free space to top specialy for menu */

#navigation {
position: fixed;
}

#navigation, #menu_div {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}

#menu_div, #navigation, #menu, #nav{
height: 45px; /* menu height */
}

#menu_div:hover,
#navigation:hover,
#nav li a:hover, #nav li ul a 
{
opacity: 0.95;/* Menu transparency on mouse hover*/
} 

#menu_div,
#navigation, 
#nav li a, 
#menu_div:not(:hover), 
#navigation:not(:hover)
{
opacity: 0.8;/* Menu transparency on mouse out */
}


#menu {
width: 960px;
margin:0 auto; /*center the menu*/
padding:0;
position: relative;
}

#nav{
width: 960px;
margin:0;
padding:0;
position: relative;
font-family: 'Arial', Helvetica, sans-serif;
}

#nav li a,#nav li {
float:left;
}

#nav li {
list-style:none;
position:relative;
}

#nav li a {
line-height: 45px;
padding:0 15px;
text-decoration:none;
margin:0;
font-size:12px;
font-weight:700;
text-transform:uppercase;
}

/*====================
 Submenu 
=====================*/
#nav li ul {
display:none;
position:absolute;
left:0;
top:100%;
padding:0;
margin:0;
} /* hide submenu */

#nav li:hover > ul {
display:block;
} /* show submenu on hover */

#nav li ul li,#nav li ul li a {
float:none;
height: 35px; /* submenu item height */
min-width: 150px; /* submenu item minimal width */
line-height: 35px;
border-right: 0;
text-shadow: none;
display:block;
font-size:13px;
font-weight:400;
text-transform:inherit;
} /* Submenu item */

#nav li ul li {
_display:inline; /* for IE */
}

/* == 12. Sub-Sub Menu == */
#nav li ul li ul {
display:none;
}

#nav li ul li:hover ul {
left:100%;
top:0;
}

/*====================
 Search form 
====================*/

.searchform {
position: absolute;
right: 15px;
top: 6px;
display: inline-block;
zoom: 1;
*display: inline;
border: 0;
padding: 0;
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
height: 27px;
line-height: 27px;
padding-left: 10px;
padding-right: 10px;
width: 150px;
border: 2px solid #333;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 1px 1px 2px #A1A1A1;
-webkit-box-shadow: inset 1px 1px 2px #A1A1A1;
box-shadow: inner 1px 1px 2px #A1A1A1;
}

.searchfield:focus{
font-weight: 700;
width: 220px;
}

.searchfield:not(:focus){
width: 150px;
}


/*========================
  Transitions
========================*/

#nav li a:hover,
#nav li ul li a:hover  {
-webkit-transition-property:color, background; 
-webkit-transition-duration: 0.5s, 0.5s; 
-webkit-transition-timing-function: linear, ease-out;
}

.searchfield:focus,
.searchfield:not(:focus){
-webkit-transition-property:width; 
-webkit-transition-duration: 0.5s, 0.5s; 
-webkit-transition-timing-function: linear, ease-out;
}

#menu_div:hover,
#navigation:hover,
#nav li ul a, 
#menu_div,
#navigation, 
#nav li a, 
#menu_div:not(:hover), 
#navigation:not(:hover)
{
-webkit-transition-property:opacity; 
-webkit-transition-duration: 0.5s, 0.5s; /* duration in seconds */
-webkit-transition-timing-function: linear, ease-out;
} /* Menu transparency animation */


Lalu Untuk Code HTML Anda Copy Code di Bawah ini tepat di bawah </head> 


<div id="menu_div">
<div id="navigation">
 <div id="menu">
  <ul id="nav">
   <li><a href="#">Home</a>
    <ul>
     <li><a href="#">Lorem ipsum</a></li>
     <li><a href="#">Aenean massa</a></li>
     <li><a href="#">Nullam dictum felis</a></li>
     <li><a href="#">Aenean leo ligula</a></li>
     <li><a href="#">Curabitur ullamcorper</a></li>
     <li><a href="#">Item - Level 2</a>
      <ul>
       <li><a href="#">Sub item 1</a></li>
       <li><a href="#">Sub item 2</a></li>
       <li><a href="#">Item - Level 3</a>
        <ul>
         <li><a href="#">Sub sub item 1</a></li>
         <li><a href="#">Sub sub item 2</a></li>
         <li><a href="#">Item - Level 4</a>
          <ul>
           <li><a href="#">Sub sub sub item 1</a></li>
           <li><a href="#">Sub sub sub item 2</a></li>
           <li><a href="#">Sub sub sub item 3</a></li>
          </ul>
         </li> <!-- Level 4 END -->
        </ul>
       </li> <!-- Level 3 END -->
      </ul>
     </li> <!-- Level 2 END -->
    </ul>
   </li> <!-- Level 1 END -->
   <!-- END Home Item -->

   <li><a href="#">Portfolio</a>
    <ul>
     <li><a href="#">Maecenas tempus</a></li>
     <li><a href="#">Vestibulum ante ipsum</a></li>
     <li><a href="#">Praesent adipiscing</a></li>
     <li><a href="#">Curabitur ligula</a></li>
     <li><a href="#">Vestibulum</a>>
     </li>
    </ul>
   </li>
   <!-- END Portfolio Item -->

   <li><a href="#">Blog</a>
    <ul>
     <li><a href="#">Fusce id purus</a></li>
     <li><a href="#">Aenean viverra</a></li>
     <li><a href="#">Phasellus magna</a></li>
     <li><a href="#">Morbi ac felis</a></li>
    </ul>
   </li>
   <!-- END Blog Item -->

   <li><a href="#">Services</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Contact Us</a></li>
  </ul><!-- #nav END-->

  <!-- Search Form -->
  <form class="searchform" action="#">
   <input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
  </form>
  <!-- / Search Form -->

 </div><!-- #menu END-->
</div><!-- #navigation END-->
</div><!-- #menu_div END-->

DIHARAPKAN PRATINJAU DULU SEBELUM disimpan



Perhatian:
jika anda sudah pernah memakai menu lain dan diharapkan namanya ganti jangan sampai namanya sama
tapi tidak semua sama biasanya langsung jadi :

contoh :
bila dalam kode css: #navigation,
dan kode HTMLnya: <div id="navigation">
dari bagian di atas bila ada menggunakan anda memakai menu horizontal lain dan namanya sama dengan kode css dan Html dari toutorial ini anda harus ganti dengan menambahkan 1 contoh:

bila dalam kode css: #navigation1,
dan kode HTMLnya: <div id="navigation1">
atau hapus aja yang lama :
silahkan berkomentar bila masih bingung

Jika Kurang Mengerti Untuk Memasangnya Silahkan Berkomentar !!!!!!!


13 comments:

  1. cara buat Menu Horizontal Bagus

    ReplyDelete
  2. artikel yg bagus,,, tp code html yg kedua di copy dmna boz???

    ReplyDelete
  3. sobat maaf saya baru bisa online dikarenakan casan laptop saya rusak untuk memasang Htmlnya perhatikan:
    jika anda pakai template default coba anda pasang di bawah </head>

    ReplyDelete
  4. kalau pake template yg bkan default gmana mas ?????

    ReplyDelete
  5. bos cara ganti title menunya gimana???

    ReplyDelete
  6. @DUNIA CERITA maksudnya title menu kaya di bawah ini?

    <li><a href="http://hendrytha.blogspot.com/2011/08/cara-buat-menu-horizontal-bagus.html"title="home"> Home</a>

    </li>

    ReplyDelete
  7. bos cara ganti title submenu biar pake bahasa indonesia,,,, terus sekalian mau nge'link gmn ya...??? trm ksih

    ReplyDelete
  8. buat @online shop ikuti link ini untuk toutorial PENGGUNAAN HTMLNYA
    http://hendrytha.blogspot.com/2011/12/cara-mengganti-title-sub-menu.html

    ReplyDelete
  9. buat @online shop maaf balasnya telat komentar anda masuk spaming
    http://hendrytha.blogspot.com/2011/12/cara-mengganti-title-sub-menu.html

    ReplyDelete