In this particular example, I have structured a header with a logo-container positioned on the left side, a menu in the center, and a button on the right. The menu consists of 5 top-level items and 2 sub-menus.
<div class="container">
<div class="logo_container">
<img src="logo.png" />
</div>
<div id="top-navigation">
<div id="top-menu-nav">
<ul id="top-menu">
<li class="top-item">Top Item 1</li>
<li class="top-item">Top Item 2
<ul>
<li class="sub-item">Sub-Item 1</li>
<li class="sub-item">Sub-Item 2</li>
<li class="sub-item">Sub-Item 3</li>
<li class="sub-item">Sub-Item 4</li>
</ul>
</li>
<li class="top-item">Top Item 3
<ul>
<li class="sub-item">Sub-Item 5</li>
<li class="sub-item">Sub-Item 6</li>
<li class="sub-item">Sub-Item 7</li>
<li class="sub-item">Sub-Item 8</li>
</ul>
</li>
<li class="top-item">Top Item 4</li>
<li class="top-item">Top Item 5</li>
</ul>
</div>
<ul id="menu-button">
<li class="menu-button-cta">Button</li>
</ul>
</div>
</div>
To adjust the width of the parent element based on the number of top-level items in the menu as they are added or removed, various CSS properties can be utilized. For instance:
<ul id="top-menu">has 5<li class="top-item">=.container {width: 100%;}<ul id="top-menu">has 4<li class="top-item">=.container {width: 90%;}<ul id="top-menu">has 3<li class="top-item">=.container {width: 80%;}
If you wish to achieve this dynamic adjustment using either CSS or jQuery, it is definitely achievable through appropriate coding techniques and methods.