How to do side navigation menu remains in every pages

Question

Anyone help me please. I'm new to coding. I want to create a new android application using only HTML, CSS, JS (for cross- platform next time). I've struck with this problem for days. I finished my first page (index.html) and will do another page but when I link to the other pages, the side navigation menu is disappear. I don't want to copy and paste side navigation menu in every pages of my project it's not clean. I think that there is the easier way to do that but I don't know yet. I strictly use only HTML CSS JS. How can I do.

Usually stuff like that is done using templating from server-side frameworks and languages like PHP, MVC and Angular. Angular is JS only — LiefdeWen, Mar 09 '18 at 09:14
If you are planning to do something like that, you should consider using front end frameworks like angular, react, etc — deepak thomas, Mar 09 '18 at 09:15
@SagarKodte PhoneGab, Cordova , Ionic some things like that - -" I'm extremely new to this. — Nicky, Mar 09 '18 at 09:18
trying to achieve this with only html/css/js will not be clean. [this](https://stackoverflow.com/questions/11598530/partial-render-in-html-javascript) will be helpful though if you just want to stick to html/css/js (although not recommended). — jayly, Mar 09 '18 at 09:20
It's phonegap. All this frameworks have their own component sidebar menu you can use it. — Sagar Kodte, Mar 09 '18 at 09:20
Have you tried to put the sidebar inside a function and call this function on both pages? — JoelBonetR, Mar 09 '18 at 09:20
Thank you in advance guys . I'll try every ways you told me. — Nicky, Mar 09 '18 at 09:22

score 0 · Answer 1 · answered Mar 09 '18 at 09:30

I think you are mixing 2 requirements here, first is being able to have a templatized HTML web view with a sidebar present on all your pages. And other developing a mobile application which will work on all devices including Android and IOS.

First question - Share the same sidebar across pages

You can achieve the sidebar with bootstrap templates, here you can find many examples of a sidebar. And to make it share other pages you can either do it with Jquery or Vanilla JS as in this post. Or you can use other MVC frameworks like Angular or react or Vue.

Second question - new android application ( for cross-platform)

To achieve this with simple HTML, CSS & JS you can look at the ionic framework which lets you create mobile apps just like web apps and you can ship it across to Android or IOS as needed.

Or you can have a look at Google's PWA which does something similar with less complexity or code changes (doesn't support IOS yet, but the user can view web app on the browser).

All this done an ideal way would be to first decide on technology and framework you think is suitable for your needs. And then go ahead with creating the actual HTML, CSS & JS coding for header, sidebar, footer & Content

_/\_ Thank you so so much for helping me. I'll try. – Nicky Mar 10 '18 at 14:32 — Nicky, Mar 10 '18 at 14:32

score 0 · Answer 2 · answered Mar 09 '18 at 09:32

So you wanna go old school, huh? The first thing you need to get your head around is component-based design. In your example above, your sidebar is a component that you want to include on every page. However, in the pure HTML, CSS and JS, this is going to be a bit of a nightmare, but still doable. I would, however, recommend looking into a simple framework that works based on components (think React, Angular, Vue, etc...), but given you're new to coding, thats a big step up, so here's the simplest solution for now.

Create your sidebar in a separate file, all your HTML for it will live here (sidebar.html for example).

Next, in each page you want to use the sidebar, split your html to have two sections.

<div id="sidebar_container"></div>
<div id="content"> Content stuff goes here! </div>

Now, you'll need some JS to pull your new sidebar component into each file. To do that, we'll first, find the element with sidebar_container as its ID, then load the file contents, and inject them as innerHTML to the container.

function loadComponentFromFile(filepath, location) {
   var client = new XMLHttpRequest();
   client.open('GET', filepath);
   client.onreadystatechange = function() {
        location.innerHTML = client.responseText;
   }
   client.send();
 }

 var sidebar_container = document.getElementById("sidebar_container");
 var content = loadComponentFromFile('./sidebar.html', sidebar_container);

Include your JS script (as an external file) at the bottom of your body on each page, so the HTML has rendered before the JS activates. And boom. Vanilla component based design.

Note: There are a lot of validation/checks that should be done, but i've left them out for brevity

Plunkr example: https://plnkr.co/4Dtl50

Thank you so much very much. I'll try. – Nicky Mar 10 '18 at 14:32 — Nicky, Mar 10 '18 at 14:32

score 0 · Answer 3 · answered Mar 09 '18 at 09:33

0

//add in js

 use window.onload=fn;
    function fn(){
    var u=document.getelementById("nav");
    u.innerHtml="your code of navbar";
    }

//add div with id nav in html

<div id="nav"></div>

answered Mar 09 '18 at 09:33

bhuvan kalra

17
8

How to do side navigation menu remains in every pages

3 Answers3