Angular 6 and Bootstrap 4 Collaborate for a Dynamic Multi-Level NavBar

(UPDATE: Issue Resolved - I discovered that I needed to include the JavaScript within $(document).ready(function()), which was previously missing. The example below worked perfectly for me.)

I am attempting to implement a Multi-Level Navbar with Angular 6 & Bootstrap 4.

How can I expand and collapse sub-menus on click or hover? My goal is for the menu to expand towards the right...

For instance, I came across a solution on this webpage - but I'm unsure about how to integrate Javascript into an Angular component. https://codepen.io/surjithctly/pen/PJqKzQ

Here are details of my version:

+-- [email protected]

+-- [email protected]

+-- [email protected]

Below is my Navbar Code:

<nav class="navbar navbar-expand-lg navbar-dark">
    <a class="navbar-brand" href="#" style="color: red;">      
      My NAVBAR
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>        
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownHI" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Menu
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdownHI">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                  <li class="nav-item dropdown"><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Submenu action</a></li>
                      <li><a class="dropdown-item" href="#">Another submenu action</a></li>
                    </ul>
                  </li>                
                  <li class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">View All</a></li>
                </ul>
              </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>     
    </div>
  </nav>
cssangularbootstrap-4navbar

Answer №1

To enhance your design, you should incorporate custom styles in addition to the provided HTML code

.custom-design {
  position: relative;
}

.custom-design>.design-block {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.custom-design:hover>.design-block {
  display: block;
}

.custom-design>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.custom-design:hover>a:after {
  border-left-color: #fff;
}

.custom-design.pull-left {
  float: none;
}

.custom-design.pull-left>.design-block {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}
<div class="container">
  <div class="row">
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown
        </button>
      <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
        <li class="dropdown-item"><a href="#">Some action</a></li>
        <li class="dropdown-item"><a href="#">Some other action</a></li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-submenu">
          <a class="dropdown-item" tabindex="-1" href="#">Hover me for more options</a>
          <ul class="dropdown-menu">
            <li class="dropdown-item"><a tabindex="-1" href="#">Second level</a></li>
            <li class="dropdown-submenu">
              <a class="dropdown-item" href="#">Even More..</a>
              <ul class="dropdown-menu">
                <li class="dropdown-item"><a href="#">3rd level</a></li>
                <li class="dropdown-submenu"><a class="dropdown-item" href="#">another level</a>
                  <ul class="dropdown-menu">
                    <li class="dropdown-item"><a href="#">4th level</a></li>
                    <li class="dropdown-item"><a href="#">4th level</a></li>
                    <li class="dropdown-item"><a href="#">4th level</a></li>
                  </ul>
                </li>
                <li class="dropdown-item"><a href="#">3rd level</a></li>
              </ul>
            </li>
            <li class="dropdown-item"><a href="#">Second level</a></li>
            <li class="dropdown-item"><a href="#">Second level</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

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

What is the best way to customize the appearance of the material-ui select component using styled-components instead of material-ui classes in a React

I've been facing some challenges while trying to style my material-ui select component using styled-components instead of material- classes. The version I am working with is material-ui/core 4.12.3. When I use the old makeStyles component from materi ...

cssreactjsselectmaterial-ui

Maintain the link's functionality even after it's been clicked by utilizing the same

I have a fixed navbar with same-page anchors and I want to keep the link active after it has been clicked and taken to that section of the page. While this is simple for links to another page, I'm struggling to figure out how to do it here. Here&apos ...

javascriptjqueryhtmlcssnavbar

The Tailwind classes applied directly in HTML are not functional, whereas the ones from the external CSS file are effective

After testing the classes, the intended look of the page should resemble this: https://i.stack.imgur.com/BVs57.png However, it currently appears like this: https://i.stack.imgur.com/AjN3z.png The JSX code in the file is as follows: < ...

cssnext.jstailwind-css

Determining the optimal time to utilize the addClass function in jQuery and CSS

One of my HTML elements has the class "article": <article> Content </article> In my jQuery script, I want to add specific classes that have been predefined: $('article').addClass('rounded box-shadow gradient-bright'); I ...

jqueryhtmlcsspreload

Differences Between APP_INITIALIZER and platformBrowserDynamic with provide

I've discovered two different approaches for delaying an Angular bootstrap until a Promise or Observable is resolved. One method involves using APP_INITIALIZER: { provide: APP_INITIALIZER, useFactory: (configService: ConfigurationService) => ( ...

javascriptangular

Icon with label and border using Font Awesome

I'm looking to recreate this design using HTML and CSS: The icon I'm trying to replicate is actually from font awesome. Here's what I've accomplished so far: https://jsfiddle.net/0Lewug6p/1/ <head> <meta charset=" ...

htmlcssfont-awesome

Getting a compilation of events attached to a component within Angular

Trying to identify the events being listened to in a component. In this example, event handlers for customEvent1 and customEvent2 are assigned, while customEvent3 remains unused. Is there a way to retrieve this list, particularly within AfterViewInit? & ...

angular

Hover effects can be applied to CSS tabs

There seems to be a CSS issue on Chrome where the background image is not hiding when clicking on next tabs. I have used the following code: .paymentBank ::after { content: " "; } You can view the live code [here][1] and I have also attached a scree ...

htmlcss

Selenium's get_attribute method is not providing a value

Below is the code I am currently working with: url="https://www.betexplorer.com/soccer/poland/ekstraklasa/lks-lodz-lechia-gdansk/fgQY4hAD/" browser = webdriver.Chrome() browser.get(url) time.sleep(1.5) trs = browser.find_elements_by_xpath(".//div[@id=&a ...

pythoncssseleniumweb-scrapingbeautifulsoup

Preventing Page Refresh when Button is Clicked in Angular

How can I prevent page reload when a button is clicked in Angular? I'm developing a quiz application in Angular where I fetch random questions and options from an API. When users select an option, the next question should appear without reloading the ...

javascripthtmlangularreload

encountering a problem with retrieving the result of a DOM display

private scores = [] private highestScore: number private studentStanding private studentInformation: any[] = [ { "name": "rajiv", "marks": { "Maths": 18, "English": 21, "Science": 45 }, "rollNumber": "KV2017-5A2" }, { "n ...

javascriptarraysjsonangular

How to make Firefox create a new line in a contenteditable field

I am working with a contenteditable div that is within a parent div with a floating width of 50%. My goal is to set the max width of the content editable to match the container, even if the text spans multiple lines. Here is the CSS I tried: .editable-con ...

htmlcssfirefoxcontenteditable

Switch the designation to Hover Class

I am working with nested divs and have assigned a CSS class to one of the inner divs. How can I trigger the hover effect of the class (class.hover) when the user hovers over the outer div, even if they are not directly over the inner div? I believe this m ...

javascripthtmlcss

Eliminate any undefined data in the popup map of Javascript

I am working with JSON data that is being displayed in a pop-up on a map. In cases where there is missing data (Visibility), the word undefined appears in the pop-up. Is there a way to remove the undefined text so that it does not show up in the pop-up? ...

javascripthtmlcssjson

What is the best way to showcase the chosen information?

Typically, I maintain a list of specific entries within cards. When clicking on one of the records in the card, the corresponding data table is supposed to be displayed below that record. An issue arises where after selecting a record and displaying its d ...

angular

I am having trouble aligning the element perfectly in the center

I'm working on a radio input design featuring a circle in the middle, achieved via the pseudo element ::before However, I've noticed that when the input size is an odd number, the centering isn't quite perfect This issue seems more promine ...

htmlcsspseudo-element

Equal height tabbed content design allows for a visually appealing and organized

I'm looking to create a tabbed menu that displays content in blocks, but I want each block to be the same height. I tried using padding and flexbox, but couldn't get it to work properly. Any suggestions on how to achieve this? .tab-pane { fl ...

htmlcsstwitter-bootstrapflexbox

TypeScript in Angular causing lodash tree shaking failure

I am currently working on a large project that involves TypeScript. Various attempts have been made to optimize the use of lodash in my project. Before making any conclusions, I believe it is important to review the outcomes of my efforts. The command I ...

angulartypescriptlodashtree-shaking

Using bootstrap's center-block class, you can easily center

I'm attempting to center the content of a form. <div class="login-container"> <div class="center-block"> <form action="/joinChart" method="get"> <input name="username" id="username" type="text"><br><br> ...

htmlcss

Unable to load the node modules

In my development journey, I created an ASP.NET MVC project using Angular 2 in Visual Studio 2017 and set up node for package management. Here is a snippet from the package.json file: { "version": "1.0.0", "name": "asp.net", "private": true, ... ...

javascriptnode.jsasp.net-mvcangulartypescript