Create a vertical menu and submemu

Hello,

  need some help creating a vertical  menu .. I have attached  a picture of example

basically

HOME
MENU1       ^
     submenu1
     submenu11
MENU2       ^
    submenu 2
    submenu 21
MENU3
MENU4

I created  a Pinkr as a starting point http://plnkr.co/edit/xrE3oYc5AeKBLdQ73mAI?p=preview  . However not  sure how  to get the arrow and the click action (the example expand  on hover)

Thanks for your help
Screen-Shot-2018-01-29-at-10.33.41-P.png
chand pbAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
you can find lot of FREE jQuery vertical menu rerad yto use.
just use google
you can also use jQuery accordion
0
Steve BinkCommented:
Take a look here for a working example:  

https://jsfiddle.net/zot7jyhg/10/
http://plnkr.co/edit/diBhBmxcg9nkksE9qkM3

Note this is using jQuery.
0
Slick812Commented:
greetings  chand pb , , , I looked at the code you have in the plinkr link you gave, and I have made a vertical menu that looks like what have there, but I did change a few things, I added some CSS Down Arrows for the drop down menu items "job deck" and "search", I added a left margin to the drop-downs, to distinguish the drops from the mains, Because touch screens do NOT have any "Mouse Over" or hover, I did NOT use the hover to display the drops. Instead I have javascript to touch-click the drop down menu items "job deck" and "search" and show the drops for that menu section, code below -

<!DOCTYPE html><html lang="en"><head><title>Menu Drop Child</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />


<style>
	
#ver-menu {
max-width: 417px;	
}

#ver-menu a, #ver-menu em{
display: block;
color: #fff;
text-transform: uppercase;
padding: 10px 0px 8px 20px;
border-bottom: 1px solid #fff;
text-decoration: none;
background: teal;
}

#ver-menu em{
cursor: s-resize;
}

#ver-menu a:hover {
background: blue;
}

#ver-menu em:hover {
background: green;
}

#ver-menu p {
margin: 0;
display: none;	
}

#ver-menu p a{
margin-left: 14px;	
}

.arrowD {
border: 6px solid transparent;
margin-top: 4px;
margin-right: 7px;
text-align: center;
display: inline-block;
border-bottom: none;
border-top-color: white;
float: right;
}

</style>
</head>
<body>
<h3>Drop Child menu</h3>


<div id="ver-menu">
<a href="#">home</a>
<em><i class="arrowD"></i>job deck</em>
<p>
<a href="#">item 1</a>    
<a href="#">item 2</a>
<a href="#">item 3</a>
<a href="#">item 4</a>
</p>
<em><i class="arrowD"></i>search</em>
<p>
<a href="#">item a</a>    
<a href="#">item b</a>
</p>
<a href="#">favorite</a>
<a href="#">steeings</a>
</div>

<script>
var vMenu = document.getElementById("ver-menu");
var ems = vMenu.getElementsByTagName("em");
for (var e=0; e< ems.length;++e) {
  ems[e].onclick = function() {
  var ne = this.nextElementSibling.style;
  if (ne.display == "block") ne.display = "none"; else
  ne.display = "block";
  }
  }
</script>

</body>
</html>

Open in new window


The above code is a basic simple arrangement and javascript,  but depending on other things that may or may not be needed, it can be changed to what may be needed. See if you understand what I did on this thing, and how you can use it on a page. Ask questions if you need more.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

chand pbAuthor Commented:
Thanks for the help...

is it possible
1:  To only expand a single category and collapse the other ones.
2: Initially expand the "search" category
3: Would it be better to user an accordion layout

Thanks again for the help
0
Steve BinkCommented:
I edited the same example from earlier:

https://jsfiddle.net/zot7jyhg/15/
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
chand pbAuthor Commented:
Thanks you Steve,,,

One more question...

Is it possible to used div's instead of the UL/LI tag.. I am using ng-click . So, when the user click a div I want perform some action,,,

I know in the initial example I have UL/LI tag. The reason for my question is that today my app has a menu with standard div.. example

 <div class="menu-item" ng-click="menuNavigate(false, 'home')">
                <span>home</span>
            </div>

I post a jsfiddle with my  outline today  --https://jsfiddle.net/premtemp/nLq9hL1c/14/

Also, since you used Jquery, I guess we can use the animate to roll-up and down of the menu,,

Thanks for your help
0
Steve BinkCommented:
It is possible to use div elements instead, though you will need to style them to appear as you want.  Also be aware of interactions between the frameworks you use and any custom code you put in (e.g., ng-click vs jquery or the manual animation I created in the example).  I recommend doing as much as possible in your chosen library before adding custom code.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.