We Keep Coding

Traversal issue in navigation(which is shared across application) bar using Javascript

Since my application had same navigation bar across application, I thought of implementing shared navigation bar across application.
My project structure is a follows
Login
|-Login.html, Login.css, Login.js
Home
|-Home.html, Home.css, Home.js
Test
|-Project.html, Project.css, Project.js
Test1
|-Test1.html, Test1.css, Test1.js
Test2
|-Test2.html, Test2.css, Test2.js
|-Temp
|-Temp.html, Temp.css, Temp.js
|-Shared
|-Shared.html, Shared.css, Shared.js, navigation.html
Here is my navigation.html which I have kept inside shared folder.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link"
href="../Home/Home.html"
>Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="../Employee/CreateEmployee.html"
>Employee</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"
>Test</a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown">
<a
class="dropdown-item"
href="../Test/Test1/NewCQ.html"
>Create New CQ</a>
<a
class="dropdown-item"
href="../Test/Test2/Test2.html"
>Update CQ</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="../Temp/Temp.html"
>Temp</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link float-right" href="../Login/Login.html"
>Logout</a>
</li>
</ul>
</div>
</nav>
This is how I have created div in respective html files
<div class="row border-bottom border-dark">
<div class="col px-0">
<!--Navigation bar-->
<div id="navigationBar">
</div>
</div>
</div>
When respective page visits I am loading that navigation.html file in shared.js from shared folder which I have imported in all the pages.
//Load navigation.html from shared folder
$(function(){
$("#navigationBar").load("../Shared/navigation.html");
});
The issue here is that
relative paths will be different from different pages, so how do i need to provide the relative paths inside navigation.html
$("#navigationBar").load("../Shared/navigation.html"); is not loading inside Test.html(its beacuse of relative path) when redirect from home.html
please let me know if am doing anything wrong here. waiting for your responses. Thanks in advance.

So, why use relative paths at all? Just use an absolute path in your links.
<a class="dropdown-item" href="/folder/Test/Test2/Test2.html">Update CQ</a>
You'll need to have some more javascript detecting the current path and figuring out the relative path from there, but that's a lot of work to do for no real gain unless you have a very specific reason to use relative paths.

Is there any way to implement multilevel responsive dropdown top navbar using bootstrap in angular 7? [duplicate]

This question already has answers here:
Bootstrap 4: Multilevel Dropdown Inside Navigation
(7 answers)
Twitter Bootstrap Multilevel Dropdown Menu
(6 answers)
Closed 2 years ago.
I have to wonder why bootstrap does not provide a multilevel dropdown in the top navbar.
https://www.youtube.com/watch?v=jEAeDID1pks
From this video, I could see the exact requirement for me, but implementation somehow fails. It is like some time I could get the working output and sometimes it's not.
I am not very aware of jQuery, but I think this is only possible through jQuery because I searched for a lot of options.
This above picture is the basic top navbar provided by bootstrap. I want another submenu in that dropdown which leads to another submenu.
I need something like above.
https://getbootstrap.com/docs/4.0/components/navbar/
from the above link, I referred to the navbar documentation from bootstrap.
<a class="navbar-brand" href="#">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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
This is the code for the basic navbar. I am using angular 7 in my case. I wonder if there any other frameworks which support this requirement in angular 7.

Toggle Slide-In Animation for Bootstrap 4 Desktop Navigation

I'm looking to expand and collapse the desktop version of the Bootstrap 4 navigation with a simple toggle button.
So example would be a menu button to click and will minimise menu items into the left side of the screen.
[Menu]
[Menu] Link Link Link Link Link
Bootstrap defaults however don't provide desired result.
<nav class="navbar navbar-expand-md navbar-light bg-light main-nav">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse w-100">
<ul class="nav navbar-nav w-100">
<li class="nav-item active nav-breaker">
<a class="nav-link" href="#">Menu</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Haircare</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>
<li class="nav-item nav-breaker">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Book Appointment</a>
</li>
</ul>
</div>
<a class="navbar-brand order-first order-md-0 mx-0" href="#">Shear Success</a>
<div class="collapse navbar-collapse w-100">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
</div>
</nav>

The short answer is that changing bootstrap's default navbar animations is not easy.However, I got you most of the way there: https://www.codeply.com/go/1VhJAMNHEO
your markup is not boostrap-compliant. fix your html so that you follow boostrap standards outlined here. See the section labeled "With a toggler on the left... "
remove the navbar-expand-md class from the nav to make the menu collapsed by default
override bootstrap's default styling to achieve the desired "slide in from the left" effect. this is much easier said than done. in particular the navbar adds a temporary class .collapsing that is easy to miss.
this is going to mess up responsive styling and will require more attention i.e. media queries.
honestly, if you want the navbar to do anything besides what's listed out on the documentation, I've found it easier to write most of my own styling and scripting from scratch, leveraging only the basic .navbar and .navbar-nav etc classes for styling

Bootstrap dropdown isn't opening

I'm guessing this is an easy problem for most guys. I copied the standard template from the bootstrap website, but the dropdown menu in the navbar isn'topening when I click it. Can someone see why?
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
<a
class="navbar-brand"
routerLinkActive="active current"
routerLink="/">
Home
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a
class="nav-link"
routerLinkActive="active current"
routerLink="/shopping-cart">
Shopping Cart
<span
class="caret">
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">User</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">My orders</a>
<a class="dropdown-item" href="#">Manage Orders</a>
<a class="dropdown-item" href="#">Manage Products</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

This problem is most likely caused by the absence of necessary scripts tags. On Bootstrap's website it says under the JS section:
Many of our components require the use of JavaScript to function.
Furthermore, there is a starter template that you can use with the navbar component that you are trying to use.
This provides all necessary references to work with bootstrap correctly.
Let me know if this helps!

As GTown-Coder mentioned, you need to include the jquery scripts and sure bootstrap...
There are two ways. I prefer the following for simplicity
In the index.html at (header should work too, if not include the scripts into the body at last) you must add the 4 lines from Bootstrap (LINK [Its download page of bootstrap 4])
Then your Dropdown should work.
Other way is to install (via npm, LINK) bootstrap, jquery, tether, popperjs and add the script paths to .angular-cli.json -> this can be tricky if there are some missing dependcies.
Are there still problems, let us know!

Bootstrap Mobile Menu Issue

I have a website at: https://www.romaheritage.co.uk
The issue is the Bootstrap menu at the top of the page; it works fine on desktop PCs/Laptops, but when viewed on mobile devices (phones/tablets) the two drop-down menu options "Records" & "Misc" won't expand out (at least on Android they won't, not sure about IOS because I can't test it). I think I'm overlooking something which may be obvious to others.
Can anyone view the source for the page and point me in the direction of what I've done wrong?

I made it work by replacing the a.dropdown-toggle by a div.dropdown-toggle.
The css is not good then but I believe you can make this right.
Here's the code
<div class="collapse navbar-collapse" id="tb-nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/#about">About</a></li>
<li class="dropdown">
<!-- Change a to div -->
<div class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Records <span class="caret"></span></div>
<ul class="dropdown-menu">
<li>BMD</li>
<li>Census</li>
</ul>
</li>
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/newspaper-articles">Newspapers</a></li>
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/#blog">Blog</a></li>
<li class="dropdown">
<!-- Change a to div -->
<div class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Misc. <span class="caret"></span></div>
<ul class="dropdown-menu">
<li>Queen Victorias Journals</li>
</ul>
</li>
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/#contact">Contact</a></li>
</ul>
</div>

try this one...
$("li.dropdown").click(function(e){
$(this).toggleClass("open");
});