Countries
Europe
Germany
Austria
Spain
Asia
Japan
Korea
Taiwan
Last year, I started a blog about travel.
I posted and posted and I had problem:
My landing page got so messy with all this posts.
How do we organize a messy site?
Drop down menu is the answer!
In order to create a drop down menu, you need the addEventListener of JavaScript. In the example above, when you put the mouse pointer on Europe or Asia which are put inside the div element "dropdown37_1" another box including the country names will appear.
Each box is created with a div comprising the country names which are also put inside div elements. Always nest the lists inside the parent element otherwise the event will not function properly.
First, I tried to make 3 parent boxes but it got all jiggly when I put the pointer on the boxes. Only the "dropdown37_1" div element should be visible so the other elements' visibility are set to hidden with "visibility:hidden" in the CSS code. Through the events "mouseenter" and "mouseleave", the elements become visible or invisible.
Here is the syntax for the event:
var x=document.getElementById ("the ID of the affiliated element");
x.addEventListener("mouseenter or mouseleave",
function(){details about what CSS property needs to be changed;},
false};
Much to my chagrin, the code didn't work on my iPod!
Thankfully, the solution was easy. Just add another code replacing "mouseenter" with "touchstart" and "mouseleave" with "touchmove". Maybe it's not the best solution but it did work properly. Well, for all the details check out the code below.
I posted and posted and I had problem:
My landing page got so messy with all this posts.
How do we organize a messy site?
Drop down menu is the answer!
In order to create a drop down menu, you need the addEventListener of JavaScript. In the example above, when you put the mouse pointer on Europe or Asia which are put inside the div element "dropdown37_1" another box including the country names will appear.
Each box is created with a div comprising the country names which are also put inside div elements. Always nest the lists inside the parent element otherwise the event will not function properly.
First, I tried to make 3 parent boxes but it got all jiggly when I put the pointer on the boxes. Only the "dropdown37_1" div element should be visible so the other elements' visibility are set to hidden with "visibility:hidden" in the CSS code. Through the events "mouseenter" and "mouseleave", the elements become visible or invisible.
Here is the syntax for the event:
var x=document.getElementById ("the ID of the affiliated element");
x.addEventListener("mouseenter or mouseleave",
function(){details about what CSS property needs to be changed;},
false};
Much to my chagrin, the code didn't work on my iPod!
Thankfully, the solution was easy. Just add another code replacing "mouseenter" with "touchstart" and "mouseleave" with "touchmove". Maybe it's not the best solution but it did work properly. Well, for all the details check out the code below.
No comments:
Post a Comment