How to click on a link from the header and then go back with HTML, Javascript and CSS? [closed]


Tags: javascript,html,css

Problem :

To start with, my website have a header with different symbols that I will link up too.

Here are the steps I want to complete:

  1. Click on a specific buttom inside the header "Contacts" from "home".
  2. Go to "Contacts"
  3. Then click back to "home" from "Contacts".

The problem I get is that the navigation bar must be copied into every file I link up too. How can I prevent this?

I do not know how to code this, can someone please help me?



Solution :

If you are only willing to use html, css & javascript to fix it, then maybe you can achieve that by using angularjs which is a javascript framework and can solve your problem. You create your index.html with all the navigation links and load the external links/ html files in your index.html I created this as an example for you:

http://codepen.io/Edrees21/pen/OPaYVv

<body ng-app="NavigationMenu">
    <div class="container" ng-controller="NavigationController">
        <ul class="nav-menu">
            <li ng-repeat="item in navigationItems"
                    ng-class="{active:isActivePage(item.url)}"
                    ng-click="onItemClick(item)">
                {{item.name}}
            </li>
        </ul>
        <div class="content">
            <div ng-include="currentPage"></div>
        </div>
    </div>
    <script type="text/ng-template" id="your-first-html-file.html">
        <h4>About us</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
    </script>
    <script type="text/ng-template" id="your-second-html-file.html">
        <h4>Links</h4>
        <ul>
            <li>some link</li>
            <li>some link</li>
            <li>some link</li>
        </ul>
    </script>
    <script type="text/ng-template" id="your-third-html-file.html">
        <h4>Contact</h4>
        <p>John Doe</p>
        <p>Long Avenue</p>
        <p>1234567890</p>
    </script>
</body>

Javascript:

angular.module('NavigationMenu', [])
.controller('NavigationController', ['$scope', function ($scope) {
    $scope.navigationItems = [{
        name: 'About us',
        url: 'your-first-html-file.html'
    }, 
    {
        name: 'Links',
        url: 'your-second-html-file.html'
    }, 
  {
        name: 'Contact',
        url: 'your-third-html-file.html'
    }];

    $scope.currentPage = 'your-first-html-file.html';

    $scope.onItemClick = function (item) {
        $scope.currentPage = item.url;
    }

    $scope.isActivePage = function (pageUrl) {
        return pageUrl == $scope.currentPage;
    }
}]);

    CSS Howto..

    How to include a font .ttf using CSS?

    How to make links work, regardless of location in directory structure?

    (html/css) How do I remove the margin appearing from my header, and have it only apply to my Logo?

    How can I place a checkbox within a button? [closed]

    CSS Layout. Can not get idea how to fix it

    CSS: Formatting blocks. Strange height behaviour or how to adjust height by content inside th block

    Showcase the first n-items in a bootstrap grid

    how to create bar code like in a horizontal line using css (For Email)

    How to auto adjust parent DIV height according to the contents in child DIV?

    CSS - Get image to show text overlayed on top of the image on hover?

    How to combine multiple CSS declarations to shorthand

    How to hide/show the content of a div with dynamic height?

    how to add css padding for button such that it is consistent with column width?

    How do I apply CSS to the table generated into another window?

    How to change color of text from left to right along with the background?

    How stop elements from moving

    Large gap between text, how to fix?

    How to solve css selector conflit

    How do I vertically align text inside an anchor element, which is nested within an unordered list

    How to implement a table structure using CSS

    CSS hover - parents are affected, too. How to avoid this?

    How to animate CSS resize?

    How can I vertically align text within a span element, or make the span the same size as the text?

    How to fade out after hover is done using CSS

    How can I make responsive image take up 100% of its parent's height?

    How to slide in divs from off screen into absolute layout using CSS transitions?

    How to apply transition on div movement when upper disappears?

    How to include all css kept in a direcotry?

    How to remove border in radial gradient so that it can mix well?

    Javascript: How can I undo the setting of element.style?