multiple pages link active - javascript

I have a bunch of pages and I want class active change when I switch pages
<nav class="main-navi">
<ul>
<li>
<a id="homeLink" href="index.html">
Home
<span class="dot"></span>
<span class="corner"></span>
</a>
</li>
<li >
<a id="portfolioLink" href="portfolio_masonry.html">
Portfolio
<span class="dot"></span>
<span class="corner"></span>
</a>
</li>
<li >
<a href="about.html">
About
<span class="dot"></span>
<span class="corner"></span>
</a>
</li>
<li>
<a class="active" href="service.html">
services
<span class="dot"></span>
<span class="corner"></span>
</a>
</li>
<li>
<a href="blog.html">
Blog
<span class="dot"></span>
<span class="corner"></span>
</a>
</li>
<li>
<a href="contact.html">
contacts
<span class="dot"></span>
<span class="corner"></span>
</a>
</li>
</ul>
</nav>
I know it will require javascript but I'm so newbie about javascript, can you guys help me? and doest every pages have that script?

// grab all elements with the classes dot and corner
var all = document.getElementsByClassName(dot, corner);
// if the url contains any of the below then we set the classname of dot and corner
var contains = "example"
var contains2 = "example2"
var contains3 = "example3"
var contains4 = "example4"
function setclassname() {
if (window.location.href.indexOf(contains || contains2 || contains3 || contains4) > -1) {
// change newclassname to your preferred classname.
all.className = newclassname;
}
}
Add a onclick to your spans, include the .js file in your html pages and change the variables. (read the comments I placed)

Each page only has the scripts that you put on it. I would recommend taking the script and making it its own script/file which you could then include on all pages.
You can get the url of the current page using window.location.href. Then you could write some logic to add an active class or something to whichever element in the list matches the current URL.

You could use Bootstrap to build a navigation bar. It will style <li> elements with the active class. Include this in the head of your HTML file:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
getbootstrap.com
Here's a demo bootstrap navbar:
<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 class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
codepen.io/anon/pen/KVbOvo
www.w3schools.com/bootstrap/bootstrap_navbar.asp

Related

bootsrap nav-item loaded by jquery shows but is unresponsive when cache is enabled

I have got an index.html that looks something like this:
<body>
..
<div id="sidebar">
</div>
..
<script src="plugins/jquery/jquery.min.js"></script>
..
<script src="/dist/js/pages/common.js"></script>
..
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
..
</body>
common.js looks something like this:
$("#sidebar").load("/pages/app/sidebar.html", function(){
let fname = localStorage.getItem("first_name");
let sname = localStorage.getItem("first_surname");
$("#user-name").text(fname + " " + sname);
});
and sidebar.html looks something like this:
<div class="sidebar">
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item menu-open">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-microchip"></i>
<b>Dispositivos</b>
<p>
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">5</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/pages/app/general.html" class="nav-link">
<i class="fas fa-sticky-note nav-icon"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="/pages/app/maps.html" class="nav-link">
<i class="fas fa-map-marked-alt nav-icon"></i>
<p>Mapa</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
As you can see I a importing the sidebar using jquery, however I have noticed that if cache is enabled in the browser, many times the nav-item dropdown becomes unresponsive (it shows in index.html, but if I click it, it does not show the submenus). If cache is disabled however, the nav-items always seem to work. I think there is something related to the timings and loading of the scripts but I do not know If I should change the order of something or modify my jquery script somehow for it to load correctly.

side nav dropdown menu not opening with bootstrap

I need to implement a side nav menu with sub menu
the problem that I am facing is that the sub menu or dropdown are not opening , or not collapsing if they were open by default .
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<i class=""></i> UI Elements <span class="arrow"></span>
</li>
<ul class="sub-menu" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
</ul>
</div>
</div>
so I have one dropdown menu for testing, if I click any one of them they will not open
may be this help you...
<head>
<title>Bootstrap 3 Collapsible Sidebar</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="wrapper">
<nav id="sidebar">
<!-- Sidebar Header -->
<div class="sidebar-header">
<h3>Collapsible Sidebar</div>
</div>
<!-- Sidebar Links -->
<ul class="list-unstyled components">
<li class="active">Home</li>
<li>About</li>
<li><!-- Link with dropdown items -->
Pages
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
I figured out that my problem is not with the html tags
I should include jquery library before the bootstrap libraries.

Correct layout for Bootstrap label in navbar

I'm trying to add an alert for unread messages in my Bootstrap navbar. I was able to figure out how to format this alert nicely. However, I have not been able to figure out how to format it correctly within an <a> tag.
<ul class="nav navbar-nav">
<li>Profile</li>
<li>Message Trainer</li>
<li>
<a href="#">
<span class="navbar-text label label-danger" style="color: white">
1
</span>
</a>
</li>
</ul>
This layout looks like this.
I also tried moving the CSS classes currently in my <span> element to the <a> element (and remove the span), but that was much worse.
Is there an existing way for Bootstrap to support this, or do I need to just custom style this all?
Just remove the CSS class: .navbar-text;
Result:
<span class="label label-danger" style="color: white">
1
</span>
View on JsBin : https://jsbin.com/bugakey/edit?output
alert("View the example on a large screen so that the <nav> elements are displayed inline")
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="nav navbar-nav">
<li>Profile</li>
<li>Message Trainer</li>
<li>
<a href="#">
<span class="label label-danger " style="color: white">
1
</span>
</a>
</li>
</ul>

Twitter Bootstrap 3 navbar dropdown menu not toggling

I am messing around trying to make a custom bootstrap 3 website however I'm currently stuck up on this dropdown menu. I have tried everything from using the web CDN instead of my local files, copying other peoples dropdown code and nothing seems to want to work.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>INDEX</title>
<!-- linking bootstrap CSS files -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- linking my custom CSS stylesheet -->
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:700"
rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- MDP top banner image -->
<div class="top-banner">
<img class="img-responsive" src="Assets/MDP Website Banner.png" width="2000" height="350" alt=""/>
</div>
<!-- top bar nav -->
<nav class="navbar navbar-inverse navbar-maintop">
<div class="container-fluid align-center">
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active nav-tab">HOME</li>
<li class="nav-tab">ABOUT US</li>
<li class="dropdown nav-tab">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGE 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>PAGE 1</li>
<li>PAGE 2</li>
<li>PAGE 3</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PAGE 2<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 class="nav-tab">SUSPENSION & LIFT COMPONENTS
</li> -->
<li class="nav-tab">PAGE 3</li>
</ul>
</div>
</div>
</nav>
<script src="jquery/jquery.js"></script>
<script type="text/javascript" src='js/bootstrap.min.js'></script>
</body>
</html>

Strange spacing in twitter bootstrap top navbar

I've been using Twitter Bootstrap to create a navbar across the top of a page which has several dropdown menus. For some reason, the first list element aligns to the bottom of the bar by virtue of a empty link that fills the top space. I copied this first term for the other list items, but none of the other elements align to the bottom or have an empty link. Any ideas for how i can fix this?
<!DOCTYPE html>
<html>
<head>
<title>Nav Mockup</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href="#" class="navbar-brand">NCTL<a>
<button class="navbar-toggle" data-toggle="collapse" data-target="navbarHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navbarHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>Challenge / Links</li>
<li>STEM Equity</li>
<li>Slannis Message</li>
<li>Supporters</li>
<li>MOS Press Room</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>K12 Classroom</li>
<li>Museum Based</li>
<li>Traveling</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>Achievements</li>
<li>Resources</li>
<li>Video Links</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>Enews Archive</li>
<li>NCTL Studies</li>
<li>Media Coverage</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
You a error in your markup
<a href="#" class="navbar-brand">NCTL<a>
Should be:
NCTL
DEMO HERE

Categories