I want to make a clickable navigation bar... The problem is when i click on it the sub menu should display but I want to perform another event on it , so when a click on it again, the sub menu will display none
I simply add 'addEventListner' with click and make it display block when click on it....
To perform multiple conditions based on the number of clicks, you can initial counterClick and do whatever you want depending on result of modulo division. To test this code, just click every time at the home sub-menu.
let counterClick = 0;
let subMenu = document.getElementById("sub-menu");
subMenu.addEventListener("click", function () {
if(counterClick % 2 == 0) {
// do whatever you want
subMenu.classList.add('active');
} else {
subMenu.classList.remove('active');
subMenu.style.display = "none";
}
counterClick++;
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li id="sub-menu">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
Related
How change tab background on selected item? javascript ? or php?
my code. I want when I click on Apartman 1 that this tab is selected. how to do it with javascript or php?
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li >Pocetna</li>
<li class="active" >Apartman 1</li>
<li>Apartman 2</li>
<li>Apartman 3</li>
</ul>
</div>
</nav>
You've already given an active class to one of the list items. To style that one with a background colour you could add a CSS style, like this:
nav li.active {
background-color: yellow;
}
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li>Pocetna</li>
<li class="active">Apartman 1</li>
<li>Apartman 2</li>
<li>Apartman 3</li>
</ul>
</div>
</nav>
It sounds from your comment like you want help adding the class="active" part to the correct list item based on what page you're currently on.
That can either come from the server (each page has class="active" on its corresponding link in the HTML sent back from the server) or it can be set with Javascript once the page has loaded.
Setting it on the server side is going to be easiest.
How to do it depends how your pages are structured. Is this nav a common element you include into each page? I'll assume it is, and you include it on each page with <?php include 'nav.php'; ?> or similar.
In nav.php you could have something like the following:
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li <?php if ($_SERVER['PHP_SELF'] === '/apartmanitrifunovic/index.php') { ?>class="active"<?php } ?>>Pocetna</li>
<li <?php if ($_SERVER['PHP_SELF'] === '/apartmanitrifunovic/apartmanjedan.php') { ?>class="active"<?php } ?>>Apartman 1</li>
<li <?php if ($_SERVER['PHP_SELF'] === '/apartmanitrifunovic/apartmandva.php') { ?>class="active"<?php } ?>>Apartman 2</li>
<li <?php if ($_SERVER['PHP_SELF'] === '/apartmanitrifunovic/apartmantri.php') { ?>class="active"<?php } ?>>Apartman 3</li>
</ul>
</div>
</nav>
Or, with a loop to cut down on repetition:
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<?php foreach ([
'/apartmanitrifunovic/index.php' => "Pocetna",
'/apartmanitrifunovic/apartmanjedan.php' => "Apartman 1",
'/apartmanitrifunovic/apartmandva.php' => "Apartman 2",
'/apartmanitrifunovic/apartmantri.php' => "Apartman 3",
] as $file => $name) { ?>
<li <?php if ($_SERVER['PHP_SELF'] === $file) { ?>class="active"<?php } ?>>
<a href="http://localhost<?php echo $file; ?>">
<?php echo $name; ?>
</a>
</li>
<?php } ?>
</ul>
</div>
</nav>
You can use the :active selector to change the color of the active page. You can use your active class to style the selected tab.
.active:active{
background-color: blue;
}
Maybe what you are looking for:
var list = document.querySelectorAll('li');
list.forEach(function(el){
el.onclick=function(){
list.forEach(function(el){
el.classList.remove("active");
});
el.classList.toggle("active");
}
});
li.active{
background:yellow;
}
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li >Pocetna</li>
<li class="active" >Apartman 1</li>
<li>Apartman 2</li>
<li>Apartman 3</li>
</ul>
</div>
</nav>
Edit:
In case you want to save the state of the clicked tab in a new page, you should use javascript to read the URL of the page where you will be passing the clicked tabName as a GET parameter.
var url_ = window.location.href;//https://example.com?tabName=Apartman%1
var c = url.searchParams.get("tabName");
document.getElementById(c).click();
I have a bootsrap navbar, and every menu elements of it has a href attribute, to navigate through pages. When I click on, one of the elements the navbar disappears, of course because I left the page which contained it. But how can I do it dinamically? One always visible navbar fixed top, and every html page( navbar element) stay on the page where the navbar is.(without a database)
<nav class="navbar navbar-default" role="navigation" id="topmenu">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown active">
US
</li>
<li class="dropdown">
SERVICES
</li>
<li class="dropdown">
WORK WITH US
</li>
<li class="dropdown">
EN
</li>
</ul>
</nav>
You may do something like this:
<div id="navbar">
Google
...
</div>
<iframe id="frame" width="100%" height="100%">Update Browser!</iframe>
<script>
function goto(url){
document.getElementById("frame").src=url;
}
</script>
This will load the clicked link into the iframe. The page stays the same, so the navbar is still visible. You could also redirect all link cicks to end up into the iframe:
<div id="navbar">
Google
...
</div>
<iframe id="frame" width="100%" height="100%">Update Browser!</iframe>
<script>
window.onload=function (){
[...document.getElementsByTagName("a")].forEach(function(a){
a.onclick=function(e){
e.preventDefault();//the redirect
document.getElementById("frame").src=this.href;
}
});
};
</script>
Or if you like the jquery.load:
<div id="navbar">
Google
...
</div>
<div id="content"></div>
<script>
$(document).ready(function(){
$("a").each(function(){
this.on("click",function(e){
e.preventDefault();
$("#content").load(this.href);
});
});
});
</script>
I got as following:
<div parent-with-overflow-hidden>
<div absolute-position></div>
</div>
The real context is using the drop down menu bootstrap
<div overflow-hidden>
<div class="dropdown">
<button>Click to show menu</button>
<ul class="dropdown-menu">Menu</ul>
</div>
</div>
that I cannot show entire the menu.
How can I display the child div without move it outside the parent?
using position:absolute won't get it out of the parent with overflow-hidden . so you need to overwrite that with position:fixed . it will get the .dropdown-menu out of any parent/grandparent it has.
then you need to set the top position depending on the height of the parent, which is the overflow-hidden div.
after that, you need to dynamically re-calculate the top position while scrolling the page so that the dropdown stays in the same position
let me know if it works ;)
see snippet below or fiddle > jsfiddle
var oHeight = $('.ohidden ').height()
$('.dropdown-menu').css('top',oHeight)
//dropdown remain `glued` to the button on scroll
$(window).on("scroll",function(){
var wScroll = $(this).scrollTop()
$('.dropdown-menu').css('top',oHeight-wScroll)
})
.ohidden { overflow:hidden}
.dropdown-menu { position:fixed!important;}
body { height:2000px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="ohidden">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Click to show Menu
</button>
<ul class="dropdown-menu">
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
</ul>
</div>
</div>
I'm trying to get my responsive navigation to collapse when clicking a navigation item (link).
This is my navigation:
<nav class="nav">
<ul>
<li class="nav-item">Overview</li>
<li class="nav-item">Amenities</li>
<li class="nav-item">Residences</li>
<li class="nav-item">Neighborhood</li>
<li class="nav-item">Availability</li>
<li class="nav-item">Contact</li>
<li class="btn login">Login</li>
<li class="nav-toggle"></li>
</ul>
</nav>
Here's how the responsive nav gets expanded:
<script>
function myFunction() {
document.getElementsByClassName("nav")[0].classList.toggle("responsive");
}
</script>
I'm not sure why you're mixing old school list tags with the modern Nav because you don't need them.
If you want the menu to collapse upon selection you can use this neat technique:
<nav style="position:absolute; left:20px; top:50px;">
<div onclick="TheBox.removeAttribute('open');">
<details id="TheBox"><summary>Choices</summary>
Home<br>
About<br>
Products<br>
Services<br>
Contact
</div></details></nav>
It looks like you want to hide the navigation when the toggle link is clicked. If so, I would do the following. Note that your <a> tags were outside the <li> tags, I've moved them inside.
<nav id="nav">
<ul>
<li class="nav-item">Overview</li>
<li class="nav-item">Amenities</li>
<li class="nav-item">Residences</li>
<li class="nav-item">Neighborhood</li>
<li class="nav-item">Availability</li>
<li class="nav-item">Contact</li>
<li class="btn login">Login</li>
<li class="nav0item">Toggle</li>
</ul>
</nav>
I would target by ID and not class, and set the display to none.
<script type="text/javascript">
function collapseNav() {
document.getElementById('nav').style.display = "none";}
</script>
Since your toggle is on a <li> inside the nav, your navigation menu (and the toggle) will be hidden when activated. So, I'd make a way to show it again. You could, for instance, add this function in your JS.
function showNav() {
document.getElementById('nav').style.display = "block";}
And then add a link somewhere for the user to show the menu again.
<button onclick="showNav();" >Show Menu</button>
If you go that route, I'd also hide the Show Menu button by default by adding id="shownav" style="display: none;" to hide it initially. And then have your collapseNav function also show the button:
document.getElementById('shownav').style.display = "block";
Thank you for your responses.
This is what I was looking for:
$(document).ready(function(){
$("li.nav-item a, .logo").click(function(){
$("nav").removeClass("responsive");
});
});
Now the "responsive" class gets removed when clicking on a navigation item or the logo, so my navigation returns to collapsed mode.
I am trying to fade in the navigation bar and stick to top while scrolling to bottom of the page. Its fade effect works only the first time. My code is below.
<style type="text/css">
.navOpacity{
opacity: 0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
var ht = $('header').height()+70;
if($(this).scrollTop() >= ht){
$("#navb").addClass("navbar-fixed-top navOpacity")
.fadeTo('slow','1');
$(".row:first").css("padding-top","50px");
}else{
$("#navb").removeClass("navbar-fixed-top navOpacity");
$(".row:first").css("padding-top","0px");
}
});
});
</script>
<div class="container">
<header class="page-header">
<h1>Hello world</h1>
</header>
<nav id="navb" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown" href="#">Page 1
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-md-4">
<h3>h1. Bootstrap heading</h3>
Hello world and Mario.
</div>
<div class="col-md-4">
<h3>h2. Bootstrap heading</h3>
Hello world and Mario.
</div>
<div class="col-md-4">
<h3>h3. Bootstrap heading</h3>
Hello world and Mario.
<img src="rsz_myimg.jpg" class="img-responsive" />
</div>
</div><!-- end or row class-->
</div><!-- end container class-->
Your problem is that after the first time fadeTo is executed, your element is left with a style="opacity: 1" attribute, which is left there. So you have to remove it when you scroll to the top.
I've also changed the way the navbar is hidden, I suggest using .hide(), cause it also uses the elements' style attribute, that way it will not be overridden. And there's also a navbarVisible var that is used to determine if the navbar is already faded in and if it is, the code for fading it in is not executed when not needed. This should be a tiny step up in performance.
This seems to work just fine:
<script type="text/javascript">
$(document).ready(function(){
var navbarVisible = false;
$(window).scroll(function(){
var ht = $('header').height()+70;
if ($(this).scrollTop() >= ht) {
if (!navbarVisible) {
$("#navb").addClass("navbar-fixed-top")
.hide()
.fadeTo('slow','1');
$(".row:first").css("padding-top","50px");
navbarVisible = true;
};
} else {
$("#navb").removeClass("navbar-fixed-top").removeAttr('style');
$(".row:first").css("padding-top","0px");
navbarVisible = false;
}
});
});
</script>
You don't need this part anymore:
<style type="text/css">
.navOpacity{
opacity: 0;
}
</style>
Here's a link to an example JSFiddle with working code: JSFiddle Link
My two cents...
Just add this Javascript and away you go. Currently configured to graduate over the first 200px of scroll.
var scrollFadePixels = 200;
var fadeNavbar = function (window)
{
var opacity = window.scrollTop() / scrollFadePixels;
$('.navbar-fixed-top').css('background-color', 'rgba(34,34,34,' + opacity + ')');
}
fadeNavbar($(window));
$(window).scroll(function () {
fadeNavbar($(this));
});