I have a webpage with 3 items in the navbar; Products, Partners and Support. I have moved this navbar to a seperate .html file; navbar.html and called it using load-navbar.js. I have done this to avoid code repetition. Is it possible to use javascript to show which navbar item is active? Is it possible to use switch statements to do this. If yes, how can I do this?
navbar.html
<nav class="navbar navbar-default mc-header navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mc-collapse-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img id="logo" src="images/logo.svg" alt="Company Logo">
</div>
<div id="mc-collapse-nav" class="collapse navbar-collapse mc-navbar-spacing">
<ul class="nav navbar-nav navbar-right" >
<li><a class="mc-active" href="Items/products.html">Products</a></li>
<li>Partners</li>
<li>Support</li>
</ul>
</div>
</nav>
load-navbar.js
$(function(){
$("#main-nav").load("main-nav.html");
});
The mc-active class in products is added to the class to show that products.html is the active class.
You can store the current url in a variable:
var x = $(location).attr('href');
And then assign an "active" class to a link if the href matches the url, or if it's href is contained within the url, whichever fits your situation. You can use this link:
css-tricks link
or this search:
jquery active link google
for more info that might fit your situation better. I don't think you'd need more than a simple comparison between the window href and link href. Also I'd definitely follow the advice given in the comments.
Related
I am using Creative Tim's material dashboard that is based off bootstrap. The demo page shows a set notification and user dropdown menu items. I am trying to create the first set for the notification. Here is the source code, then I will explain further.
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top">
<div class="container-fluid">
<div class="navbar-wrapper">
<a class="navbar-brand" href="javascript:;">Your Monthly Reports</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle Navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="javascript:;" class="nav-link" id="navbarDropdownNotifications" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class='material-icons'>notifications</i>
<span class='notification'>1</span>
<p class='d-lg-none d-md-block'>Notifications</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownNotifications">
Some Action
</div>
</li>
</ul>
</div>
</div>
</nav>
I cannot seem to get the dropdown menu to actually SHOW. Oh the element changes classes and gets the show, showing, hide, & hiding elements when appropriate, and upon inspecting the element and focusing on it, it shows that the element is "locating" itself in the right place, but you just cannot see it. I have even tried altering the z-index, and other styling of div.dropdown-menu using the element inspector, but it doesn't seem to want to show its face.
I even looked on the 3D view to see if something was in front of it, and there isn't. The display for the element is not none and has all the elements you would expect to see. But the issue is that you can't see it when you click the notification icon. It changes the DOM code, but nothing changes visually.
The issue was something not related to anything I had shared. I also had altered the theme using colormind.io. The issue was that the drop down menu was being incorrectly altered. I found the rule that had changed its VISIBILITY to hidden, but the on click function had actually not be updated correctly.
Just checked my website via phone, and noticed that the page navigation menu does not closing then pressing any link. And i cant understand why and there is the problem. Cant find the cause of the problem... I am looking at the scrip code below to understand but...
site: www.scorpion3d.com
This is whole menu block which i have:
<div class="menu-block">
<!-- Container -->
<div class="container">
<!-- Ownavigation -->
<nav class="navbar ownavigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><span><img src="assets/images/logo.png" alt="logo" height="64" width="64"></span>Scorpion3D</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">PRADŽIA</li>
<li>PASLAUGOS</li>
<!-- <li>Features</li> -->
<!-- <li>DARBAI</li> -->
<li class="dropdown">
Blog
</li>
<li>KAINORAŠTIS</li>
<li>APIE MUS</li>
<li>KONTAKTAI</li>
</ul>
</div>
<div id="loginpanel" class="desktop-hide">
<div class="right" id="toggle">
<a id="slideit" href="#slidepanel"><i class="fo-icons fa fa-inbox"></i></a>
<a id="closeit" href="#slidepanel"><i class="fo-icons fa fa-close"></i></a>
</div>
</div>
</nav><!-- Ownavigation /- -->
</div><!-- Container /- -->
</div><!-- Menu Block /- -->
The drop down menu opens and closes properly on a resized monitor on my side. Try clear your cache. It could be that or possibly you have linked your bootstrap and jquery files wrong.
Include your jquery file first, then bootstrap both in the footer. Ensure nothing is in the header, or that duplicates are present.
You have a wrong path for jquery.min.js (404).
Make sure the script jquery.min.js is in the assets/js folder.
the correct answer was to include some additional code to html or js,
in this case I chose to include to HTML instead of:
<li class="active">PRADŽIA</li>
changed to all links like per example:
PRADŽIA</li>
Now mobile version menu close instantly then any link in the menu pressed.
don't forget to add after menu end single div:
<div class="collapse" id="navbar"></div>
I am making a website using bootstrap. I have made a nav bar where I want the menu items to link to the different sites. However it is not working at all - it is usually never a problem getting links to work, but I am new in using Bootstrap and i feel like I'm missing something - do you need to have a js code to get your links to work? Normally I just write something like I have put all the sites in the same folder and I have tried so many things now. I have also tried giving the items and ID and then adding a js code, but nothing happens.
$(document).ready(function() {
$('#aboutus').on('click', function() {
location.href = "About kopi.html";
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container-fluid">
<nav class="row navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Name</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="Portfolio.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="About kopi.html" id="aboutus">About</a>
</li>
</ul>
</div>
</nav>
</div>
Hi Maria and welcome to Stack Overflow.
The syntax for your a tag is correct. And thus it should work.
Saying that your link doesn't work, is extremely vague. What you could try:
Make sure all your styles and scripts from Bootstrap are loaded. (This includes dependencies such as jQuery and Popper.js)
Make sure the pages you're referring actually exist. (Does this file: Portfolio.html exist?)
It looks like you're using some classes that are specific to Bootstrap 4 in your markup, but including the Bootstrap 3 JS and CSS.
Try using the Bootstrap 4 files instead:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"/>
Here's a fiddle I created to try to reproduce your problem. It seems to work with the Bootstrap 4 files:
https://jsfiddle.net/bbz0t198/
I'm having an issue with my Bootstrap navbar button not showing the dropdown links when the screen is collapsed.
I have a navbar brand that hides on collapse but ever since i added a scrolling nav plugin my links dont show in dropdown. It is is also acting strangely in that if the page is below the level of the top section clicking the button just scrolls up to the top yet i cannot see what the conflict is.
here is a fiddle:
jsfiddle
My HTML is like so:
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div id="twitterbootstrap">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand hidden-desktop page-scroll" href="#page-top">BrandHidden</a>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="brand visible-desktop page-scroll" href="#page-top">BrandVisible</a></li>
<li><a class="page-scroll" href="#page-top">Home</a></li>
<li><a class="page-scroll" href="#about">Link 1</a></li>
<li><a class="page-scroll" href="#services">Link 2</a></li>
<li><a class="page-scroll" href="#contact">Link 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
</body>
Any ideas would be greatly appreciated.
Edit: its complicated to me.... dont laugh im only new ;)
The problem is in your custom css. In the rule that you added for .hidden-desktop you added position: relative. I'm not sure why you need position relative anyway but what it's doing is capturing the click event for the entire navbar. You can see this by adding pointer-events: none to the rule and it will magically work.
The pointer-events property in css basically says to allow the mouse to penetrate the layers of your design and register click events on things that are otherwise obstructed by some higher layer. Although adding pointer-events: none works to demonstrate the problem here, it only has IE support in version 11, so I recommend removing the position: relative property. There is no logical reason I can think to have position set given that the display is set to none.
.hidden-desktop {
display: none !important;
position:relative; /*remove this*/
}
Here's the updated fiddle: http://jsfiddle.net/jme11/m3m99fhr/7/. I linked the Bootstrap files now in the external resources so that you can see it working in fiddle itself.
How about bootstrap.css?
Try this one:http://jsfiddle.net/iboylmz/McHUc/41/
I want to create a floating footer menu using JavaScript and HTML & CSS with other-sub menus for elements in the footer menu. The sub-menus also should float on mouse hoover. Is there any way i can fulfill these needs. Please help and Thank you.
It sounds like you're fairly new to CSS (no offence if you're not!)
To make it easier, I'd suggest using the Twitter Bootstrap framework - it'll save you a lot of time if you're new to CSS and save you from many common pitfalls.
Bootstrap has a Navbar component, which you can be fixed to the bottom of the site. I've attached some sample code, but I'd strongly recommend visiting the Bootstrap website and learning your way around - it'll be well worth your effort.
HTML (make sure you include the bootstrap stylesheet and javascript)
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Submenu Example
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
Normal Item
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
Dropup Item
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>