Need some CSS help in dynamic vertical menu and sub-menu display

HTML & CSS
1

I have a list of category and sub-category display in which the subcategory open on click of a button I have created the HTML structure for that, but I am not able to figure out the CSS for that. If submenu is not open then It’s just like a normal menu with header and menu items

If sub-menu is open
If the sub-category section is open. Then the display area of Header increases and the category below the category having sub-category shifts down like:-

dummyPaint
dummyPaint703×605 3.33 KB

Can I please get any Help with CSS for this kind of structure.

My HTML structure

<div class="header">
    <div class="HeaderTitle">Heading</div>
    <nav class="navigation">
        <ul class="mainmenu">
            <li><p>Title1</p></li>
            <li><p>Title2</p></li>
            <li><p>Title3 </p>
                <ul class="submenu">
                    <li><span>SubTitle1</span></li>
                    <li><span>SubTitle2</span></li>
                    <li><span>SubTitle3</span>
                    </li>
                </ul>
            </li>
            <li><p>Title4</p></li>
            <li><p>Title4</p></li>
        </ul>
    </nav>
</div>

Please help I am really stuck

2

If the Sub-menu is not open then it looks like:-
dummy2

3

Hi there arpitdadheech,

and a warm welcome to these forums. :winky:

You can see the basic structure for the layout here…

https://codepen.io/coothead/full/yLegVBr

…and the code used here…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>list layout using display: flex</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.5em sans-serif;
 }
 
h1 {
	color: #444;
	text-align: center;
	text-transform: capitalize;
 }

#titles {
	display: flex;
	flex-direction: column;
}

#titles h2 {
	margin: 0;
	padding: 1.5em 1em;
	border: 1px solid #000;
	background-color: #fff;
	font-size: 1em;
	font-weight: normal;
 }

#titles ul {
	margin: 0; 
	padding: 0;
	list-style: none;
 }

#titles li {
	margin: 0.5em 0;
	padding: 0.5em 1em;
	border: 1px solid #000;
	background-color: #fff;
 }

#titles > ul > li:nth-of-type(3) {
	display: flex;
	padding: 0;
	border: 0;
    outline: 0;
	background-color: transparent;
 }

#titles > ul > li:nth-of-type(3) div {
	flex: 1;
 }

#titles > ul > li:nth-of-type(3) span {
	display: block; 
	padding: 0.5em 1em;
	border: 1px solid #000;
	background-color: #fff;
 }

#titles > ul > li > ul {
	display: none;
	flex: 1;
 }

#titles > ul > li > ul > li:first-of-type {
	margin-top: 0;
 }
 #titles > ul > li > ul > li:last-of-type {
	margin-bottom: 0;
 }

#titles > ul > li:nth-of-type(3):hover > div,
#titles > ul > li:nth-of-type(3):active > div,
#titles > ul > li:nth-of-type(3):focus > div {
	margin-right: 0.5em;
 }

#titles > ul > li:nth-of-type(3):hover > ul,
#titles > ul > li:nth-of-type(3):active > ul,
#titles > ul > li:nth-of-type(3):focus > ul {
	display: block;
 }
</style>

</head>
<body>

<h1>page description</h1>

<div id="titles">

 <h2>Heading</h2>

  <ul>
   <li>Title1</li>
   <li>Title2</li>
   <li tabindex="0"><div><span>Title3</span></div> 
    <ul>
     <li>SubTitle1</li>
     <li>SubTitle2</li>
     <li>SubTitle3</li>
    </ul>
   </li>
   <li>Title4</li>
   <li>Title4</li>
  </ul>

</div>

</body>
</html>

coothead

1 Like
4

I think you miss interpreted the question. The <li> should be in 50%width and the sub menu open in the next 50% width

6

In that case it is not “some CSS help” that you
need, but actually some JavaScript help. :biggrin:

coothead

1 Like
7

As @coothead said the easiest approach would be to use JS add a class to the main parent when you click the button and control the widths via that dynamic class in css. I assume you already have some js to click open the menu anyway?

It can be done using the checkbox hack but is a little convoluted.

I kept it more or less to your html but with the additions of the labels, checkboxes and id and classes etc.

1 Like
8

It is amazing man. Thanks a lot.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.