LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML-CSS-PHP-JavaScript / JavaScript Codes » Show/Hide Child Sub-Menu Vertically Using Pure JavaScript

Show/Hide Child Sub-Menu Vertically Using Pure JavaScript

Show-Hide-Child-Sub-Menu-Vertically-Using-Pure-JavaScript
Do you have many menus to view in your sidebar and have to save web page space on your blog or website too to make it look better then the first step is to organize your menu links under category so it will be easy for user to go to their desire link easily and that is good for SEO too.

Now after having category, its time to save lengthy menu bar space by shrinking the category menus under their category title so here we are with a little snippet that will automatically hide your sub menu and will let the user to view if he want.

Now there are many snippet available online or on many others Blog and website but every one is not able to optimize your blog or website so your need some optimized code snippet. So now checkout out code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.

Features:

1.) Pure JavaScript Added.
2.) No JQuery File.
3.) Simple HTML-CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

Recommended For You:
Add Multiple File Upload HTML Tag In Form Using Pure JavaScript

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

CSS:

<style>
ul.exe_vertical {padding:10px;background:#000000;color:#FFFFFF;padding:5px!important;}
ul.exe_vertical li .show {float:right;cursor:pointer;}
ul.exe_vertical a {color:#FFFFFF;font-size:14px;line-height:24px;text-decoration:none;}
ul.exe_vertical li:first-child {border-top:1px solid #131313;}
ul.exe_vertical li {list-style-type:none;padding:7px 5px;border-bottom:1px solid #131313;}
ul.exe_vertical li ul li{padding:1px 5px;}
ul.exe_vertical li ul li:hover{background:#006666;}
ul.exe_vertical li:hover {background:#008888;}
</style>

JavaScript:

<script>
/* Show/Hide Child Menu Vertically
----------------------------------------------- */
function showChild(para_meter) {
var show_list = para_meter.parentNode.getElementsByClassName("children")[0];
if (show_list.style.display == "none"){
show_list.style.display = "block";
para_meter.parentNode.getElementsByTagName("span")[0].innerText = "[-]";
} else {
show_list.style.display = "none";
para_meter.parentNode.getElementsByTagName("span")[0].innerText = "[+]";
}
}
</script>

HTML:

<ul class="exe_vertical">
<a href="dashboard.php" title="Main Menu"><li>Dashboard</li></a>
<li>
<span class="show" onclick="showChild(this)">[+]</span>
<a href="godowndashboard.php">Sub Menu</a>
<ul class="children" style="display: none;">
<li><a href="" title="">Sub Menu 1</a></li>
<li><a href="" title="">Sub Menu 2</a></li>
<li><a href="" title="">Sub Menu 3</a></li>
</ul>
</li>
<li>
<span class="show" onclick="showChild(this)">[+]</span>
<a href="saledashboard.php">Sub Menu</a>
<ul class="children" style="display: none;">
<li><a href="" title="">Sub Menu 1</a></li>
<li><a href="" title="">Sub Menu 2</a></li>
<li><a href="" title="">Sub Menu 3</a></li>
</ul>
</li>
<li>
<span class="show" onclick="showChild(this)">[+]</span>
<a href="servicedashboard.php">Sub Menu</a>
<ul class="children" style="display: none;">
<li><a href="" title="">Sub Menu 1</a></li>
<li><a href="" title="">Sub Menu 2</a></li>
<li><a href="" title="">Sub Menu 3</a></li>
</ul>
</li>
<a href="" title=""><li>Main Menu</li></a>
</ul>

Customization:

1.) Edit Your JavaScript As Per Your Requirements. Rest Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Hap

Recommended For You:
How To Create A Simple Pure CSS Parallax Effect?

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *