Dropdown Menu using JavaScript
If you like trinkets blog, I have a good news for you. At this time I will discuss about how to create a Dropdown menu using JavaScript.
How cool it is, please note the examples of the dropdown menu on the sidebar of this blog. please direct your mouse to the row and click the menu to open the submenu that is in it and to close once you click back to the menu you want to close in, please try first:
To make the menu as above, we need to addthe JavaScript code and CSS stylesheet into our blog template,
To make it run, please follow the steps below:
1. Sign in at blogger.com with your Blogger ID
2. Click the Layout
3. Click Edit HTML
4. Click Download Full Template,
5. Give a check mark to the Expand Widget Templates.
6. Save the following code under the code
<title> <data:blog.pageTitle/> </ title>
2. Click the Layout
3. Click Edit HTML
4. Click Download Full Template,
5. Give a check mark to the Expand Widget Templates.
6. Save the following code under the code
<title> <data:blog.pageTitle/> </ title>
<script>
last_expanded var ='';
showHide function (id)
(
var obj = document.getElementById (id);
var status = obj.className;
if (status == 'hide') (
if (last_expanded! ='') (
var last_obj = document.getElementById (last_expanded);
last_obj.className = 'hide';
)
obj.className = 'show';
last_expanded = id;
Else ()
obj.className = 'hide';
)
)
</ script>
7. Enter the following code in the CSS stylesheet, before end close of ]] skin
. ddmenu (
background-image: url ( 'http://your-picture-link');
text-align: center;
width: 100%;
font-family: georgian, Helvetica, sans-serif;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
display: block;
text-decoration: none;
color: # 000000;
height: 20px;
)
. ddlist (
background-image: url ( 'http://your-picture-link');
text-align: center;
width: 100%;
font-family: georgian, Helvetica, sans-serif;
padding-left: 20px;
padding-right: 20px;
padding-top: 13px;
padding-bottom: 10px;
display: block;
text-decoration: none;
color: # 000000;
height: 20px;
)
. hide (
display: none;
)
. show (
display: block;
)
a (cursor: hand)
8. Click the SAVE TEMPLATE
The following code above of course is not one hundred percent of the absolute must, but can be adjusted with the conditions of your sidebar blog template.
9. Click the Page Elements
10. Click Add a Page Element
11. Choose HTML / JavaScript
12. Enter the following code:
The following code above of course is not one hundred percent of the absolute must, but can be adjusted with the conditions of your sidebar blog template.
9. Click the Page Elements
10. Click Add a Page Element
11. Choose HTML / JavaScript
12. Enter the following code:
<a class="ddmenu" onclick="showHide('menu1')"> main Menu 1 </ a>
<div id="menu1" class="hide">
<a href="#" class="ddlist"> Link 1 </ a>
<a href="#" class="ddlist"> Link 2 </ a>
<a href="#" class="ddlist"> Link 3 </ a>
<a href="#" class="ddlist"> Link 4 </ a>
</ div>
<a class="ddmenu" onclick="showHide('menu2')"> main Menu 2 </ a>
<div id="menu2" class="hide">
<a href="#" class="ddlist"> Link 1 </ a>
<a href="#" class="ddlist"> Link 2 </ a>
<a href="#" class="ddlist"> Link 3 </ a>
<a href="#" class="ddlist"> Link 4 </ a>
</ div>
<a class="ddmenu" onclick="showHide('menu3')"> main Menu 3 </ a>
<div id="menu3" class="hide">
<a href="#" class="ddlist"> Link 1 </ a>
<a href="#" class="ddlist"> Link 2 </ a>
<a href="#" class="ddlist"> Link 3 </ a>
<a href="#" class="ddlist"> Link 4 </ a>
</ div>
14. Click the Save Changes
15. Well Done. Finish
How it easy,,right???
Just simple like that,,,
15. Well Done. Finish
How it easy,,right???
Just simple like that,,,
Let's try it now,,,
