How to design a collapsable menu in sharepoint 2013 using sharepoint designer - sharepoint-2013

Question

i need to make a menu where once a menu is clicked it will span to show sub menu and i need to add styles and colors as well. i am new to sharepoint so please elaborate in details where to write code and in which language. responses will be highly appreciated.

Answer 1

A very smooth and simple way to do this is by adding a Script Editor webpart to the page.
Inside that content editor, you can use a the jQuery Accordion menu. The code just "works" so all you need to do is fill in the HTML section for the names of the menu items and links to where they go.
Here's the code you would place in the webpart and change the links to be your own:
<div id="w">
<nav>
<ul id="nav">
<li>Animation
<ul>
<li>Cartoons</li>
<li>Comic Strips</li>
<li>Video Clips</li>
<li>Web GIFs</li>
</ul>
</li>
<li>Graphic Design
<ul>
<li>Adobe Photoshop</li>
<li>Branding & Logos</li>
<li>Digital Marketing</li>
<li>Illustrations</li>
<li>Infographics</li>
<li>Product Design</li>
</ul>
</li>
<li>Digital Photography
<ul>
<li>Cityscapes</li>
<li>Oceans</li>
<li>Wide-Angle Lens</li>
<li>Wildlife</li>
</ul>
</li>
<li>Print & Identity
<ul>
<li>Branding</li>
<li>Business Cards</li>
<li>Letterpress</li>
<li>Poster Art</li>
</ul>
</li>
<li>Programming
<ul>
<li>CSS3</li>
<li>HTML5</li>
<li>JavaScript & jQuery</li>
<li>MySQL Databases</li>
<li>Wordpress CMS</li>
</ul>
</li>
<li>Web Design
<ul>
<li>Icons</li>
<li>Tutorials</li>
<li>User Interfaces</li>
<li>Website Layouts</li>
</ul>
</li>
</ul>
</nav>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- <script type="text/javascript" language="javascript" charset="utf-8" src="nav.js"></script> -->
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
$(document).ready(function(){
$("#nav > li > a").on("click", function(e){
if($(this).parent().has("ul")) {
e.preventDefault();
}
if(!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
$("#nav li ul").slideUp(350);
$("#nav li a").removeClass("open");
// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("open");
}
else if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(350);
}
});
});
</script>
<style>
ol, ul, li {
padding: 0;
}
menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
h1 { font-family: 'Merienda', 'Trebuchet MS', Verdana, sans-serif; font-size: 2.95em; line-height: 1.7em; margin-bottom: 20px; font-weight: bold; letter-spacing: -0.03em; color: #675d90; text-shadow: 2px 2px 0px rgba(255,255,255,0.65); text-align: center; }
#w { display: block; width: 740px; margin: 0 auto; padding-top: 45px; }
/* nav menu styles */
#nav {
display: block;
width: 280px;
margin: 0 auto;
-webkit-box-shadow: 3px 2px 3px rgba(0,0,0,0.7);
-moz-box-shadow: 3px 2px 3px rgba(0,0,0,0.7);
box-shadow: 3px 2px 3px rgba(0,0,0,0.7);
}
#nav li { }
#nav > li > a {
display: block;
padding: 16px 18px;
font-size: 1.3em;
font-weight: bold;
color: #d4d4d4;
text-decoration: none;
border-bottom: 1px solid #212121;
background-color: #343434;
background: -webkit-gradient(linear, left top, left bottom, from(#343434), to(#292929));
background: -webkit-linear-gradient(top, #343434, #292929);
background: -moz-linear-gradient(top, #343434, #292929);
background: -ms-linear-gradient(top, #343434, #292929);
background: -o-linear-gradient(top, #343434, #292929);
background: linear-gradient(top, #343434, #292929);
}
#nav > li > a:hover, #nav > li > a.open {
color: #e9e9e9;
border-bottom-color: #384f76;
background-color: #6985b5;
background: -webkit-gradient(linear, left top, left bottom, from(#6985b5), to(#456397));
background: -webkit-linear-gradient(top, #6985b5, #456397);
background: -moz-linear-gradient(top, #6985b5, #456397);
background: -ms-linear-gradient(top, #6985b5, #456397);
background: -o-linear-gradient(top, #6985b5, #456397);
background: linear-gradient(top, #6985b5, #456397);
}
#nav li ul { display: none; background: #4a5b78; }
#nav li ul li a {
display: block;
background: none;
padding: 10px 0px;
padding-left: 30px;
font-size: 1.1em;
text-decoration: none;
font-weight: bold;
color: #e3e7f1;
text-shadow: 1px 1px 0px #000;
}
#nav li ul li a:hover {
background: #394963;
}
</style>