i have the followwing structure in my html code:
<ul id="urlcss">
<li class="nav-submenu">
<a class="collapsed" href="#" data-toggle="collapse" data-target="#submenu0">
ADMIN
</a>
<div class="collapse" id="submenu0" aria-expanded="false">
// Some menus check the image below
</div>
</li>
</ul>
And if you see that on browser, it looks like this:
With the menu collapse show, like this:
Ok what i want to do is, when a user press the li with nav-submenu class i want to show an arrow indicating that the collapse menu below belong to that li, and change the background color, i tried with css but nothing happens, here is an example of what i want (Look the arrow):
I tried doing this piece of code to place something like a holder but i doesn't work:
.nav-submenu[data-toggle].collapsed:after {
content: " ▾";
}
.nav-submenu[data-toggle]:not(.collapsed):after {
content: " ▴";
}
This is using BootStrap 5 Nav Using Dropdowns
With very little css you can achieve what you are looking for.
.nav-link.dropdown-toggle:after {
transform: rotateX(-180deg);
transition: transform 500ms;
}
.nav-link.dropdown-toggle.show:after {
transform: rotateX(0deg);
}
.nav .nav-item:hover{
transition: background-color 500ms
}
.nav .nav-item:hover{
background-color: lightblue;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
I've created for you a small example. Also is used a small js code to toggle default class name.
const menus = document.querySelectorAll('[data-toggle="collapse"]')
for (const menu of menus) {
menu.addEventListener('click', function(event) {
this.classList.toggle('collapsed');
})
}
.nav-submenu a.collapsed:after {
content: " ▾";
}
.nav-submenu a:not(.collapsed):after {
content: " ▴";
}
.nav-submenu a:not(.collapsed)+div {
display:none;
}
<ul id="urlcss">
<li class="nav-submenu">
<a class="" href="#" data-toggle="collapse">
ADMIN
</a>
<div>
// Some menus check the image below
</div>
</li>
</ul>
Related
this is my code which i have created this navigation bar with bootstrap and all of its drop downs but i want to add another drop down to the services drop down section inside of webdevelopment but it can't any easy solution for this to done with bootstrap5...
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<!-- webDevelopment DropDown -->
<li id="menu-item-1644" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1644">Web Development
<ul class="sub-menu">
<li id="menu-item-1645" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1645">Level 3</li>
<li id="menu-item-1699" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1699">Level 3a</li>
<li id="menu-item-1700" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1700">Level 3b</li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Software Development</a></li>
<li><a class="dropdown-item" href="#">Networking and Cloud</a></li>
<li><a class="dropdown-item" href="#">Cyber Defence and offensive</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">More</a></li>
</ul>
</li>
I assume you want the "more" link to have a submenu. Just put in another menu in to the list item:
<li>
<div class="submenu">
<a class="subnavbtn">Partners <i class="fa fa-caret-down"></i></a>
<div class="submenu-content">
Link 1
Link 2
Link 3
Link 4
</div>
</li>
Style it however you like,
and use CSS to make it invisible and absolute:
.submenu-content {
display: none;
z-index: 1;
position: absolute;
}
And when the link is hovered make it visible:
.subnav:hover .subnav-content {
display: inline;
}
so this is the answer i found but note that this is only available with bootstrap 5.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<!-- webDevelopment DropDown -->
<li>
<a class="dropdown-item" href="#">Web Development</a>
<ul class="dropdown-menu dropdown-submenu">
<li>
<a class="dropdown-item" href="#">Submenu Submenu item 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu Submenu item 2</a>
</ul>
</li>
<li><a class="dropdown-item" href="#">Software Development</a></li>
<li><a class="dropdown-item" href="#">Networking and Cloud</a></li>
<li><a class="dropdown-item" href="#">Cyber Defence and offensive</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">More</a></li>
</ul>
</li>
CSS:
.dropdown-menu li {
position: relative;
}
.dropdown-menu .dropdown-submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
right: 100%;
left: auto;
}
.dropdown-menu>li:hover>.dropdown-submenu {
display: block;
}
i want to when scrolling it makes an active link one only active link and the others remove active ,the navbar is fixed, when it is active the link add class and the class name is active and when one link is clicked the other links should be unactive (remove class active) but it dosn't work , when i scroll down all the links are active please help
my active class css
.block{
height: 1200px;
}
.block:first-of-type{
margin-top: 1200px;
}
.navbar{
position: fixed !important;
top: 0;
width: 100%;
}
.active{
color: #000000 !important;
}
my navbar and body
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#action">action</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#method">method</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li ><a class="dropdown-item" href="#">Something else here</a></li>
<li ><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<ul>
<li class="block" class="block" id="services">services</li>
<li class="block" class="block" id="action">action</li>
<li class="block" class="block" id="method">method</li>
</ul>
my jquery code
$(document).ready(function(){
// Add active class on navbar link and remove from siblings
"use strict";
$(window).scroll(function(){
$('.block').each(function(){
if($(window).scrollTop() > $(this).offset().top){
// console.log($(this).attr('id'));
var blockId = $(this).attr('id');
$('a.nav-link[href^="#' +blockId+'"]').addClass('active');
$('.nav-link').removeClass('active');
}
});
});
});
You are immediately removing the active class from all links after you set the currently active one. You need to remove the active class from all the other links first, then apply the new one.
Swap the order of these lines:
$('a.nav-link[href^="#' +blockId+'"]').addClass('active');
$('.navbar a').removeClass('active');
Becomes:
$('.navbar a').removeClass('active');
$('a.nav-link[href^="#' +blockId+'"]').addClass('active');
The editor here struggled with your layout, so here's a codepen showing the above: https://codepen.io/29b6/pen/ZErMGpJ?editors=1111
This works fine, but bear in mind that listening to scroll events is quite an inefficient solution, especially as you're just looping over a bunch of DOM elements each time. You might want to read up about the Intersection Observer API for a more passive approach.
I'm having trouble making the background of the following navbar transparent. I've tried making background-color: transparent !important; for .navbar but that doesn't seem to work either.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarnavdropdown" aria-controls="navbarnavdropdown" aria-expanded="false" aria-label="toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarnavdropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html"><img src="assets/img/resultheap-logo.png" alt="" /></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog/index.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact-form/index.html">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardropdownmenulink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbardropdownmenulink">
<a class="dropdown-item" href="#">action</a>
<a class="dropdown-item" href="#">another action</a>
<a class="dropdown-item" href="#">something else here</a>
</div>
</li>
</ul>
</div>
</nav>
remove the bg-light class from the nav element, or override it inline or id with important. But the cleanest way is to remove simply the class. I think you could simply not override it because bootsstrap sets the color with the bg-light class also with !important.
I don't believe you may have mentioned it but have you tried the the 'opacity' css.
You can do:
opacity: 0; //Makes fully transparent
opacity: 0.5; //Half transparent
opacity 1; //No transparency
Hopefully this helps for the navbar. Let me know if it doesn't, i'll try and help in any way possible.
You can add a new css class as background-color: transparent; or you can change property of ".bg-light" class.
.bg-light {background-color:Transparent!important}
I am trying to generate functionalities where dropdown menu can be shown/hidden by dropdown button click. It will be closed too by click anywhere on the page. But, I can't generate it with pure javascript. Can you please help me?
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(e) {
// only one dropdown is working!
e.target.nextElementSibling.classList.toggle('show');
});
document.onclick = function(e){
if(e.target.classList.contains('dropdown-toggle')){
if (e.target.nextElementSibling.classList.contains('show')) {
// for this line, my dropdown is not opening; but I want to close it too
// by clicking outside; I am disabling it for now
// e.target.nextElementSibling.classList.remove('show');
}
}
}
ul {
list-style: none;
}
ul:after {
content: '';
display: table;
clear: both;
}
ul:not(.dropdown-menu) > li {
float: left;
padding: 5px;
}
.dropdown-menu {
display: none;
}
.show {
display: block !important;
}
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a> </li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">Dropdown 1
</a>
<ul class="dropdown-menu">
<li class="dropdown-item" href="#">Link 1</li>
<li class="dropdown-item" href="#">Link 2</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a> </li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">Dropdown 2
</a>
<ul class="dropdown-menu">
<li class="dropdown-item" href="#">Link 1</li>
<li class="dropdown-item" href="#">Link 2</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
I worked with jQuery and never worked with pure javascript selectors. So, please inform me if I implemented bad selection practice.
What I would do is loop through the shown menu items, and if the user isn't clicking on the nav item, hide the dropdown.
For the toggle button selector use .dropdown-toggle. Also your list items should be links not li with href.
var dropdown = document.querySelectorAll('.dropdown-toggle');
dropdown.forEach(function(el){
el.addEventListener('click', function(e) {
e.target.nextElementSibling.classList.toggle('show');
});
});
document.onclick = function(e){
var _shown = document.querySelectorAll(".dropdown-menu.show");
_shown.forEach(function(el){
if(el != e.target.nextElementSibling && el != e.target.parentNode.parentNode){
el.classList.toggle('show');
}
});
}
ul {
list-style: none;
}
ul:after {
content: '';
display: table;
clear: both;
}
ul:not(.dropdown-menu) > li {
float: left;
padding: 5px;
}
.dropdown-menu {
display: none;
}
.show {
display: block !important;
}
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home 1</a> </li>
<li class="nav-item">
<a class="nav-link" href="#">About 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">Dropdown 1
</a>
<ul class="dropdown-menu">
<li class="dropdown-item">Link 1</li>
<li class="dropdown-item">Link 2</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home 2</a> </li>
<li class="nav-item">
<a class="nav-link" href="#">About 2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">Dropdown 2
</a>
<ul class="dropdown-menu">
<li class="dropdown-item">Link 1</li>
<li class="dropdown-item">Link 2</li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Contact 2</a></li>
</ul>
I am trying to convert the following navbar direction and behavior of submenus to the other direction..
This is the original code, and below it is the edited one that needs more tweaking to be "right to left":
The original:
// dropdown menu on hover
var $screensize = $(window).width();
$('.dropdown').on("mouseover", function() {
$(this).find('> .dropdown-menu').stop(true, true).slideDown('fast');
$(this).bind('mouseleave', function() {
$(this).find('> .dropdown-menu').stop(true, true).css('display', 'none');
});
});
//Change position for drop down
$(function() {
$(".dropdown li").on('mouseenter mouseleave', function(e) {
if ($('.dropdown-menu', this).length) {
var elm = $('.dropdown-menu', this);
var off = elm.offset();
var l = off.left;
var w = elm.width();
var docW = $(window).width();
var isEntirelyVisible = (l + w <= docW);
if (!isEntirelyVisible) {
$(elm).addClass('dropdown-reverse');
} else {
$(elm).removeClass('dropdown-reverse');
}
}
});
});
.dropdown-menu {
margin-top: -2px;
}
li.dropdown .dropdown-menu .dropdown-menu {
left: 100%;
margin-top: -30px;
}
.dropdown-reverse {
left: auto!important;
right: 100%!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<nav id="menu" class="navbar navbar-expand navbar-dark bg-dark">
<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>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Action</a><ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Action</a><ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</nav>
I edited the above and added .navbar{float: right; } in the css, text-align:right for li dropdown and also dir="rtl" in the top line of nav in the html. But still the behavior is not as intended, as the rtl css addition made it lose the respect for the screen size as this image (this is the original):
But now it only opens one first two right, but the third submenu gets opened over the first one.
Here is a fiddle for the test: https://jsfiddle.net/2b8h30Lx/41/