bellow screenshot is an example and that's what we are going to work on.
This click menu is far different from drop menu even though they have the same function.Some bloggers prefer one to the other while some do make use of the two.
To set this click able menu use bellow code in your HTML/WML code section on any page you want it to show up.Also don't forget to replace all the forum IDs in the bellow code to your own forum IDs for a proper landing page.
<p align="center"><div style="background-color: #169DD2; padding: 8px; color: #fff; font-size: 20px; text-align: left; margin-bottom: 5px;">Sections</div>
<style>
.mya{
float: left;
margin-right: 2px;
margin-bottom: 2px;
padding: 4px 8px;
color: #FFFFFF;
}
</style>
<a class="mya" style="background-color: #000;" href="forum2_113133722.xhtml"><img src="https://cdn4.iconfinder.com/data/icons/devine_icons/Black/PNG/System%20and%20Internet/JAVA.png" width="20px" height="20px"/><b> <font color="white">
General</font></b></a>
<style>
.mya{
float: left;
margin-right: 2px;
margin-bottom: 2px;
padding: 4px 8px;
color: #FFFFFF;
}
</style>
<a class="mya" style="background-color: #F87217;" href="forum2_113133723.xhtml"><img src="https://cdn4.iconfinder.com/data/icons/devine_icons/Black/PNG/System%20and%20Internet/JAVA.png" width="20px" height="20px"/><b> <font color="white">
Education</font></b></a>
<style>
.mya{
float: left;
margin-right: 2px;
margin-bottom: 2px;
padding: 4px 8px;
color: #FFFFFF;
}
</style>
<a class="mya" style="background-color: #EAC117;" href="forum2_113133724.xhtml"><img src="https://cdn4.iconfinder.com/data/icons/devine_icons/Black/PNG/System%20and%20Internet/JAVA.png" width="20px" height="20px"/><b> <font color="white">
Business</font></b></a>
<style>
.mya{
float: left;
margin-right: 2px;
margin-bottom: 2px;
padding: 4px 8px;
color: #FFFFFF;
}
</style>
<a class="mya" style="background-color: #59983b;" href="forum2_113133725.xhtml"><img src="https://cdn4.iconfinder.com/data/icons/devine_icons/Black/PNG/System%20and%20Internet/JAVA.png" width="20px" height="20px"/><b> <font color="white">
Love & Relationship Tips</font></b></a>
<style>
.mya{
float: left;
margin-right: 2px;
margin-bottom: 2px;
padding: 4px 8px;
color: #FFFFFF;
}
</style>
<a class="mya" style="background-color: #F52887;" href="forum2_113133726.xhtml"><img src="https://cdn4.iconfinder.com/data/icons/devine_icons/Black/PNG/System%20and%20Internet/JAVA.png" width="20px" height="20px"/><b> <font color="white">
Free Browsing</font></b></a>
<style>
.mya{
float: left;
margin-right: 2px;
margin-bottom: 2px;
padding: 4px 8px;
color: #FFFFFF;
}
</style>
<a class="mya" style="background-color: #FF0000;" href="forum2_113133727.xhtml"><img src="https://cdn4.iconfinder.com/data/icons/devine_icons/Black/PNG/System%20and%20Internet/JAVA.png" width="20px" height="20px"/><b> <font color="white">
Webmasters</font></b></a>
<style>
.mya{
float: left;
margin-right: 2px;
margin-bottom: 2px;
padding: 4px 8px;
color: #FFFFFF;
}
</style>
<a class="mya" style="background-color: #0000FF;" href="forum2_113133728.xhtml"><img src="https://cdn4.iconfinder.com/data/icons/devine_icons/Black/PNG/System%20and%20Internet/JAVA.png" width="20px" height="20px"/><b> <font color="white">
Entertainment</font></b></a>
<style>
.mya{
float: left;
margin-right: 2px;
margin-bottom: 2px;
padding: 4px 8px;
color: #FFFFFF;
}
</style>
<a class="mya" style="background-color: #000;" href="forum2_113133729.xhtml"><img src="https://cdn4.iconfinder.com/data/icons/devine_icons/Black/PNG/System%20and%20Internet/JAVA.png" width="20px" height="20px"/><b> <font color="white">
Programming</font></b></a>
<style>
.mya{
float: left;
margin-right: 2px;
margin-bottom: 2px;
padding: 4px 8px;
color: #FFFFFF;
}
</style>
<a class="mya" style="background-color: #A74AC7;" href="forum2_113141040.xhtml"><img src="https://cdn4.iconfinder.com/data/icons/devine_icons/Black/PNG/System%20and%20Internet/JAVA.png" width="20px" height="20px"/><b> <font color="white">
News</font></b></a></p>
Hope you find this useful more on the way . Loading....