AngularJS and CSS: A Guide to Effortlessly Toggle Sliding List Elements

Question

AngularJS and CSS: A Guide to Effortlessly Toggle Sliding List Elements

I am in the process of developing a drop-down menu that can be clicked. Using my custom AngularJS directive, I have successfully implemented functionality to load menu items dynamically.

While I have made significant progress, I have encountered a small issue.. I am unable to find a CSS(3) only solution for creating an animation when the ul dropdown occurs.

This is what I currently have:

https://i.sstatic.net/6x6Xw.gif

The code snippet for the dropdown function:

private CreateDirective(): any {
        return {
            restirct: 'E',
            scope: {
                dataset: '='
            },
            templateUrl: 'App/Templates/LeftBar/index.html',
            controller: function ($scope) {
                $scope.Select = Select;

                var SelectedItem;

                function Select(MenuItem: any): any {

                    if (SelectedItem != null) {
                        SelectedItem.selected = false;
                    } 

                    if (MenuItem.open) {
                        MenuItem.selected = true;
                        MenuItem.open = false;
                        return;
                    }

                    if (MenuItem.childs && MenuItem.childs.length > 0) {
                        MenuItem.open = true;
                    }

                    MenuItem.selected = true;
                    SelectedItem = MenuItem;
                }
            }
        }
    }

Is there a way to achieve a similar effect to jQuery's slideToggle within my directive?

Thank you for your assistance!

javascript css angularjs typescript

Answer 1

Answer №1

If you want to achieve this effect using only CSS, along with some assistance from Angular for toggling classes, here's how you can do it.

Styling in CSS

.container {
  width: 50px; // Adjust based on your widget width
  overflow: hidden;
}

.content {
   margin-top: 0;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   transition: all .3s ease;
}
.container.collapsed .content {
  margin-top: -100%;
}

HTML Setup

<ul>
  <li class="container" ng-class="{'collapsed':!item.open}">
    <ul class="content">
      <li>...</li>
      ...
    </ul>
  </li>
  ...
</ul>

This CSS technique involves hiding the UL behind its parent LI by setting a negative margin, causing the UL to move away from its parent block and effectively reducing the size of the parent element.

Answer 2

If you want to achieve this effect using only CSS, along with some assistance from Angular for toggling classes, here's how you can do it.

Styling in CSS

.container {
  width: 50px; // Adjust based on your widget width
  overflow: hidden;
}

.content {
   margin-top: 0;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   transition: all .3s ease;
}
.container.collapsed .content {
  margin-top: -100%;
}

HTML Setup

<ul>
  <li class="container" ng-class="{'collapsed':!item.open}">
    <ul class="content">
      <li>...</li>
      ...
    </ul>
  </li>
  ...
</ul>

This CSS technique involves hiding the UL behind its parent LI by setting a negative margin, causing the UL to move away from its parent block and effectively reducing the size of the parent element.

Answer 3

Answer №2

To add animation to it using only CSS, you can animate the max-height property:

var button = document.getElementById('nav');
button.onclick = function(e) {
  var target = e.target;
  if (e.target.tagName !== 'SPAN') return;
  target = target.nextSibling.nextSibling;
  if (target.className === 'open') {
    target.className = '';
  } else {
    target.className = 'open';
  }
};

ul {
  display: block;
   transition:all 0.5s ease;
}

ul ul {
  max-height: 0;
  overflow: hidden;
}

ul#nav1.open {
  max-height: 50px;
}
ul#nav2.open {
  max-height: 100px;
}
ul#nav3.open {
  max-height: 150px;
}

ul span {
  cursor: pointer;
}

<ul id="nav">
  <li>
    <span>Title 1</span>
    <ul id="nav1">
      <li>one</li>
      <li>two</li>
    </ul>
  </li>
  <li>
    <span>Title 2</span>
    <ul id="nav2">
      <li>three</li>
      <li>four</li>
      <li>five</li>
      <li>six</li>
    </ul>
  </li>
  <li>
    <span>Title 3</span>
    <ul id="nav3">
      <li>seven</li>
      <li>eight</li>
      <li>nine</li>
      <li>ten</li>
      <li>eleven</li>
      <li>twelve</li>
    </ul>
  </li>
</ul>

Please note that I have used max-height instead of height to avoid small pixel discrepancies between browsers. However, different heights need to be set for each navigation option to ensure smooth animation effects.

Answer 4

To add animation to it using only CSS, you can animate the max-height property:

var button = document.getElementById('nav');
button.onclick = function(e) {
  var target = e.target;
  if (e.target.tagName !== 'SPAN') return;
  target = target.nextSibling.nextSibling;
  if (target.className === 'open') {
    target.className = '';
  } else {
    target.className = 'open';
  }
};

ul {
  display: block;
   transition:all 0.5s ease;
}

ul ul {
  max-height: 0;
  overflow: hidden;
}

ul#nav1.open {
  max-height: 50px;
}
ul#nav2.open {
  max-height: 100px;
}
ul#nav3.open {
  max-height: 150px;
}

ul span {
  cursor: pointer;
}

<ul id="nav">
  <li>
    <span>Title 1</span>
    <ul id="nav1">
      <li>one</li>
      <li>two</li>
    </ul>
  </li>
  <li>
    <span>Title 2</span>
    <ul id="nav2">
      <li>three</li>
      <li>four</li>
      <li>five</li>
      <li>six</li>
    </ul>
  </li>
  <li>
    <span>Title 3</span>
    <ul id="nav3">
      <li>seven</li>
      <li>eight</li>
      <li>nine</li>
      <li>ten</li>
      <li>eleven</li>
      <li>twelve</li>
    </ul>
  </li>
</ul>

Please note that I have used max-height instead of height to avoid small pixel discrepancies between browsers. However, different heights need to be set for each navigation option to ensure smooth animation effects.

AngularJS and CSS: A Guide to Effortlessly Toggle Sliding List Elements

Answer №1

Answer №2

Similar questions

Retrieve a specific subdirectory from the bundle

Hide the search popup when the user clicks on the "find" button within the jqgrid

Ensuring a response is sent back only after a loop has completed in NodeJs

Learn how to utilize Jquery to create a dynamic slide effect that toggles the

Does WebSVG struggle with producing sharp, defined lines in its inline format?

Utilize Content Delivery Network Components in Conjunction with a Command Line Interface Build

Unable to upload file to firebase storage - encountering technical issues

What is the process of converting a `typeorm` model into a GraphQL payload?

Guide on toggling the button by clicking on the icon to turn it on or off

Firefox not displaying caret in Bootstrap dropdown

Conflicting issues with jQuery's load() method

Enhancing the Syntax of If and If Else in Jquery Functions

Inheritance-based generic type inference in Typescript

Three.js: Wanting to create objects and add motion along a curved path

What is the method for including a hyperlink in an swf document?

Guide for bringing in a complete npm library into React Native beyond just a single file access

How can I hide a root layout component in specific nested routes within the app directory of Next.js?

When dalekjs attempted to follow a hyperlink with text in it, the link failed to function properly

What is the best way to retrieve the value of an input field in React when incorporating Material UI components?

Why is it necessary to call the .call(this) method when extending a THREE.js "class"?