Developing a sliding menu with AngularJS

Question

Developing a sliding menu with AngularJS

Currently, I am developing an AngularJS application. One of the features I am working on involves having a menu at the top of my page that, when an item is selected, will slide down to reveal content specific to that selection in the same area as the menu. While researching how to accomplish this, I came across suggestions to create a directive, but I am still unclear on how to implement it. Below is an example of what my page looks like:

https://i.stack.imgur.com/oZiHl.png

When an item from the menu is selected, the static image disappears and is replaced by a "sub menu" along with its content.

https://i.stack.imgur.com/NEaGq.png

In situations where the combined height of the "SubMenu" and "Content" exceeds that of the image, the remaining content should slide down accordingly.

My primary concern is figuring out how to display this SubMenu based on the selected menu item (highlighted in the black square). My approach was to create a menu template containing the necessary HTML and CSS and then dynamically bind different content to this template to display it within the desired div (in this case, the one initially displaying the static image). However, due to my limited experience with AngularJS, I am encountering difficulties translating this idea into practice.

javascript jquery html css angularjs

Answer 1

Answer №1

Check out this plunker example:

https://plnkr.co/edit/xJoF4IuDtJlGzWmTYoqZ?p=preview

Here is an explanation of the angular code:

angular.module('plunker', []);

function MainCtrl($scope, menuSvc) {
  // This controller sets the menu contents to the service
  menuSvc.putAll([{t:"item1"},{t:"item2"}]);
}

// A simple menu service that stores menu items
angular.module('plunker').factory("menuSvc", [ function( ) {
    var items;

    var clear = function(){
        items = {};
    };

    var getAll = function(){
        return Object.keys(items);
    };

    var put = function( item ){
        items[item.t] = item;
    };

    var putAll = function( itemArray, dontClean ){
        if( !dontClean ){
            clear();
        }
        itemArray.forEach(
            function(i){
                put(i);
            }
        );
    };

    clear();
    return {
        put: put,
        getAll: getAll,
        putAll: putAll,
        clear: clear
    };
}]);

// Directive that gets its content from the service
angular.module('plunker').directive('menu', function(){

  return {
    restrict: 'E',
    scope: {
    },

    templateUrl: 'menu.html',

    controller: function($scope, menuSvc) {
        $scope.menu = menuSvc.getAll();
    },

    replace: true
  };
});

If the menu content is updated, you can communicate this event to the directive using Angular events, so it will re-read the content from the service. Refer to https://docs.angularjs.org/api/ng/type/$rootScope.Scope for $on, $emit, $broadcast

Example of a listener in the menu controller:

$scope.$on('someEvent', function(){ 
    // Update menu content
    // Trick is to update the menu content, not overwrite it
    // For example:
     $scope.menu.length = 0;
     var newValues =  menuSvc.getAll();
     newValue.forEach(function(x){ $scope.menu.push(x); } );
});

Answer 2

Check out this plunker example:

https://plnkr.co/edit/xJoF4IuDtJlGzWmTYoqZ?p=preview

Here is an explanation of the angular code:

angular.module('plunker', []);

function MainCtrl($scope, menuSvc) {
  // This controller sets the menu contents to the service
  menuSvc.putAll([{t:"item1"},{t:"item2"}]);
}

// A simple menu service that stores menu items
angular.module('plunker').factory("menuSvc", [ function( ) {
    var items;

    var clear = function(){
        items = {};
    };

    var getAll = function(){
        return Object.keys(items);
    };

    var put = function( item ){
        items[item.t] = item;
    };

    var putAll = function( itemArray, dontClean ){
        if( !dontClean ){
            clear();
        }
        itemArray.forEach(
            function(i){
                put(i);
            }
        );
    };

    clear();
    return {
        put: put,
        getAll: getAll,
        putAll: putAll,
        clear: clear
    };
}]);

// Directive that gets its content from the service
angular.module('plunker').directive('menu', function(){

  return {
    restrict: 'E',
    scope: {
    },

    templateUrl: 'menu.html',

    controller: function($scope, menuSvc) {
        $scope.menu = menuSvc.getAll();
    },

    replace: true
  };
});

If the menu content is updated, you can communicate this event to the directive using Angular events, so it will re-read the content from the service. Refer to https://docs.angularjs.org/api/ng/type/$rootScope.Scope for $on, $emit, $broadcast

Example of a listener in the menu controller:

$scope.$on('someEvent', function(){ 
    // Update menu content
    // Trick is to update the menu content, not overwrite it
    // For example:
     $scope.menu.length = 0;
     var newValues =  menuSvc.getAll();
     newValue.forEach(function(x){ $scope.menu.push(x); } );
});

Developing a sliding menu with AngularJS

Answer №1

Similar questions

Confirming the authenticity of a newly added user input with the help of jQuery

Exploring the potential of Framework7 in Single Page Applications: optimizing performance by preloading

ClickAwayListener is preventing the onClick event from being fired within a component that is nested

`How can I trigger a JavaScript event when the content of an input field is modified?`

How do I make an AJAX request in Rails without including a question mark in the data?

Once the vue-cli has deployed to the server, the server's requested image path is now located in /dist/ folder

What is the best way to utilize jQuery for drag and drop functionality to transfer data between multiple divs and automatically update the database when the drop occurs?

The transitioning period caused the gooey effect to become distorted

Need to specify a parameter type for the input tag in HTML

Managing JSON responses from a server using Javascript

Repetitive use of multiple submit buttons in AngularJS

Modify the path name in Next.js according to the local environment

I have the latitude and longitude for both the shop and user, and I am looking to display a list of shops in order based

Attempting to fill a collection of JSON entities through a GET call?

Traversing through objects in react.js

Tips for repairing a side bar and header with CSS when using a JS & jQuery scroller

CSS Style in Safari does not conceal Div on Tailwind

Placement of BOX alongside each other

AngularJS Firebase Login Scope Value Not Retained After Refresh

Show or conceal a class