Implementing a breadcrumb-style back button using jQuery

The menu is currently displayed on the left side without any issues. My next task involves implementing a back button functionality. When a user clicks from Demo1 to Demo 1.1, additional options like Demo 1.1.1 and Demo 1.1.2 will appear. To facilitate navigation, I plan to include a back button at the top of the menu structure:

//back
Demo1->Demo 1.1

//dropdown
Demo 1.1.1
Demo 1.1.2
Demo 1.1.3
Demo 1.1.4

Note: The menu is fully dynamic, hence static values are to be avoided.

$('.menu-item-has-children .sub-menu').css({
  'left': '-320px'
});

$('.menu-item-has-children > a').click(function() {
  //alert('hello');

  var positionMenu = $(this).parent().attr('id');
  //console.log(positionMenu); 
  $('.menu-item-has-children[id=' + positionMenu + '] > .sub-menu').css({
    'left': '0px'
  });
  var pMenu1 = $(this).text();
  console.log(pMenu1);
  $('.secondary').prepend(pMenu1);
});
ul {
  padding-left: 0;
}

.secondary {
  z-index: 99;
  background: #f8f8f8;
  -webkit-box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
  box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
  -webkit-transition: left 0.2s ease, width 0.2s ease;
  transition: left 0.2s ease, width 0.2s ease;
  border-right: 1px solid #eaedf1;
  position: fixed;
  top: 0;
  height: 100%;
  padding: 12px;
  width: 320px;
}

.menu li {
  padding-bottom: 10px;
  padding-left: 23px;
  list-style: none;
}

.menu-item-has-children>a {
  position: relative;
  display: block;
}

.menu-item-has-children .sub-menu {
  width: 100%;
  height: 100%;
  padding-top: 40px;
  background: #f8f8f8;
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: left .3s;
  z-index: 10;
}

.menu-item-has-children>a::after {
  display: inline-block;
  vertical-align: middle;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
  position: absolute;
  right: 05px;
  top: 0px;
  font-size: 12px;
}
<script src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous"></script>

<div class="secondary">
  <ul id="menu-inner-page-menu" class="menu">
    <li>Home</li>
    <li id="menu-item-204" class="menu-item-has-children"><a href="#">Demo1</a>
      <ul class="sub-menu">
        <li id="menu-item-304" class="menu-item-has-children"><a href="#">Demo 1.1</a>
          <ul class="sub-menu">
            <li><a href="">Demo 1.1.1</a></li>
            <li><a href="">Demo 1.1.2</a></li>
            <li><a href="">Demo 1.1.2</a></li>
          </ul>

        </li>
        <li id="menu-item-305"><a href="">Demo 1.2</a></li>
        <li id="menu-item-306"><a href="">Demo 1.3</a></li>
        <li id="menu-item-307"><a href="">Demo 1.4</a></li>
      </ul>
    </li>

    <li id="menu-item-205" class="menu-item-has-children"><a href="#">Demo2</a>
      <ul class="sub-menu">
        <li id="menu-item-315"><a href="">Demo 2.1</a></li>
        <li id="menu-item-316"><a href="">Demo 2.2</a></li>
      </ul>
    </li>

  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

The output is successfully being logged in the console.

https://i.sstatic.net/2Vxy6.png

The output is also visible in the HTML view source:

https://i.sstatic.net/oCPN0.png

Now, how can the output be made clickable?

javascripthtmljquerycssnav

Answer №1

Here is the HTML code:

<div class="secondary">
    <div id="menu-breadcrumb"></div>
    <ul id="menu-inner-page-menu" class="menu">
        <li>Home</li>
        <li id="menu-item-204" class="menu-item-has-children"><a href="#">Demo1</a>
            <ul class="sub-menu">
                <li id="menu-item-304" class="menu-item-has-children"><a href="#">Demo 1.1</a>
                    <ul class="sub-menu">
                        <li><a href="">Demo 1.1.1</a></li>
                        <li><a href="">Demo 1.1.2</a></li>
                        <li><a href="">Demo 1.1.2</a></li>
                    </ul>

                </li>
                <li id="menu-item-305"><a href="">Demo 1.2</a></li>
                <li id="menu-item-306"><a href="">Demo 1.3</a></li>
                <li id="menu-item-307"><a href="">Demo 1.4</a></li>
            </ul>
        </li>

        <li id="menu-item-205" class="menu-item-has-children"><a href="#">Demo2</a>
            <ul class="sub-menu">
                <li id="menu-item-315"><a href="">Demo 2.1</a></li>
                <li id="menu-item-316"><a href="">Demo 2.2</a></li>
            </ul>
        </li>

    </ul>
</div>

<script src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

The CSS styling for this HTML code is as follows:

ul {
  padding-left: 0;
}

.secondary {
  z-index: 99;
  background: #f8f8f8;
  -webkit-box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
  box-shadow: 0 8px 24px rgba(229, 228, 230, 0.4);
  -webkit-transition: left 0.2s ease, width 0.2s ease;
  transition: left 0.2s ease, width 0.2s ease;
  border-right: 1px solid #eaedf1;
  position: fixed;
  top: 0;
  height: 100%;
  padding: 12px;
  width: 320px;
}

.menu li {
  padding-bottom: 10px;
  padding-left: 23px;
  list-style: none;
}

.... (CSS continues)

This HTML and CSS combination creates a structured menu with sub-menus and stylish design elements.

To see this code in action, you can visit the demo link.

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

Defining columns in jQuery DataTables for handling multiple data fields

Currently, I am utilizing jQuery DataTables with server-side processing for managing my list. However, I have encountered a roadblock in displaying multiple column data from the database within the same column header. How do I go about defining this speci ...

javascriptjquerydatatables

Protractor: Moving further down the page

One issue I encountered is with a button on my page that becomes visible only when the user scrolls down. As a result, Protractor tests are throwing an error: UnknownError: unknown error: Element is not clickable at point (94, 188). I attempted to reso ...

javascriptseleniumtestingscrollprotractor

Download a picture from a website link and transfer it to the IPFS network

Currently, I am facing an issue while attempting to fetch an image from a different website and then uploading it to IPFS using Next.js. Despite configuring CORS in next.config.js to enable the application to retrieve the image, everything seems to be func ...

javascriptaxiosnext.jsipfs

Incorporate action icons (such as edit and delete) into a table in React.js using material-ui

Within my existing table, I utilized a library known as react-bootstrap-table-next This library effectively displays data in a table format with values originating from a JSON response Now, my goal is to integrate an Action column that includes options f ...

javascriptreactjsmaterial-ui

Loop through the mongoose object using EJS

When I insert <%= products %> into my view, it displays [Object Object], indicating that the mongoose resultset is an object. However, when I attempt to iterate over the products object, I receive an error stating products.forEach is not a function. ...

javascriptnode.jsmongodbexpressmongoose

Utilizing AJAX to Redirect to a New Page

I have a situation where I am using ajax to load a form called staff_view.php into main.php. The form loads successfully, but when I try to submit it to staff_post.php, instead of displaying in the console as expected, it redirects to the page. Strangely, ...

phpjqueryajax

How can we smoothly animate scrolling to the top of an element using jQuery?

I am attempting to implement a function where elements scroll to the top with animation upon being clicked. However, I am facing challenges in making this work successfully. You can view my code in action here: https://jsfiddle.net/3dqzsu2m/1/ Here is ...

javascriptjquery

The script loaded using the .load() method encounters failure

After loading a contact page using .load(), I encountered an issue with the script. Here is what it looks like: <script type="text/javascript"> $('#submit').click(function(e){ e.preventDefault(); var name = $('#na ...

javascriptjqueryhtmlajax

Struggling to align radio buttons correctly within the form. The goal is to have them match the alignment of the other text boxes in the form

I have been struggling with aligning radio buttons to match the alignment of the form's text boxes. I've experimented with various solutions recommended on this site, as well as others and YouTube. However, the most helpful resource I found was: ...

htmlcssradio-buttonalignment

Setting up a local development environment for AngularJS

I have been using the boilerplate https://github.com/node90/angular-starter as a foundation for my projects. However, I've noticed that the repository utilizes gulp to consolidate the js files in the 'app' folder into the 'public/js&apo ...

javascriptangularjsnode.js

Divide a string into separate array items where a specific character is found

Within my sentence are several characters (~). I want to split the text before each ~ into an array item, and then add a <br /> tag at the end of each item. I attempted using the replace method but it only worked for the first ~ and disregarded the ...

javascriptjqueryarrays

Designing with CSS: Achieving a full-width background image layered above content below the window

I'm in need of some assistance. Despite my efforts to search and browse forums, I'm unable to find a solution to my problem. I want to design a landing page with a tall background image that spans 100% width and adjusts to both the browser windo ...

htmlimagecss

Is it possible to utilize the YouTube Data API without specifying a redirect_uri? If so, how would one go

After developing a NodeJS application for uploading videos to a YouTube channel via the command line interface, I encountered a challenge. Every upload redirects me to a specific redirect_uri as per Google Docs requirements. To bypass user authorization/s ...

javascriptgoogle-apiyoutube-data-api

Headers cannot be set after they have already been sent and there is also a CASTError occurring, which is indicating a failure in

Encountering 2 errors in the following scenario... Route breakdown: router.post("/event", isLoggedIn, function (req,res){ // get data from form and add to events array var title = req.body.title; var date = req.body.date; var description = req.body.de ...

javascriptnode.jsmongodbmongoose

Navigating with Angular: Understanding ng-view and Routing

How does Angular understand which template view to request containing the 'ng-view' element? If I directly navigate within my application to http://localhost/Categories/List/accessories , a request is still sent to '/' or the index ...

javascriptasp.net-mvcangularjsngroute

Adjust the alignment of cells within a table

Excuse my lack of knowledge, but CSS is still new to me. I'm attempting to align two elements next to each other using display: table. However, the element on the right seems to be lower than the one on the left, and I can't figure out why. . ...

cssalignment

Library for implementing stylish font effects in JavaScript

I remember stumbling upon a unique JavaScript library that enabled users to write text in different styles and formats. Unfortunately, I am having trouble finding it again. Can anyone suggest any helpful links? Thank you, Murtaza ...

javascriptcss

Is there a way to eliminate the "x" in the upper right corner of a Foundation Joyride?

Edit 7/16/15: I decided to place the following code between the <li> tags within the joyride that required the removal of the "x" button: <script>$('.joyride-close-tip').remove();</script> While not the most elegant solution ...

csssasszurb-foundationzurb-joyride

Dynamic form validation using jQuery

I am facing a challenge with validating a dynamic form on the user side. My goal is to ensure that if a user fills out one column in a row, they are required to fill out the remaining columns as well. For example, filling out the CC # should prompt the use ...

javascriptjqueryhtmlformsvalidation

How to ensure that two rows in Vuetify evenly split the screen into two equal halves

I'm struggling with what seems like a simple task. All I want is for the upper half of the v-main to be taken up by one v-row, and the lower half by another v-row. If the content of either row overflows, it should be scrollable. You can view the MWE ...

cssvue.jsvuetify.js