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?
 
Steve BinkConnect With a Mentor Commented:
I edited the same example from earlier:

https://jsfiddle.net/zot7jyhg/15/
0
 
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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Slick812Connect With a Mentor Commented:
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.