Adaptive icon menu with submenus

I'm looking to create an icon menu with a submenu that expands upon click using HTML and CSS. Here's the design I have in mind

I want the submenu to appear on the next row of the responsive div, as shown in the image above. However, the issue I'm facing is that the submenu appears on the next line while the rest of the parent menu goes under it, as seen in the image below: This is the problem I've utilized Bootstrap 4 and the following HTML:

<div class="icon-bar" id="myGroup">
    <a class="btn btn-primary" href="index.html" data-toggle="collapse" role="button" aria-expanded="false">
        <i class="menu-icon mdi mdi-television fa-4x"></i>
        <br>
        <span class="menu-title">Dashboard</span>
    </a>

    <a class="btn btn-primary" data-toggle="collapse" href="#Authentication" role="button" aria-expanded="false" aria-controls="collapseExample1">
        <i class="menu-icon fa fa-handshake-o fa-4x"></i>
        <br>
        <span class="menu-title">Authentication</span>
    </a>

    <div class="collapse" id="Authentication" data-parent="#myGroup">
        <div class="card card-body">

            <a class="btn btn-primary btnsubmenu" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
                <i class="fa fa-angle-right fa-4x" aria-hidden="true"></i>
                <br>
                <span class="menu-title">Groups</span>
            </a>

            <a class="btn btn-primary btnsubmenu" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
                <i class="fa fa-angle-right fa-4x" aria-hidden="true"></i>
                <br>
                <span class="menu-title">Users</span>
            </a>
        </div>
     </div>

     <a class="btn btn-primary" href="pages/entity-profile-list.html" role="button" data-toggle="collapse"  aria-expanded="false" >
         <i class="menu-icon mdi mdi-television fa-4x"></i>
         <span class="menu-title">Entity Profile</span>
     </a>

     <a class="btn btn-primary" data-toggle="collapse" href="#objectProfile" role="button" aria-expanded="false" aria-controls="objectProfile">
         <i class="menu-icon fa fa-object-group fa-4x" aria-hidden="true"></i>
         <br>
         <span class="menu-title">Object Profiles</span>
     </a> .......

Looking for assistance on this. View JSFiddle

htmlcssbootstrap-4

Answer №1

This method is a bit rough and may not be foolproof, but it can provide some insight in the right direction. The main goal here is to reposition the anchor elements or adjust the "opening menu" to a more suitable location.

function relocateElement(element){
    var element = $(element),
        elemWidth = element.outerWidth(),
        rightSpace = ($('#myGroup').width() - (element.offset().left + element.outerWidth())),
        idx = parseFloat(rightSpace / elemWidth).toFixed(0),
        moveelem = $(element).nextAll().slice(1,idx);

    var objectProfile = $('#objectProfile');

        element.after(moveelem);

    objectProfile.after()

}


$('#myGroup > .btn.btn-primary').on('click', function(el){
    relocateElement($(this));
})

Check out the improved fiddle here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Query inputting time displaying additional numerical values beyond just minutes

I am adding a time field to a table with a length of 6 in the database. Utilizing the Tempos Dominus Bootstrap library for the time within the form HTML Form <div class="form-group"> <label for="time">Hora</label> ...

htmlsql

Code written in Javascript runs before any CSS files are downloaded and processed

While researching async scripting in web applications, I stumbled upon an interesting article. Essentially, it suggests that JavaScript scripts are not executed until all stylesheet CSS files are downloaded and parsed. Intrigued by this concept, I decided ...

cssasynchronouspreloadlighthouse

Tips for rearranging sibling divs while maintaining the order of their child elements

Is there a way to shuffle the order of div classes shuffledv, while maintaining the same order of id's each time the page is refreshed? <div class="shuffledv"> <div id="2"></div> <div id="3"></div> <div id="1">< ...

javascriptjqueryhtmlcss

Preventing PHP function calls from halting page loading without refreshing

I have encountered an issue while attempting to call a PHP function from my HTML code. My PHP script primarily connects to a Java server to request information about Twitter accounts. I am specifically asking for their profile picture's URL and their ...

phphtml

Update each initial .not('class') using Jquery

My attempt at creating a live search with an effect in jQuery is proving to be challenging as I am struggling to capture the first word in the text. I have attempted to wrap each word in a span like this: <span class="word word-this" id="word-#" aria-h ...

jquerycssjquery-selectorsunrecognized-selectorlivesearch

Add the onmouseover attribute to dynamically alter the text

I'm trying to add the onmouseover function to the image of Angelina Jolie in order to change the text above, which currently says "Your Daily Dose of Contrabang". What is the best way to achieve this? Thank you for your assistance. You can check out t ...

htmlcss

When the class is not present, simply scroll to the specified div

Having trouble getting the jQuery scroll to function properly in the following code snippet. Essentially, I want to display a button named #checking when the class k.state-disabled is not active. After the button is displayed for the first time, I aim to ...

jqueryhtmlcss

Obtain the value of a two-handle slider using jQuery

Here is the HTML and JS setup I have for implementing a jQuery two-handle range slider: .html <p> <input class="amount" readonly style="border:0; color:black; background: transparent; text-align: center;" type="text"> </p> <div cla ...

javascriptjqueryhtmljquery-ui-slider

Incorporating HTML themes within ReactJS

While I am still relatively new to ReactJS, I am eager to expand my understanding of it with this question. I have a preexisting HTML/CSS theme that I would like to integrate into a React application. Is there a method to incorporate this theme seamlessly ...

javascripthtmlreactjs

What is the best way to choose the first parent element that includes a specific class within it?

I am searching for a method to identify the initial parent element that includes another element with a specified class within it. For instance: <div class="wrapper"> <div class="item"> <div class="inner-eleme ...

css

An image overlaying a background design featuring a navigation bar and company logo

Is there a way to stack images on a background image similar to this using HTML? There is also a navbar and logo on the background. I attempted to do something like this: //clearfix .image-stack::after { content: ' '; display: table; clear ...

htmlcsssass

Divide data into an HTML table and merge it with header information

My HTML form contains an interactive HTML table where users can add/delete rows. I am sending this data to a Google Sheet and need to store the row information with corresponding header details. Each time a user submits the form, a new row is added to the ...

javascriptjqueryhtmlajaxgoogle-apps-script

Limit Range of jQuery UI Slider Button

How can I modify the jQuery UI slider range to keep the button within the slider div and prevent it from overlapping as shown in the screenshots below? https://i.sstatic.net/odG3o.png https://i.sstatic.net/aiGxr.png ...

javascriptjquerycssuser-interfaceslider

Radio boxes vanish in Safari when -webkit-perspective is applied

Check out this quick demonstration on Safari only: http://jsfiddle.net/2late2die/8AJnD/ If you remove the perspective style, all checkboxes will appear normal. When using -webkit-transform-style:preserve-3d, the checkboxes disappear. This issue seems to af ...

csswebkitsafaricss-transforms

Interactive pop-up windows in Bootstrap

I encountered an issue with bootstrap modal forms where the form displays correctly after clicking on the button, but the area in which the form is displayed gets blocked! It's difficult to explain, but you can see the problem by visiting this link. ...

javascriptjqueryhtmltwitter-bootstrap

What is the best way to assign a JavaScript return value to a PHP variable?

Is it possible to capture the return value of a JavaScript function that checks if text boxes are empty and assign it to a PHP variable? I have successfully created a JavaScript function that returns false if any of the text boxes are empty, but now I ne ...

javascriptphphtml

Pressing the icon will trigger a top-sliding dropdown mobile menu to appear

How can I ensure my mobile dropdown menu slides in from the top when the user clicks the "header-downbar-menu" icon and slides out to the top when clicked again? Currently, the button only shows the menu but I am struggling with writing the JavaScript for ...

javascripthtmlcssdropdown

"Utilizing the appendTo attribute in primeNG within a ContextMenu component - A step-by-step guide

Currently, I am attempting to utilize the appendTo attribute within the ContextMenu component. My intention is to associate this behavior with a specific element, such as a div. ...

htmlprimeng

The clarity of an HTML input field is still unclear despite attempting to clear it using the clear()

When I created a form in HTML using PHP, AJAX, JavaScript, and jQuery, I encountered an issue where after entering data and updating it in the database, the input fields were not being cleared. I tried using clear() in JavaScript but it didn't work. C ...

javascriptjqueryhtml

Is there a way to automatically override the CSS cursor style?

Issue with SCSS styling on image link I attempted to modify the cursor style from pointer to default, but after saving and reloading my React app, the change did not take effect. I tried writing some code, but it seems that Stack Overflow is indicating an ...

javascripthtmlcssreactjssass