I have the script to create a navbar,
its only can make dropdown menu opened only when it hovered, the problem is when this accessed by mobile browser, dropdown menu cannot open, how to modify this script in order to make dropdown menu open when clicked the parent menu
<div class="collapse navbar-collapse offset w-100" id="navbarSupportedContent">
<div class="row w-100 mr-0">
<div class="col-lg-7 pr-0">
<ul class="nav navbar-nav center_nav pull-right">
<li class="nav-item ">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Paket</a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="category.html">Pestgre</a>
</li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Blog</a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="single-blog.html">Blog Details</a>
</li>
</ul>
</li>
<li class="nav-item submenu dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="tracking.html">Tracking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="elements.html">Elements</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</div>
For a mobile version, I would use a hamburger menu (the three lines if you didn't know). You can find the icon or make it your self. In javascript or jquery, say
const getMenu = document.getElementById("menuButtonsId"); //be sure to call this code after after the document has loaded, or else javascript won't find the button or icon.
getMenu.onclick(function(){
if (the menu is closed) {
open the menu
} else {
close the menu
}
})
I don't know much about jquery, but I think you can do something like this
$("#menuButtonsId").click(function() {
if (the menu is closed) {
open the menu
} else {
close the menu
}
})
Just fill out the place holder text that I put in the code. I hoped that answered your question!
Related
I have a sidebar implemented using bootstrap collapsible,
The menus are all in tagged my issue is when i clicked on this tagged,
the page refreshed thus re-animating the collapsible panel and it doesnt look good
I have already stored the stage of this collapsible items in a cookie to know the previous state before reloading but now its the reanimation of it collapsing is what is happening.
How to solve this?
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic" aria-expanded="true" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Create</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Featured List</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Automated List</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic" aria-expanded="true" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Option 4</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Option 5</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Option 6</a></li>
</ul>
</div>
</li>
Your question is not easy to understand, so please rephrase it if this is not the answer you were looking for.
Looking at your code though, you are duplicating IDs and both .nav-linkss have the same data-bs-target target. So that won't work.
Make each toggle target and collapse ID unique:
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic" aria-expanded="true" aria-controls="ui-basic">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Create</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Featured List</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Automated List</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" data-bs-target="#ui-basic-2" aria-expanded="true" aria-controls="ui-basic-2">
<i class="icon-layout menu-icon"></i>
<span class="menu-title">Listing Management</span>
<i class="menu-arrow"></i>
</a>
<div class="collapse" id="ui-basic-2">
<ul class="nav flex-column sub-menu sideBarPanel">
<li class="nav-item"> <a class="nav-link" href="/someURL">Option 4</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL})">Option 5</a></li>
<li class="nav-item"> <a class="nav-link" href="/someURL"})">Option 6</a></li>
</ul>
</div>
</li>
I'm using window location and vanilla javascript to create active menu links on my site and it works as far as matching the single item links to the active page and applying the style. However, it is applying it to any of the dropdown items as well.
How can I do this and avoid applying it to the dropdown items?
Also, how can I still match the href of the link, but apply the style to the span within the link instead of the link itself?
const activePage = window.location.pathname;
const navLinks = document.querySelectorAll('ul.navbar-nav li.nav-item a.nav-link').
forEach(link => {
console.log(link);
if(link.href.includes(`${activePage}`)){
link.classList.add('active');
}
})
.nav-link span.active-pill{
color: white;
}
<div class="collapse navbar-collapse" id="navbarSupportedContent" >
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/"><span>Home</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="productDropdown" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span>Products</span>
</a>
<div class="dropdown-menu" aria-labelledby="productDropdown">
<a class="dropdown-item p-2" href="/Products/test">test</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/FAQ"><span>FAQs</span></a>
</li>
</ul>
</div>
I have a JQuery code that adds a nav-link dynamicly to a nav-item. The problem is this nav-link doesn't change to active when clicked. I tried to dynamicly give it the active class but it doesn't take it. it seems after the page reloads everything is rest and it's always the first nav-link that takes the active class.
It's of course wrapped inside $(document).read(). I also tried to wrap it inside $(window).load() but same problem.
$('#A').append('<li class="nav-item">' + '<a class="nav-link" href="{{dynamic_link}}?id=1" >Dynamicly Added</a>' + '</li>');
$(document).on('click', '.collapse li', function(e) {
$(this).addClass('active').siblings().removeClass('active');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse mt-5 h-100 justify-content-between" id="navbarsExampleDefault">
<ul class="navbar-nav accordion" id="SideBar">
<li class="nav-item">
<a class="nav-link" href="{{index}}">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{list}}">list</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href data-toggle="collapse" data-target="#A" aria-controls="collapseOne"> A </a>
</li>
<ul class="collapse" id="A" data-parent="#SideBar">
<li class="nav-item">
<a class="nav-link" href="{{B}}">B</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{C}}">C</a>
</li>
</ul>
</div>
If you can spot the problem I'd appreciate your guidance.
Because elements that you are appending not exist when you define the the click handler better to use the delegate() method from jQuery.
$('#A').append(
'<li class="nav-item">'
+'<a class="nav-link" href="{{dynamic_link}}?id=1" >Dynamicly Added</a>'
+'</li>') ;
$('.collapse ').delegate('li','click',function(e) {
e.preventDefault();
$( this ).addClass( 'active' ).siblings().removeClass( 'active' );
});
.collapse li.active a{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse mt-5 h-100 justify-content-between" id="navbarsExampleDefault" >
<ul class="navbar-nav accordion" id="SideBar">
<li class="nav-item">
<a class="nav-link" href="{{index}}">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{list}}" >list</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href data-toggle="collapse" data-target="#A" aria-controls="collapseOne" > A </a>
</li>
<ul class="collapse" id="A" data-parent="#SideBar" >
<li class="nav-item">
<a class="nav-link" href="{{B}}" >B</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{C}}" >C</a>
</li>
</ul>
I have a navbar which I want to navigate through only next and back buttons, clicking directly on tabs must be restricted. Below is my code which I tried but they are not working as expected,
<nav class="navbar navbar-expand-lg">
<div class="navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link mr-5" [ngClass]="href == '/expert-welcome/expert-profile'? '': 'disabled'" [routerLink]="['/expert-welcome/expert-profile']" [routerLinkActive]="['is-active']">
<b class="circularBold">Profile Details</b>
</a>
</li>
<li class="nav-item">
<a class="nav-link mr-5" [routerLink]="['/expert-welcome/expert-education']" [routerLinkActive]="['is-active']">
<b class="circularBold">Education & Experience</b>
</a>
</li>
<li class="nav-item">
<a class="nav-link mr-5">
<b class="circularBold">Services Offerings</b>
</a>
</li>
<li class="nav-item">
<a class="nav-link mr-5">
<b class="circularBold">Availability & Fees</b>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<b class="circularBold">Listing Details</b>
</a>
</li>
</ul>
</div>
</nav>
CSS
.disabled{
pointer-events: none;
}
With this approach, it's working partially, when I navigate through back and next buttons, the route is loading but the value isn't getting patched, I'll have to reload the page for the new value to get patched.
In approach 2, I have removed routerLink and routerLinkActive, but I want to show a different css for an active tab as below.
Better solution or suggestions are much appreciated.
Thanks in advance.
<a routerLink="/your/path"><span (click)="preventRloute($event)">Test link</span></a>
and writ a function
function preventRloute($event: MouseEvent) {
if (condition) {
$event.stopPropagation();
// your code...
return;
}
// navigates
}
Problem:
How can I make my navigation not appear on my #home section. However, when the user scrolls down or clicks on the find more button. When the user gets to the 'features-icons' section how can I make my navigation bar appear for all sections including that and below? https://github.com/ldocherty1/Unit28_Assignment1
What I have tried:
HTML
<nav class="navbar scrolled-nav fixed-top navbar-expand-sm bg-light">
<a class="navbar-brand" href="#">Front End Web Developer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">☰</button>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#features-icons">Expectations</a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">Design</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
CSS
.navbar {
display: none;
}
JS
$("body, html").on("scroll", function() {
var features_top = $("#features-icon").position().top;
var top_of_window = $(window).scrollTop();
if (top_of_window >= features_top) {
$(".navbar").show();
} else {
$(".navbar").hide();
}
});
I believe it has something has to do with the JS part of my code the problem why my navbar isn't displaying.
Your navbar is not displaying because you never reach the point where the top_of_window >= features_top is valid.
I've updated the fiddle in the comment. Check it now https://jsfiddle.net/8o7omnm7/33/
Your navbar will be displayed only when the <div id="features-icon">Hola</div> will have -1px from top. As long as you don't have that it will not be displayed