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 ;
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