I'm trying to append my menu by referring to an external JavaScript file without manually adding the menu in each of my files. How do I go about this? Here is the menu I intend to add. Btw, I'm using bootstrap. I placed the script src before my ending body tag.
<header class="container">
<div class="row">
<img class="col-sm-2" src="..\logo.png" />
<nav class="col-sm-10 navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>Home</li>
<li>About</li>
<li class="active">Revenge Is A Dish Best Served Cold</li>
<li>Gallery</li>
</ul>
</div>
</nav>
</div>
</header>
Just use innerHTML : https://jsfiddle.net/8zaLv0js/
var ul = document.getElementsByClassName('navbar-nav')[0];
ul.innerHTML = ul.innerHTML + "<li>click me!</li>";
In ES6 you could just
Import './template.html' as template;
document.getElementById('container').append(template);
With the actual standard i guess the easiest way is to use JQuery
$('container').load('./template.html');
Related
I have the following bootstrap code which define our main menu navigation :-
<div class="col-xl-9 col-lg-9">
<div class="main-menu d-none d-lg-block">
<nav>
<ul id="navigation">
<li>home</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
but i need to make the current page underline using bootstrap if possible?
Put a class in the one that is active and in css give the underline to the class
Like this:
<li class="active">home</li>
css:
.active{
border-bottom: xxxx;
border-color:xxxx;
border-style:xxx;
}
You need some JavaScript for this. Basically, you need to add a class dynamically, e.g. active to your active <li> element and then add some styles to this class. Check this article for further details.
I am new to this area.
I build a navbar with bootstrap 3 and the "load"-function. If I want to use the back button of the browser, it does not work.
What do I have to do to make it work?
Here my simplified code:
index.html:
<nav class="navbar navbar-inverse navbar-fixed-top text-center">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
</div>
</nav>
Thanks Schulz
There is no easy way to do this. You would have to use the history object and change the URL every time you click on something that you want to come back to later.
Basically on click you don't only load the remote content but also update the URL. You would also have to use a hash (#) in URL so the page won't refresh. This implies creating a routing mechanism for your app.
I've following Bootstrap HTML code :
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="projects" class="dropdown"><a class="dropdown-toggle projects" data-toggle="dropdown" href="#"><span class="projects">Projects</span></a>
<ul class="dropdown-menu">
<li>List</li>
<li>Add new project</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Now I want to hide the drop-down menu using jQuery code i.e. I want to hide the drop-down menus List and Add new project.
I want this to be done in document-ready function. You can add the specific ids to the suitable tag to make the thing work.
Thanks.
$( document ).ready(function() {
$("ul.dropdown-menu").children().hide();
});
Hello good people from stackoverflow.
I got a question.
I recently added a responsive menu to my website. It worked fine. But I added a second, different menu. One made for mobiles. I hide it on a normal scale and show it at the mobile version. But the function suddenly stopped working. No names were changed except for one but that should not interfere with it. Here is the old code:
<div class="header">
<div class="container">
<ul class="nav">
<li><a class="active_page" href="index.php">Home</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
<li class="icon">
≡
</li>
</ul>
</div>
</div>
And here is the new code:
<div class="header">
<div class="container">
<ul class="nav">
<li><a class="active_page" href="index.php">Home</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="header_mobile">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
<li class="icon">
≡
</li>
</ul>
</div>
</div>
And last here is the function:
function myFunction() {
document.getElementsByClassName("nav")[0].classList.toggle("responsive");
}
It is all linked properly because it worked before. I hope anyone can help me with this.
Thanks in advance.
EDIT: Here is the link to the website, just scaled it to mobile to see it: http://portfoliotristan.esy.es/index.php
function myFunction() {
document.getElementsByClassName("nav")[1].classList.toggle("responsive");
}
You are selecting the first 'nav' item. You need to select the second nav item by changing 0 to 1.
I am using WOW.js to animate a navbar which is fixed to the top with navbar-fixed-top. Unfortunately if i am already paste the top, the navbar wont be animated until i goto the top of the page again.
Is there a way to force that particular part which consists of the menu to be animated no matter what?
HTML
<div class="container">
<div class="navbar navbar-default navbar-fixed-top wow fadeInDown">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown active">
Getting started <b class="caret"></b>
<ul class="dropdown-menu">
<li>Download Bootstrap</li>
</ul>
</li>
<li>CSS</li>
<ul class="nav navbar-nav navbar-right">
<li class="active">Customize</li>
</ul>
</div>
</div>
</div>
Code is shown here: https://jsfiddle.net/DTcHh/7108/
Example is shown here: http://fiddle.jshell.net/DTcHh/7108/show/light/
Unfortunately JSFiddle automatically goes to top when the page is refreshed, but if you quickly scroll down while updating the problem becomes visible.
I got the same problem and I built a rough solution:
With jQuery I check, if the Page is not scrolled to top and add a Class to the Item:
$(document).ready(function(){
if($(".navbar").offset().top > 0) {
$('.navbar .wow').each(function(){
$(this).addClass('menu-fix');
});
}
});
then I added following CSS:
.navbar .menu-fix {
visibility: visible !important;
}
It's not a clean solution, but it works.