HORISONTAL GREEN DROPDOWN MENU

2008-03-09T06:45:00.000-07:00

This is the first of our article in this blog.so, beforehand we apologize about our bad english because we are learning english and also in writing. we hope that you don't find any dificullties in understanding our english.

ok, on first article we want give you a navigatian menu that you can apply on your blogs, we called this menu with " green dropdown navigation menu". we think that this is a familiar navigation menu. when you're visiting sites and you find navigation menus where you put your mouse over it and bum!!!!!!!other menus fall down.it's interesting, isn't? now you can apply navigation like that on your blog. we will always give you menus like that

ok..on this green dropdown menu. the color of this menus is green. for applying sample of this menu klik here: you will be brougth to other blog.( our blog too...)

let's we start make this menu: here the ways:

#STEP 1

first, download the greenmenu.css here. then open with your web editor. you can use macromedia dreamweaver or ms.frontpage or notepad instead

then click “layout” menu

klik menu “edit html”

for safety, download your template first by click "download full template"link, up side of edit html page

copy code that you've downloaded and then paste it precise code below:

Paste your code here!!!

]]></b:skin>

</head>

<BODY>

copy code below and put above </head> code

click "save changes" button

#STEP 2

click " page element " menu

click " add page element"

choose the html/javascript menu then click add to blog

copy code below and paste it in the page that emerge. change the links with your own link

<div id="menuhijauku" class="greenmenu">

<ul>

<li id="current"><a href="#">home </a></li>

<li><a href="#" rel="awal">menu utama</a></li>

<li><a href="#" rel="menu1">menu utama </a></li>

<li><a href="#" rel="menu2">menu utama </a></li>

<li><a href="#">tidakadsubmenu</a></li>

</ul>

</div>



<div id="awal" class="dropmenudiv_e">

<a href="http://cominfo-english.blogspot.com">kunjungi dong..</a>

<a href="http://contoh link saya....">sub menu</a>

<a href="#">sub menu</a>

<a href="#">sub menu</a>

<a href="#">sub menu</a>

<a href="#">sub menu</a>

</div>



<div id="menu1" class="dropmenudiv_e">

<a href="http://freetemplateforyou.blogspot.com">freewebtemplate </a>

<a href="http://best-song.blogspot.com">free music and lyrics download </a>

<a href="#">sub menu</a>

<a href="#">sub menu</a>

<a href="#">sub menu</a>

<a href="#">sub menu</a>

</div>



<div id="menu2" class="dropmenudiv_e">

<a href="#">sub menu</a>

<a href="#">sub menu</a>

<a href="#">sub menu</a>

<a href="#">sub menu</a>

<a href="#">sub menu</a>

<a href="#">sub menu</a>

</div>



<script type="text/javascript">

//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])

tabdropdown.init("menuhijauku", 3)

</script>

click PUBLISH POST button

FINISH!!!

it's easy, isn't? here the explanation.

#explanation

probably, step 2 number 4 will be difficult for newby (blog's beginner), but don't worry just follow these explanations.

on code:

<div id="menuhijauku" class="greenmenu">

text " menuhijauku" are anycode or anyname. the most importan is the name same with code on bottom of this codes"

<script type="text/javascript">

//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])

tabdropdown.init("menuhijauku", 3)

</script>

however, you can change this name or code with anything; greenmenu, frog, dog, cat,for example. remember...both must be same

class="greenmenu">. greenmenu is the code to call css script that you've downloaded before.

]]></b:skin>

</head>

<BODY>

don't change th code.

Setelah itu perhatikan kode berikut:

<ul>

<li id="current"><a href="#">home </a></li>

<li><a href="#" rel="awal">menu utama</a></li>

<li><a href="#" rel="menu1">menu utama </a></li>

<li><a href="#" rel="menu2">menu utama </a></li>

<li><a href="#">yang initidakadddmenunya</a></li>

</ul>

the rel=”….” is the code that must be inserted if you want get effect of dropdown menu, if you wan't show this effect, leave it empty ( don't insert rel='....' code).

inside of rel=".... code, filled by anynaming. most importan it must same with submenu naming that want to be appeared as dropdown. see code bellow:

<div id="awal" class="dropmenudiv_e">

<a href="http://cominfo-english.blogspot.com">kunjungi dong..</a>

<a href="http://contoh link saya....">sub menu</a>

<a href="#">sub menu</a>

<a href="#">sub menu</a>

<a href="#">sub menu</a>

<a href="#">sub menu</a>

</div>

links inside of codes above means will appear as dropdown in tabmenu:
<li><a href="#" rel="awal">menu utama</a></li>

you can add as much as link, one hundred it's oke!!! .

i hope that you don't find any trouble when use this menu. also, if you want to change this menu appeareance. just open the code that you downloaded, we have added many notes where codes that can be changed.

happy blogging and g' luck!

free decorations and css navigation, free blogger tips and tutorial for blogger

HORISONTAL GREEN DROPDOWN MENU