Thursday, November 3, 2011

cara mengganti title sub menu horizontal

penggunaan link html untuk menu horizontal bagus
jika anda ingin artikel lengkap klik link  http://hendrytha.blogspot.com/2011/08/cara-buat-menu-horizontal-bagus.html

<div id="menu_div">
<div id="navigation">
 <div id="menu">
  <ul id="nav">
   <li><a href="#">Home</a>
    <ul>
     <li><a href="#">link 1</a></li>
     <li><a href="#">link 2</a></li>
     <li><a href="#">link 3</a></li>
     <li><a href="#">link 4</a></li>
     <li><a href="#">link 5</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-->


Keterangan:
Tanda merah adalah nama link induk anda di gambar di tunjukan di no 1
warna biru adalah di gambar di tunjukan di no 2
dan warna hijau untuk link item dari menu no 2

untuk memasukan linknya ada ganti tanda # dengan link anda contoh

<div id="menu_div">
<div id="navigation1">
 <div id="menu1">
  <ul id="nav1">
   <li><a href="http://hendrytha.blogspot.com/">Home</a>
    <ul>
     <li><a href="http://hendrytha.blogspot.com/">propil</a></li>
     <li><a href="http://quicklytemplate.blogspot.com/">template</a></li>
     <li><a href="#">link 3</a></li>
     <li><a href="#">link 4</a></li>
     <li><a href="#">link 5</a></li>




kode Kedua saya sarankan pake kode ini aja
Jika kode di atas terlalu banyak anda bisa gunakan kode yang ini buat htmlnya

<div id="menu_div">

<div id="navigation">

<div id="menu">

<ul id="nav">

<li><a href="link anda">Home</a>
</li> <!-- Level 1 END -->

<!-- END Home Item -->




<li><a href="link anda">Portfolio</a>

<ul>

<li><a href="link anda">link child 1</a></li>

<li><a href="link anda">link child 2</a></li>

<li><a href="link anda">link child 3</a></li>

<li><a href="link anda">link child 4</a></li>

<li><a href="link anda">link child 5</a></li>

</ul>

</li>

<!-- END Portfolio Item -->




<li><a href="link anda">Blog</a>

<ul>

<li><a href="link anda">link child 1</a></li>

<li><a href="link anda">link child 2</a></li>

<li><a href="link anda">link child 3</a></li>

<li><a href="link anda">link child 4</a></li>

</ul>

</li>

<!-- END Blog Item -->




<li><a href="link anda">Services</a></li>

<li><a href="link anda">About Us</a></li>

<li><a href="link anda">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-->



struckturnya ;


No comments:

Post a Comment